Vietcombank

As one of the largest banks in Vietnam, Vietcombank wants to use its reach to improve the financial health of its customers. Their current mobile app is well-rated but very basic in functionality.

To be outstanding, their app should do more to engage users, making it not only a needed app but also a wanted app in customer's daily life.

*This is a fictional project for UX Academy at Designlab.

YEAR / DURATION
Mar 2021 / 80 hours

ROLE
Product Designer - Research, Visual & Interaction Design, Prototype & Usability Testing

TOOLS
Figma, Maze, Zoom

VCB_Cover

Project Background

As one of the largest banks in Vietnam, serving over half of Vietnam’s households, Vietcombank wants to use their reach to improve the financial health of its customers. Their current mobile app is very well rated, but very basic in functionality. The features that they are offering focus primarily on spending and making payments. Vietcombank would like to provide their users with personalized features that allow them to manage their personal finances.

DESIGN STAGES

1. Empathize

Learn about the industry and users by conducting research and analysis.

2. Define

Synthesize the findings from research to define the problems with project goals, roadmaps and information architecture.

3. Ideate

Brainstorm and sketch ideas. Then we start to wireframe.

4. Prototype

Define the brand identity and build a usable prototype in high-fidelity mock-ups with Figma.

5. Testing

Conduct usability testing to get the key insights. Learning after testing so we can revise the design.

Problem Statement

 
1. How might we help customers having better online banking experience?

  • Improving the user experience and interface of the current app.
  • Delivering the functionality and content that customers match their needs through personalization and customization experiences.

2. How might we help customers manage their personal finance?

  • Letting customers track their expenses, set their own goals and budgets.
  • Suggesting customers the smart financial advice they may need.

1: Empathize

SECONDARY RESEARCH

For this stage, I started to gather the information from many resources on the internet to not only understand the users but also to know the competitors and what they're doing.

In 2020, while Covid-19 is causing severe impacts on the economy as a whole, the pandemic has also served as a driving factor for banks and fintech companies in Vietnam to digitalize their services and take on online payment.

One of the main reasons why Vietnamese people have to save is because there is no social security network. Savings rates are going up, even though interest rates are going down, sometimes to negative rates, so people are not saving money to earn interest. Instead, this is a sign that people are saving because they fear they will not have enough funds in the future.

Banks and financial intermediaries should take professional measures to provide their customers with training on financial awareness, monetary usage, and attitudes, safe and effective investment as well as to increase public access to banking and financial products in order to minimize black credit.

You can find the detailed research findings here ➝

COMPETITIVE ANALYSIS

I analyzed the information I found during market research about Vietcombank's direct and indirect competitors in Vietnam.

Competitive-Analysis-VCB

Takeaways

Most participants are aware of the importance of saving money though they don't have any detailed plan or just plan on their mind. 60% still choose bank to save their money in case of emergency even when the interest rate is lower than before. Most Vietnamese in the research don't want to take risk on their money. Therefore, helping customer manage their finance is a crucial part that the bank can offer.

The main reason that users complain about VCB is the fees that cost them a lot for every transaction and monthly service fees. VCB banking app is harder to use compared to other competitors. Users are satisfied with what the app offers but its UI needs to be more simple and readable for elder people.

2: Define

This stage is where I begin to create a persona and empathy map. This is a strong tool for me to understand what frustrates users, what sparks joy, and their thinking, feelings.

As shown in my research, the average monthly income of more than half of Vietnamese millennials is below 20 million Vietnam dong (~US$830). Even though their spending behavior could differ from each other, they are still aware of the importance of saving. Below is the persona and empathy map based on what I synthesized from the earlier stage.

 

PERSONA
6-Persona
EMPATHY MAP
7-Empathy-map
PROJECT GOALS
8-Project-Goals
INFORMATION ARCHITECTURE (IA)

This IA below is the journey for users to manage their finance on the Vietcombank app by managing expenses, incomes, and goals. Besides, users can also get smart advice from the app when they spend too much, when their savings are ineffective, or simply introduce users to promotional programs that they might find interesting.

10-IA

3 : Ideation

At this stage, I started to sketch the screens I'm going to design. Then I put all the ideas into mid-fidelity wireframes on Figma.

 

SKETCHES
Frame-375-sketches
MID-FIDELITY WIREFRAMES
Wireframes-fullset

4 : Prototype

UI KIT

The UI kit is about the logo, color palette, typography, icons, input fields, selection controls, and buttons.

13-Branding
VISUAL DESIGN
Prototype-screens

5 : Testing

This usability test was conducted in high fidelity desktop prototype via Maze with 4 participants doing the test. Participants, age from 24 to 30, already had experiences with Vietcombank and other banking apps.

Here is the link to my usability testing plan and findings ➝

GOALS
  • Participants can navigate effortlessly.
  • Participants can complete the tasks with no confusion.
  • Identify the errors participants make and how easily they can recover from them.
TASKS
  • Scenario 1: Participants are new to the new function of the app called My Finance.
    Participants are asked to navigate the app to see what they want to do when it comes to managing their finance.
  • Scenario 2: Participants wants to manage their finance.
    Participants are asked to manage expenses and budget.
PARTICIPANTS
11
KEY FINDINGS

9.8s

Average duration to complete the tasks

8.6

Ease of navigation

Avarage rating on the scale from 1 to 10.

9.2

How much participants want to use the feature

Average rating on the scale from 1 to 10.

SUCCESS
  • Participants find the app easy to use and they can navigate easily.
  • Participants think the app looks good overall.
  • The heatmap has shown that participants made a few misclicks when going through the app but overall they still can complete the tasks with no confusion.
OPPORTUNITIES
  • Allow user to set a limit-reached alert on new budget page to better their customization experience.
  • Finding other way to present the percent shown in categories (Expense, Income, Debt) because I could confuse users.
THOUGHTS ON THIS

I had some difficulty with testing online via Maze. Their heatmap is good for tracking where people actually pressed to determine if there's any existing hardship users might face while performing the tasks. But on the other hand, testing online means that I cannot observe the users well. The only data I had was just the duration of the task completion, heatmap analytic, rating, and answer from participants. But overall, none of the participants complained about the app. I got positive feedback from them.

However, when I got a question from my mentor about the reason I used % instead of the money amount in categories, I realized that my assumption was wrong, not everyone understands this part. Therefore, in my next revision, I need to find another way for this.

 

Next Step

After updating the prototype, another test will be conducted for further improvement of the product.