Back
Back
Redesigned Cross-Border transaction Flow
Redesigned Cross-Border transaction Flow
Redesigned Cross-Border transaction Flow
I collaborated with teams to conduct user research and led workshops for design feedback and iteration, resulting in an intuitive UI, improved responsiveness, and a 20% reduction in payment process time.
I collaborated with teams to conduct user research and led workshops for design feedback and iteration, resulting in an intuitive UI, improved responsiveness, and a 20% reduction in payment process time.
I collaborated with teams to conduct user research and led workshops for design feedback and iteration, resulting in an intuitive UI, improved responsiveness, and a 20% reduction in payment process time.
Stakeholders
Stakeholders
Stakeholders
Product team, Developers, PMs
Product team, Developers, PMs
Product team, Developers, PMs
My Role
My Role
My Role
UX/UI Designer
UX/UI Designer
UX/UI Designer
Duration
Duration
Duration
2 Months
2 Months
2 Months
A quick project overview
A quick project overview
A quick project overview
Cross-border single payment is a transaction process that facilitates real-time currency exchange for business and individual end users, for various purposes, such as payroll, investment, tuition fees, family supports etc.
Cross-border single payment is a transaction process that facilitates real-time currency exchange for business and individual end users, for various purposes, such as payroll, investment, tuition fees, family supports etc.
Cross-border single payment is a transaction process that facilitates real-time currency exchange for business and individual end users, for various purposes, such as payroll, investment, tuition fees, family supports etc.
Redesign to align with the user needs and business needs
Redesign to align with the user needs and business needs
Redesign to align with the user needs and business needs
Initial Problem
Initial Problem
Initial Problem
Users struggle with navigating the process, error correction, and transaction clarity.
Users struggle with navigating the process, error correction, and transaction clarity.
Business Need
Business Need
Business Need
Expand white-labelling services, improve efficiency while maintaining compliance.
Expand white-labelling services, improve efficiency while maintaining compliance.
Knowledge Gap
Knowledge Gap
Knowledge Gap
Unclear root causes of user frustrations, limited understanding of user patterns.
Unclear root causes of user frustrations, limited understanding of user patterns.
Research methods
Research methods
Research methods
Use a heat map to visualize the users' frustrations
Use a heat map to visualize the users' frustrations
Use a heat map to visualize the users' frustrations
Users' pain points from the research were
Users' pain points from the research were
Users' pain points from the research were
Issue 1
Issue 1
Account switching disrupts user interaction at the start of the payment process
Account switching disrupts user interaction at the start of the payment process
Issue 2
Issue 2
The lack of a clear UI, and low visual hierarchy made it difficult to read.
The lack of a clear UI, and low visual hierarchy made it difficult to read.
Issue 3
Issue 3
Errors frequently occur on the select sender and recipient steps. Users struggle to distinguish clients.
Errors frequently occur on the select sender and recipient steps. Users struggle to distinguish clients.
Issue 4
Issue 4
Users had to navigate back several steps to correct errors, which is inconvenient for update changes.
Users had to navigate back several steps to correct errors, which is inconvenient for update changes.
Design approaches with testing
Design approaches with testing
Optimizing the switch account flow
Optimizing the switch account flow
Relocating 'Account' to the top menu as a 'Global Account'
Relocating 'Account' to the top menu as a 'Global Account'
First iteration
First iteration
Reassessing My Design Decision on Account Navigation
Reassessing My Design Decision on Account Navigation
Reassessing My Design Decision on Account Navigation
Although I solved the issue of helping users more clearly identify their current account location, I paused to consider potential flaws in the overall account design.
Although I solved the issue of helping users more clearly identify their current account location, I paused to consider potential flaws in the overall account design.
Iteration with improving consistency:
Relocating the account to the left-side menu improves interface consistency.
Dropdown menus offer greater clarity compared to vertical clicks.
- Integrating account balance with the account enhances overall cohesiveness.
Iteration with improving consistency:
Relocating the account to the left-side menu improves interface consistency.
Dropdown menus offer greater clarity compared to vertical clicks.
- Integrating account balance with the account enhances overall cohesiveness.
Second Iteration
Second Iteration
Second Iteration - After
Refining the layout and enhancing visual cues to improve readability
Refining the layout and enhancing visual cues to improve readability
The drawback of the first iteration is that the funding source dropdown design may lead to a repetitive selection experience for users. The switch icon was initially intended to inform users that they could enter either the pre-exchange or post-exchange amount to increase flexibility. However, feedback indicated that users might misunderstand it, leading to errors in the currency exchange sequence.
First Iteration
First Iteration
Second Iteration
Second Iteration
What I've improved in the second iteration:
sing icons to indicate the current currency being exchanged and providing instructional text to guide users through the process.
Use side-by-side dropdowns for shorter content to prevent the page from becoming too long.
Confirm acceptable file formats and sizes with the backend, and provide prompts on the frontend to help users upload accurately.
What I've improved in the second iteration:
sing icons to indicate the current currency being exchanged and providing instructional text to guide users through the process.
Use side-by-side dropdowns for shorter content to prevent the page from becoming too long.
Confirm acceptable file formats and sizes with the backend, and provide prompts on the frontend to help users upload accurately.
What I've improved in the second iteration:
sing icons to indicate the current currency being exchanged and providing instructional text to guide users through the process.
Use side-by-side dropdowns for shorter content to prevent the page from becoming too long.
Confirm acceptable file formats and sizes with the backend, and provide prompts on the frontend to help users upload accurately.
Enhancing client accounts distinction by after testing
Enhancing client accounts distinction by after testing
"What if we rearranged the steps? Would it make more sense to select the sender and receiver of the payment process first?"
"What if we rearranged the steps? Would it make more sense to select the sender and receiver of the payment process first?"
"What if we rearranged the steps? Would it make more sense to select the sender and receiver of the payment process first?"
Testing new flow
Testing new flow
Testing new flow
Push back from the developers due to technical constraints
Push back from the developers due to technical constraints
After discussing with the development team, we realized my design wasn't feasible due to account and currency dependencies, which limited sender and receiver options and caused flow issues when changing currency in step 2.
After discussing with the development team, we realized my design wasn't feasible due to account and currency dependencies, which limited sender and receiver options and caused flow issues when changing currency in step 2.
The original design also lacked responsiveness, making the process unclear for users. This insight helped me understand the challenges with selecting senders and recipients and informed future design improvements.
The original design also lacked responsiveness, making the process unclear for users. This insight helped me understand the challenges with selecting senders and recipients and informed future design improvements.
Final solution - Designing for responsive frontend to match with backend system design
Final solution - Designing for responsive frontend to match with backend system design
Final solution - Designing for responsive frontend to match with backend system design
The system will trigger a filter after users select exchange currency, displaying only the relevant senders and recipients on the step 2 and 3.
Providing visual feedbacks with clear icon and text: company/individual profile + company name + located country + currency
The system will trigger a filter after users select exchange currency, displaying only the relevant senders and recipients on the step 2 and 3.
Providing visual feedbacks with clear icon and text: company/individual profile + company name + located country + currency
Sender
Sender
Recipient
Recipient
Designing a in-line edits on the review page
Designing a in-line edits on the review page
Leverage existing design components from other features to ensure consistency and scalability within the design system.
Leverage existing design components from other features to ensure consistency and scalability within the design system.
Final Design
Final Design
Impact on the Team
Impact on the Team
Impact on the Team
I prioritized key features and led discussions with product managers and developers to align user needs with business objectives.
I enhanced communication by facilitating workshops and promoting open dialogue, helping stakeholders understand design challenges and fostering a shared product vision.
I prioritized key features and led discussions with product managers and developers to align user needs with business objectives.
I enhanced communication by facilitating workshops and promoting open dialogue, helping stakeholders understand design challenges and fostering a shared product vision.
Impact on the Design
Impact on the Design
Impact on the Design
I adapted the design based on developer feedback to ensure technical feasibility and an efficient final flow.
I restructured the content hierarchy and added editable review options, improving usability and accuracy while addressing key user pain points
I adapted the design based on developer feedback to ensure technical feasibility and an efficient final flow.
I restructured the content hierarchy and added editable review options, improving usability and accuracy while addressing key user pain points
Reflections
Reflections
Reflections
Through this project, I learned the importance of understanding backend logic in advance, especially as someone new to the team. Sometimes, we think we're familiar with and understand the design but there are often gaps when collaborating across departments. Learning how to effectively raise suggestions and improve efficiency during the project is a skill I need to continue developing.
Through this project, I learned the importance of understanding backend logic in advance, especially as someone new to the team. Sometimes, we think we're familiar with and understand the design but there are often gaps when collaborating across departments. Learning how to effectively raise suggestions and improve efficiency during the project is a skill I need to continue developing.