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.

Xiaomi wordmark next to the orange rounded-square MI logo
Isometric showcase of four Mi Finance phone screens on a deep blue backdrop

Overview

Mi Finance is a financial app pre-installed on all Xiaomi smartphones. In the summer of 2021, I interned as a UX designer in the Mi Design team.

My role

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.

Role
UX designer
User researcher
Duration
3 months
Scope
User research
Prototyping & design
Team
MI Design

Challenge

The unpleasant experience on account opening process stops users from further investment

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 the e-account opening process, the flow had usability issues and an incoherent product interface.

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.

High-fidelity account opening screen with a three-step progress bar

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.

Six states of a three-step account opening progress indicator moving from bind card through ID

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.

High-fidelity ID upload screen showing a document framed in a phone

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 retention pages.

High-fidelity error dialog stating face verification failed

Impact

Upon the launch of MiFinance 6.0, account opening became clearer and more goal-oriented

Upon the launching of MiFinance 6.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.

12million
active customers in 2020
100%
positive feedback from user testings
27%
increase in market penetration
71%
increase in conversion rate
43%
increase in user positive feedback

Research

Mapping out the happy user journey to understand users' pain points and gain points

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.

Vertical journey map of the legacy account opening process across four stages

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.

Flat illustration of a man holding a map beside stylised trees with a large question mark above him
Matrix of six user types from new to heavy
Screenshot matrix of the Mi Finance account-opening flow
Matrix mapping five user groups against four account-opening steps

Insight 01

Competitive analysis shows how other platforms guide users

Initially, I structured 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 overall interface appearance.

Competitive comparison of five Chinese fintech apps' e-account onboarding

Insight 02

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.

Four legacy Chinese-language account opening screens whose primary buttons switch between orange and blue

When coming to the instruction page, there are three typical visual issues:

  1. An account opening mixed with product purchase.
  2. A 3-step instruction is not aligned with user actions.
  3. The active career information is greyed out, which may be misinterpreted as unclickable status.
Two legacy Mi Finance e-account entry screens shown in Chinese alongside English translations

Insight 03

Further research presents error messages which make users even more impatient

When facing error messages or failed operations, users do not know how 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 point to guide users to the right path instead of wrong actions.

Audit chart pairing three generic failure dialogs with the five real causes hidden behind each

Ideation

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.

Low-fidelity plan one wireflow branching by user group through account creation
Design for error message
Low-fidelity wireflow adding error-state dialogs
First iteration
First-iteration wireframes covering exit-retention prompts
Second iteration
Full low-fidelity wireflow for the e-account journey
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.

Specification of a three-step progress indicator in six states

Instructional widgets lead to success

Clear diagrams and understandable tips during the registration process result in lower error rates and shorter operation times.

Three guidance screens for ID photo upload

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.

Seven dialog designs for verification failures and exit retention

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.

High-fidelity e-account opening screen in empty stateE-account opening screen variant with a one-minute introduction tagHigh-fidelity e-account screen in filled state showing a bound bank card with daily limitID upload screen with a hand-holding-document illustrationFace ID verification screen with a completed two-step indicator

Final design

The end-to-end e-account journey, as it shipped

Final high-fidelity flow map of the e-account journey