Instant cash-out
is a click away
A case study highlighting the key insights and challenges throughout the redesign process to earn customer trust
Overview
My role
UI/UX designer
Team
1 PM, 3 developers, 2 UX designers
Time frame
12 weeks
Users are extremely careful when choosing finance-related product. This redesign project aimed to build customer trust in the product, optimize the truckers' wallet cash out feature and improve the product adoption rate. This case study highlights the key insights and challenges throughout the process.
Prototypes
We developed comprehensive prototypes for both first-time and returning users, ensuring a thorough examination of various edge cases and error scenarios.
First-time user flow
Returning user flow
The Problem
Pain point 1
users find content layout unfamiliar
Pain point 2
users find the financial terminology confusing
Pain point 3
users cannot easily grasp the status of each transaction
Users feel insecure and are hesitant to adopt the app due to the unfamiliarity of the design framework.
For a startup urgently needing to build user trust and enhance brand awareness, redesigning this feature is imperative.
Constraints
Constraint 1
Post-launch redesign with a tight timeline
Constraint 2
Needed to ensure consistency with the existing design by aligning with a conventional design style
Constraint 3
Limited resources for research, affordability for API
Impact
28%
more users within 2 months
11%
increase in cash out efficiency
81%
users found the redesign valuable
"How might we optimize the wallet feature to better build customer trust in our app?"
Process
Insights
Deep Insights
Design decisions
Iterations
1
2
3
Got deep insights from market analysis and user interviews.
Discuss, discover and decide through multi-functional collaboration.
Determined the optimal solution through multiple iterations.
We managed to complete thorough research into mature products and conducted user interviews with 5 users to get first-hand feedback.
Insight 1
Lack of sense of trust will cause immediate drop-off, especially for financial transaction related products or features.
Insight 2
The uniqueness of a financial app makes small design pattern detail / micro-interaction particularly important.
Design explorations
When developing design ideas, we aimed to be practical while maintaining innovative perspectives. We asked ourselves:
-
What is the simplest solution?
-
What is the most ideal option, disregarding constraints?
-
How can we balance these and move forward?
Intuitive design
We meticulously designed and tested every detail emphasizing transparency and micro-interactions. We fully respected the sensitivity of a financial app, in order to create a design that instills a sense of security in users.
Iterations
Besides design details, we also did much iterations on user flows.
Through rounds of user testing, we made several decisions together with PM, engineers and our client to optimize faster cash out.
Challenges
Our main challenges are:
1. Unfamiliarity with wallet features, need to research about the design patterns users are most familiar with
2. Cooperation with outsourced resources: The icons for bank accounts will be determined by the API adopted by the engineers, then we got style matched.
Make it work
So far, we've done 11 rounds of iterations. We've been through:
general style selection (human beings are visual animals)
→ decision for main items to display on screen
→ group relevant info on screen
→ optimize the overall cashout process
→ add error state → simplify the process
→ match the overall style and details with existing screens.
1. Main content and hierarchy
After choosing a vibrant style, we decided to prioritize "available balance" as the main headline based on user need, as it represents the amount users are most concerned about, that is, the amount they can immediately withdraw.
Then we grouped trips and earningas as secondary info, put under the eye-catching ' Cash out' button.
At the same time, we decided to put a transaction brief on the homepage so users can see the detail at first glance.
2. Transparency in transaction status
We removed the available balance calculated after each transaction due to its complexity, which excludes cashed-out and pending amounts.
Since this balance can change based on pending and cashed-out transactions and bank processing times, we decided to eliminate it to prevent confusion. Our focus shifted to providing users with transaction statuses, deeming the balance number less of a priority.
3. Tweak the Details and Micro-Interactions
3a. Symbols in transaction
Upcoming income and money has been withdrawn while under processing are both called ' pending', which can be confusing for the customers. So here we explored approaches to differentiate them by symbols like "+", "-", colors amd entry texts.
3b. Order title design exploration
To differentiate orders, we considered two options: order numbers or displaying trip origins and destinations. However, our analysis of truckers' shipment patterns revealed their repetitive routes, making the latter option not making sense as many order titles would be identical. Thus, we chose order numbers with a hyperlink to the detailed order page.
4. Align styles with existing screens
Since it's a wallet redesign project, we must follow the design style of existing screens, so we modify to match the details like fillet, margins, gutters as well as theme colors.
5. Finally! Jazz it up!
Finally we jazzed it up with icons and slight illustrations in the header to enhance user-friendly communication.
Make it work
So far, we've done 11 rounds of iterations. We've been through:
general style selection (human beings are visual animals)
→ decision for main items to display on screen
→ group relevant info on screen
→ optimize the overall cashout process
→ add error state → simplify the process
→ match the overall style and details with existing screens.
1. Main content and hierarchy
After choosing a vibrant style, we decided to prioritize "available balance" as the main headline based on user need, as it represents the amount users are most concerned about, that is, the amount they can immediately withdraw.
Then we grouped trips and earningas as secondary info, put under the eye-catching ' Cash out' button.
At the same time, we decided to put a transaction brief on the homepage so users can see the detail at first glance.
2. Transparency in transaction status
We removed the available balance calculated after each transaction due to its complexity, which excludes cashed-out and pending amounts.
Since this balance can change based on pending and cashed-out transactions and bank processing times, we decided to eliminate it to prevent confusion. Our focus shifted to providing users with transaction statuses, deeming the balance number less of a priority.
3. Tweak the Details and Micro-Interactions
3a. Symbols in transaction
Upcoming income and money has been withdrawn while under processing are both called ' pending', which can be confusing for the customers. So here we explored approaches to differentiate them by symbols like "+", "-", colors amd entry texts.
3b. Order title design exploration
To differentiate orders, we considered two options: order numbers or displaying trip origins and destinations. However, our analysis of truckers' shipment patterns revealed their repetitive routes, making the latter option not making sense as many order titles would be identical. Thus, we chose order numbers with a hyperlink to the detailed order page.
4. Align styles with existing screens
Since it's a wallet redesign project, we must follow the design style of existing screens, so we modify to match the details like fillet, margins, gutters as well as theme colors.
5. Finally! Jazz it up!
Finally we jazzed it up with icons and slight illustrations in the header to enhance user-friendly communication.
Optimize the user flow
In the initial rounds of user flow design, we established two separate user flows for first-time users and returning users to ensure clarity in the process.
Through testing, we made several decisions together with PM and engineers.
-
During the transaction process, there is no need to display processing fees as the platform covers them.
-
We allow users to add bank accounts instead of bank cards for cash out.
-
We positioned reminders for users regarding bank processing times and provided rough estimates of processing durations.
-
We discussed and finalized the placement of each back button with the engineers.
-
The icons for bank accounts will be determined by the API used by the engineers, then we got style match.
Further simplify the cash out process
After testing out many rounds of user flow, we further simplified the procedure by combining the cash out page and select bank account page, getting rid of an extra step.
Below is the revised cash out process incorporating the this enhancement, with error states added.
First-time user cash out key screens:
Returning user cash out key screens:
Design system
A robust design system and style guide was implemented to maintain consistency and efficiency. This system provided clear guidelines and assets, facilitating collaboration and ensuring a cohesive user experience across all platforms. By leveraging these resources, we streamlined our workflow and delivered a polished product that met user needs effectively.
Takeaways
Cross-functional collaboration at early stages is truly fundamental, it prevents much unnecessary design repetitions and keeps everyone on the same page. It also strengthens empathy and curiosity by listening to other's perspectives.
It's really fun to explore design in the field we were not familiar with at the very beginning. We as a team, got to look into market trends, dig in analysis, and come up with solutions together. Nice to keep the momentum for continuous learning with a great team!
( FYI - The amazing 2D illustrations in this style are from Storyset, go check out this amazing website and enjoy! )
