Satago :
Satago :
Optimising Satago's client platform
Optimising Satago's client platform UX
Optimising Satago's client platform
Leadership
Leadership
Project planning
Project planning
Strategy
Strategy
B2B
B2B
UX research
UX research
UI
UI
Prototyping
Prototyping
User testing
User testing
Before/After
Driving UX impact as a solo designer in a high-performing agile team
Driving UX in a high-impact agile team
Role and responsibility
Role and responsibility
Role and responsibility
Led comprehensive user research, developed detailed UX and UI designs, conducted usability testing, and established a cross-functional design process.
Led comprehensive user research, developed detailed UX and UI designs, conducted usability testing, and established a cross-functional design process.
Deliverables
Deliverables
Deliverables
Journey Maps
Usability testing
User Flows
High-Fidelity Designs
Design Process Strategy
Journey Maps
Usability testing
User Flows
High-Fidelity Designs
Design Process Strategy
Team collaboration
Team collaboration
Team collaboration
Product Owners- Shellianne Duffin, Elodie Vanier, Rose Pyke, Mohammad Mguil
Front End Devs - Bartosz Jacher, krzysziek Antecki
Credit Risk manager - Connor
Customer support manager - Norman leng
→ Product Owners- Shellianne Duffin, Elodie Vanier, Rose Pyke, Mohammad Mguil
→ Front End Devs - Bartosz Jacher, krzysziek Antecki
Credit Risk manager - Connor
Customer support manager - Norman leng
THE PROBLEM
THE PROBLEM
Data-heavy platform with clunky UX for monitoring client's finances
Data-heavy platform with clunky UX for monitoring client's finances
Data-heavy platform with clunky UX for monitoring client's finances
The Satago internal platform integrates data from disparate systems to support client managers in invoice financing. Minimal emphasis on UX has led to unstructured navigation, causing inefficiencies and scalability challenges.
The Satago internal platform integrates data from disparate systems to support client managers in invoice financing. Minimal emphasis on UX has led to unstructured navigation, causing inefficiencies and scalability challenges.
The Satago internal platform integrates data from disparate systems to support client managers in invoice financing. Minimal emphasis on UX has led to unstructured navigation, causing inefficiencies and scalability challenges.
→ Complex UX Multiple people needed per task.
→ Data heavy navigation Low content discoverability.
→ High training time Low adoption rates.
→ No design system
→ Complex UX Multiple people needed per task.
→ Data heavy navigation Low content discoverability.
→ High training time Low adoption rates.
→ No design system
→ Complex UX Multiple people needed per task.
→ Data heavy navigation Low content discoverability.
→ High training time Low adoption rates.
→ No design system
How is this impacting the business?
How is this impacting the business?
30 -
30 -
%
%
customer support calls
customer support calls
customer support calls
stemmed from usability issues.
stemmed from usability issues.
stemmed from usability issues.
20 -
20 -
%
%
development efforts wasted
development efforts wasted
development efforts wasted
on redundant front end components.
on redundant front end components.
on redundant front end components.
0 screenshots
0 screenshots
of our product
of our product
of our product
on the marketing website due to outdated design.
on the marketing website due to outdated design.
on the marketing website due to outdated design.
INTRODUCING STRUCTURE
INTRODUCING STRUCTURE
Establishing a robust design process
Establishing a robust design process
Leading the initiative to set up a structured yet flexible design process at Satago. Enhancing efficiency, reducing design cycle times, and ensuring seamless cross-functional collaboration.
Leading the initiative to set up a structured yet flexible design process at Satago. Enhancing efficiency, reducing design cycle times, and ensuring seamless cross-functional collaboration.
Research
Strategy
Design
Validation
Comprehensive Research and Collaboration
Marketing Team: Worked closely to analyse data on SMEs and clients, gaining insights into drop-offs and platform usage trends through mixpanel.
CS Team: Reviewed customer support tickets to identify recurring issues and pain points.
Product Owners: Collaborated to streamline design cycles, through continuous refinement and planning sessions.
Development Team: Coordinated to align new design components with the existing storybook, ensuring feasibility and performance.
Research
Strategy
Design
Validation
Comprehensive Research and Collaboration
Marketing Team: Worked closely to analyse data on SMEs and clients, gaining insights into drop-offs and platform usage trends through mixpanel.
CS Team: Reviewed customer support tickets to identify recurring issues and pain points.
Product Owners: Collaborated to streamline design cycles, through continuous refinement and planning sessions.
Development Team: Coordinated to align new design components with the existing storybook, ensuring feasibility and performance.
Research
Strategy
Design
Validation
Comprehensive Research and Collaboration
Marketing Team: Worked closely to analyse data on SMEs and clients, gaining insights into drop-offs and platform usage trends through mixpanel.
CS Team: Reviewed customer support tickets to identify recurring issues and pain points.
Product Owners: Collaborated to streamline design cycles, through continuous refinement and planning sessions.
Development Team: Coordinated to align new design components with the existing storybook, ensuring feasibility and performance.
DRIVING IMPACT
DRIVING IMPACT
Agile and hands-on
Agile and hands-on
This structured process not only met the objective of reducing the design cycle time but also fostered a collaborative environment that delivered high-quality outcomes efficiently.
This structured process not only met the objective of reducing the design cycle time but also fostered a collaborative environment that delivered high-quality outcomes efficiently.
Months
Months
Months
+
+
+
Features launched
Features launched
Features launched
%
%
%
Reduction in design cycle time
Reduction in design cycle time
Reduction in design cycle time
%
Reduction in scope changes per sprint
%
%
Reduction in scope changes per Sprint
Reduction in scope changes per Sprint
SELECTED EXAMPLE
SELECTED EXAMPLE
Feature 1 : Debt verification flow
Feature 1 : Debt verification flow
Debtors are contacted on a regular basis to verify invoices raised by their client. The aim was to increase the verification rate, reduce manual workload, and enhance user experience, leading to better trust and efficiency.
Debtors are contacted on a regular basis to verify invoices raised by their client. The aim was to increase the verification rate, reduce manual workload, and enhance user experience, leading to better trust and efficiency.
The problem
The problem
The problem
→ Less than 0.8% invoices are verified through the platform.
→ Internal team has no clear flow to record manual verifications.
→ The current flow is clunky leading to navigation complexity.
→ Less than 0.8% invoices are verified through the platform.
→ Internal team has no clear flow to record manual verifications.
→ The current flow is clunky leading to navigation complexity.
→ Less than 0.8% invoices are verified through the platform.
→ Internal team has no clear flow to record manual verifications.
→ The current flow is clunky leading to navigation complexity.
20
20
20
External debtors
interviewed
External debtors
interviewed
External debtors interviewed
5
5
5
Members of risk team
interviewed
Members of risk team
interviewed
Members of risk team interviewed
Narrowing the challenges
Narrowing the challenges
Narrowing the challenges
→ Simplifying a Complex Information Architecture.
→ Organizing a likely large volume of content in a way that makes invoices easy to discover.
→ Reducing workload for risk team due to manual verification calls.
→ Simplifying a Complex Information Architecture.
→ Organizing a likely large volume of content in a way that makes invoices easy to discover.
→ Reducing workload for risk team due to manual verification calls.
Rethinking the user flows
Rethinking the user flows
Rethinking the user flows
→ Invoice Management Interface Clear Invoice List Display
→ Utilize dynamic data retrieval to ensure real-time updates on invoice details.
→ One-click individual and bulk verification of all invoices followed by a confirmation dialogue.
→ Administrative Efficiency Maintain a log of verification actions and commentary to support audits and compliance.
→ Invoice Management Interface Clear Invoice List Display
→ Utilize dynamic data retrieval to ensure real-time updates on invoice details.
→ One-click individual and bulk verification of all invoices followed by a confirmation dialogue.
→ Administrative Efficiency Maintain a log of verification actions and commentary to support audits and compliance.
CROSS FUNCTIONAL COLLABORATION
CROSS FUNCTIONAL COLLABORATION
Prototype testing
Prototype testing
Testing the user flows with the risk team
Tasks tested
Tasks tested
During a usability testing session, members of the internal risk team interacted with a prototype designed to simplify the debt verification process. The primary goal was to address the cumbersome navigation and improve the overall efficiency of verifying invoices.
During a usability testing session, members of the internal risk team interacted with a prototype designed to simplify the debt verification process. The primary goal was to address the cumbersome navigation and improve the overall efficiency of verifying invoices.
Task 1 : Identifying Debtor Strength
Task 1 : Identifying Debtor Strength
Task 1 : Identifying Debtor Strength
Use the top dashboard data to assess the debtor's reliability and decide whether to proceed with bulk verification.
Use the top dashboard data to assess the debtor's reliability and decide whether to proceed with bulk verification.
Task 2 : Bulk Selecting Invoices
Select multiple invoices for verification using the bulk selection feature and request a DV.
Select multiple invoices for verification using the bulk selection feature and request a DV.
Task 3 : Filtering Invoices
Task 3 : Filtering Invoices
Task 3 : Filtering Invoices
Use the filter option to sort invoices by status (Disputed, Unverified, Paid).
Impact of the new flow
Impact of the new flow
I timed how long it took each participant to verify a set number of invoices using both the old and new flows. Introducing bulk selection, robust filtering and debtor data overview on the main page made a significant impact.
I timed how long it took each participant to verify a set number of invoices using both the old and new flows. Introducing bulk selection, robust filtering and debtor data overview on the main page made a significant impact.
%
%
Reduction in avg. time to verify an invoice
Reduction in avg. time to verify an invoice
Reduction in avg. time to verify an invoice
Old flow - 12 minutes New Flow - 7 minutes
Old flow - 12 minutes New Flow - 7 minutes
Old flow - 12 minutes New Flow - 7 minutes
VISUAL TRANSFORMATION
VISUAL TRANSFORMATION
High fidelity screens
High fidelity screens
Enhanced User Interface for Invoice Management
Before/After
Before/After
QUICK LOOK
QUICK LOOK
Redesign of the entire platform ground up
Redesign of the entire platform ground up
Designed over 200+ screens and 20 flows for the internal dashboard
Designed over 200+ screens and 20 flows for the internal dashboard
SCALABILITY
SCALABILITY
Expanding component library
Expanding component library
At Satago, I took the initiative to expand and refine our design component library. I identified a significant disconnect between the components developers were using in Storybook and those originally designed. I systematically identified the gaps, prioritised components based on usage frequency, and ensured that new components met technical constraints.
At Satago, I took the initiative to expand and refine our design component library. I identified a significant disconnect between the components developers were using in Storybook and those originally designed. I systematically identified the gaps, prioritised components based on usage frequency, and ensured that new components met technical constraints.
Scaling components
Scaling components
Developing existing molecules to more sophisticated composite components. These enhancements enabled modularity and reusability across the design system, significantly reducing redundancy and development time.
Developing existing molecules to more sophisticated composite components. These enhancements enabled modularity and reusability across the design system, significantly reducing redundancy and development time.
Accessibility
Accessibility
Establishing an AA-compliant component library marks a crucial first step. These efforts ensured full compliance with WCAG 2.1 standards, resulting in a more inclusive user experience with further initiatives on the horizon to enhance our accessibility efforts.
Establishing an AA-compliant component library marks a crucial first step. These efforts ensured full compliance with WCAG 2.1 standards, resulting in a more inclusive user experience with further initiatives on the horizon to enhance our accessibility efforts.
Example in practice
Example in practice
Systems and async communications
Systems and async communications
Documenting high-level design patterns and components, employing a clear and structured format to ensure consistency and facilitate developer handoff. This documentation was continuously updated and utilised for asynchronous communication, improving cross-functional collaboration and minimising implementation errors.
Documenting high-level design patterns and components, employing a clear and structured format to ensure consistency and facilitate developer handoff. This documentation was continuously updated and utilised for asynchronous communication, improving cross-functional collaboration and minimising implementation errors.
Conclusion
Conclusion
At Satago, I took the initiative to expand and refine our design component library. I identified a significant disconnect between the components developers were using in Storybook and those originally designed. I systematically identified the gaps, prioritised components based on usage frequency, and ensured that new components met technical constraints.
At Satago, I took the initiative to expand and refine our design component library. I identified a significant disconnect between the components developers were using in Storybook and those originally designed. I systematically identified the gaps, prioritised components based on usage frequency, and ensured that new components met technical constraints.
Opportunistic maintenance
It's not always feasible—or necessary—to allocate dedicated time for the Component Library in every sprint. Instead, we integrate component creation or refactoring into our existing tasks, estimating it as part of the overall story.
Driving continuous impact
Driving continuous impact
The redesign project at Satago is an ongoing journey. Through targeted improvements in usability, development efficiency, and marketing alignment, I have addressed the critical business metrics initially identified.
≈66.67%
≈66.67%
≈66.67%
Reduction in avg. customer support calls regarding usability
Reduction in avg. customer support calls regarding usability
Reduction in avg. customer support calls regarding usability
From 180 calls to 60 calls per month
From 180 calls to 60 calls per month
From 180 calls to 60 calls per month