top of page
mockup1.png

Flash Wallet is a finance management dashboard helps you flexibly plan your budget, keep track of your expenses and income, and transfer and receive funds. Moreover, pay for services directly in your wallet and much more.

Flash Wallet

Scope:

Problem framing

Concept development

Validation

User Interface

User testing

Client:

Flash Express

Duration:

2019

My Role:

User Research

UI/UX Design

Design Strategy

What's the Context

Flash Wallet is a financial product of Flash Express Group, which is based on the company's main project - Express. This is a product’s web version. However, there are a few pain points that lower the quality of my user experience with the product. Those are limited features and obsolete interface design. This case study will lead you through the process of redesigning the product in order to address those limitations.

The Challange

Redesigning the dashboard to help the company in improving user experience by making the product more user-friendly and increase user engagement.

Goals & Metrics

I collaborated with a team of product designers and researchers. By building a dashboard web experience for flash wallet. We intend to: Present users with complex information in an easy-to-understand format to improve the performance. The focus of the new design is on usability and efficiency.

  • Clear: Clearly displays the required information.

  • Simple: Present information in a simple form.

  • Consistent: Consistency need to be taken care of for its layout, organization and content.

  • Meaningful: The story behind the dashboard visuals should be understandable to the user.

Why is this a Problem

  • The original website looks outdated.

  • It has a bad user experience and is hard to navigate.

  • Features on the site don't work properly.

  • It does not reflect the latest business and marketing strategy.

  • The website can't accurately reflect the brand.

  • Does not reflect the expansion of the capabilities and offering.

Dashboard.png

Low User Visit Rate & High Bounce Rate. User are having a hard time using the site. They are keep complaining about it. 

GA-audience-overview-1024x460.png

Research

Competitive studies and Research

In order to understand similar products on the market, I conducted competitive research and analyzed their UVP, beneficial features, and common user complaints.

Before I started to redesign the user experience, user flow, and UI, I wanted to identify particular user pain points. As a result, I interviewed ten users who used the flash wallet to find out the following:

  • What they do with flash wallet?

  • What needs and goals drive them to use flash wallet?

  • What they’re struggling with while using the current dashboard?

  • What type of data they’re interested in seeing?

  • How might they attempt to use our wallet?

During the interviews, our team spent some time understudying our user’s backgrounds, learning about their exceptions to the Flash Wallet Dashboard, and understanding what motivates or demotivates them to check their balance and their consumption habits.

Synthesis & Analysis

Key Findings:
  • More males (58%) are interested in digital wallet than females. (42%).

  • 68% of users are under 35 years old.

  • 20- 35 years group of users often use digital payments to transfer money (77%), and 8.4% say they send money to their parents.

  • 35-55 years group digital wallet is more about manage money and bill payment.

  • Main concerns: safety / easy / quick.

  • Main motivations:  Track all payments, Transfer and managed the funds.

  • Many users reported that the UI looked unprofessional and hard to use.

During the synthesis of our findings, I recognized some common pain points users experienced while utilizing the current dashboard.

peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peopleblackone.png
peopleblackone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peopleblackone.png
peopleblackone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png
peoplewhiteone.png

0/10  Find the product easy to use, and clear to navigate.

3/10  Understand the financial data without much confusion.

2/10  Understand how to transfer money to the friends/ contacts.

4/10  Find the transaction record clear to read and easy to get.

2/10  Would recommend the product to a friend if he/she want to use digital wallet.

Insights Generation

For determining the priorities, we did card sorting and organized user findings on an affinity map. I facilitated the meeting and came up with four categories involved in the typical user journey: 1 checking available balance; 2 tracking spending and earning; 3 transferring money to others; 4 finding latest transactions.

Group 12.png

Ideation

I facilitated some design sprints with the team to map out the task flow and come up with rough solutions to the issues found. I created concept sketches while exploring how to streamline the process and give the user precise instructions. Based on the research, we chose the appropriate KPIs for users and arranged them in accordance with the priority of users’ needs

