MiFinance

Create A Delightful User Experience
for Online Account Opening

For data security, I have omitted confidential information in this project.
All the data in this project belongs to me
‍

Role

UX Designer
User Researcher

Scope

User Research
Prototyping&Design

Duration

3 Months

Team

MI Design

Background

Mi Finance is a financial app pre-installed on all Xiaomi smartphones. In the summer of 2021, I interned as a UX designer in theMi Design team. As the main designer for optimizing account openings, I researched user feedback and competitive analysis, built prototypes for end-to-end processes, and initiated the high-fi prototype for Mi Finance 6.

Challenge

According to regional regulations, users in our platform must create an e-bank account before buying financial products from institutions.However, based on backend data, over half of global users will pause the purchase process when they create an e-bank account. When I first worked on thee-account opening process, the flow had usability issues and an incoherent product interface.
"The unpleasant experience on account opening process stops users from further investment "

Clear introduction
with goal-directed step

The previous account opening process was presented in the form of an ”action bar,"which confused users and made them doubt our product’s authenticity and value

Real-time
step-by-step instruction

People can follow the guide step-by-step when opening an account as it will show the current situation based on whether entered and completed.

Support users with
diagrammatic drawing

It is easy to become frustrated with an unqualified shooting environment for ID and face verification. To prevent that operation in advance, we offer users clear graphics and text for guidance.

Provide users with
"to-do" when an error occurred

Generated from previous data, we have a clear idea on why verification is not successful.Based on the analysis of those wrong operations, we pay efforts on the last retention pages

Metric of Suucess

Upon the launching of MiFinance6.0, the product that I get involved in designing and researching provides users with a clearer and more goal-oriented onboarding process for account opening.

0

million

active customers in 2020

0

%

positive feedback from user testings

0

%

% increase in Market Penetration

0

%

increase in coversion rate

0

%

increase in user positive feedback

Mapping out

Creating a positive user journey experience is our goal for iteration. I started to map out and conduct research on the happy user journey in order to understand user's pain points and gain points in the whole process
Problem Discovery

Poor guidance makes new users get lost in the path

To determine why the rate of suspension on investment is so high, I reach out to the customer service team for long-term customer feedback on the process. Looking through the data, we found that 72%of negative feedback comes from customers within 0 to 15 days of use. Digging into negative feedback, users have commented that it is easy to get lost on the platform.
‍
By classifying usage levels, I discovered that new users who first purchase e-bank products on the Mi Finance platform face this problem. Reflecting on the procedural problem, users with limited experience on the Mi Finance platform may encounter poor experiences when using the binding card, uploading ID, and verifying Face ID.
Insight from research

1. Competitive analysis show how other platforms guide users

Initially, Istructured a study to learn from our competitors. To better understand the user experience of account opening, a procedural operation, I began to research competitors by studying the arrangement of the instruction page, the workflow for the end-to-end process, and the over all interface appearance.
Insight from research

2. Further research informs us that the UI is incoherent and losing visual accessibility

In every step of the account opening process, the buttons are presented with different colors and inconsistent shapes in different stages, which can make the user feel confused during the process. 
When coming to the instruction page, there are three typical visual issues: 

‍Problem 1: An account opening mixed with product purchase 
Problem 2: A 3-step instruction is not aligned with user actions.​
Problem 3: The active career information is greyed out, which may be misinterpreted as unclickable status.
Insight from research

3. Further research presents error messages which make users even more impatient

When facing error messages or failed operations, users do not knowhow to address the situation. In short words, there are tons of reasons for failed actions. If users do not have reasons to revise their wrong information, they will get lost in our app repeatedly. So it is our gain points to guide user to the right path instead of wrong actions
Initial Design

Support users with a safe and easy journey

Our design target is to make users feel safe and valued when opening an e-account. Due to restricted rules with the financial products, we are not allowed to disrupt the workflow of this journey. So, instead,I brainstormed and came up with new features, redesigned the process guidance, unified the visual appearance, created a clear structure, and set timely reminders

design for error message

First Iteration

Second Iteration

Final Low-fi

Highlights

Provides users with delightful and clear guidance

We began to explore different options to make users see into the future. The instruction gives us a feasible solution to guide users step-by-step and inform them on what has been done, what is happening now, and what to do next
Instructional widgets lead to success
Clear diagrams and understandable tips during the registration process result in lower error rates and shorter operation times.

Offers users clear instructions when failures occur

When an operation fails, we express the reason to our users so they can understand the condition comprehensively and have clear guidance on how to proceed. We have also designed a "retaining page" to give users more space for consideration and increase the rate of successful applications.

Bring in a unified and promising brand image 

Followed by our new design library, I updated the visual appearance and unified our component library to make the process consistent and coherent.
While determining how to make complex information more approachable, I explored a lightweight path to make the experience well-suited for beginner investors.

Final Design and Workflow