5.JPG
WechatIMG5774.jpeg
2.JPG

Solution

Lo-fi wireframe

The new Dashboard represents a snapshot of key indicators as well as their performance. Those indicators, according to my research, are:

wireframe2.png
wireframe1.png

AB testing

Based on the user studies and survey results, I performed AB testing to determine what the user prefers and ensure I am creating an optimal result. To allow users to complete their tasks fast and make users feel good by facilitating smooth interaction with the interface.

A

SpendingStatisticsCard a.png

A

TransferCard b.png

A

ActivityCard b.png

B

SpendingStatisticsCard b.png
yes-png-9.png

B

TransferCard a.png
yes-png-9.png

B

ActivityCard a.png
yes-png-9.png

Hi-fi wireframe

After validating our Lo-Fi prototype and making a few iterations, we moved into the Hi-Fi phase. At this stage, we created a combination of styles, typography, colors, and others. After going through a number of stages of research and ideation, here is a final design:

mockup3.png

Design Goals : Help the user to find information and understand it quickly

  • Enhance the brand identity of Flash Wallet.

  • To deliver a personalized experience and intuitive user interface.

  • Put forward a more engaging and seamless management experience so that users may easily assess their money and assets.

User Interface Takeaways
  • Hierarchy

Defining information levels. Display more important information on the top left, divide the information into categories and display them in deferent views.

  • Simplicity

Use fewer columns to display information, and reduce clutter by removing redundant content.

  • Consistency

To make the dashboard easier to read, use similar visualizations and layouts between groups, and group related content visually.

  • Alignment

Do align dashboard elements with each other to organize better and make it a balanced look.

  • Whitespace

Use whitespace to group related information visually. It provides a breathing space to the user when he comes to see the information.

  • Color

Use an effective color scheme and branding color to grab the user’s attention and help them go through the information easily.

  • Fonts

Use standard fonts as users are easier to read and understand, use a suitable size and style of font that communication the information effectively.

 

The redesign is intended to save time and effort, while at the same time, providing easier and simpler information and data. A dashboard's main function is to communicate critical information to the user and make sure to deliver what they need. The UI should guide the users through content and task flows seamlessly.

Validation

For the purpose of improving overall user satisfaction. I identify the features and data that users want to see and organize and prioritize the information according to the user’s expectations.

We carried out validation testing of the desktop clickable prototype with 10 users. The following is a summary of the findings:

peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peoplewhiteone.png
peopleblackone.png
peoplewhiteone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peoplewhiteone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peoplewhiteone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peopleblackone.png
peoplewhiteone.png

10/10  Find the product easy to use, and clear to navigate.

8/10  Understand the financial data without much confusion.

9/10  Understand how to transfer money to the friends/ contacts.

9/10  Find the transaction record clear to read and easy to get.

9/10  Would recommend the product to a friend if he/she want to use digital wallet.

We found out that all the users agreed that the new design is substantially more modern and the user experience has been greatly enhanced. Their user experience has improved as a result of a better user flow and an application with easy-to-understand features and a layout.

Result

By getting to know our user base better, we were able to optimize the features of the wallet that directly reflected growth on the metrics of Flash Wallet. The improvement of the wallet and features allowed Flash Wallet’s day-to-day active users to grow by more than 52%, increased the retention rate by over 320%, and almost doubled the average duration of time that our users spend on Flash Wallet.

Final thoughts and Takeaways

As our user base has expanded, we have always kept our user feedback in mind to optimize the product user experience. By re-designing the web, we are able to significantly improve the dashboard clarity, and navigation and directly impact the success metrics. From this case study, I learned that:

 

  • Redesigning a product interface with an existing customer base should always begin with getting access to full analytics. Spending enough time to draw every insight from that data is crucial.

  • When developing data visualization products, we need a better way of comprehending the people using them. The rule of design that keeps it simple, form follows function and takes advantage of a hierarchy. More importantly, is to always keep the users in mind and deliver clear messages to them.

bottom of page