top of page
hi fidel mock1.png

About

📱Project overview

This digital banking app strives to help customers better engage with the end-to-end credit or debit card experience, by strengthening the relationship with existing Gen X (to seamlessly allow better access), while reaching new younger Gen Y (the early adopters).

💪 My Role

UX designer designing an app for this reservation app from conception to delivery

👩🏻‍💻 Responsibilities

🤔 Problem

Most users commented that the online banking app they currently use is too difficult to navigate.

🎯 Goals

Design an app that allows users to easily scan and make a payment.

Conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

🛠️ Tools

Figma, Adobe Photoshop

⏰  Timeframe

January 2022

Process Overview

Given the time limit of the project, I followed the double diamond design process and accelerated through phases including understanding the problem, diverging on the solution, decision making, prototype and testing, and delivery the results.

Screen Shot 2565-02-14 at 11.05.26 AM.png

User research: summary

To quickly understand user insights and find out exactly what they need, I conducted an online survey on SurveyMonkey to collect the answers the data. I posted the survey in Line groups asking for feedback. I asked about age, frequency, functionality, as well as concerns and frustrations when using online banking.

User research: pain points & key findings

3 main user pain points I conducted from my interview were:

Screen Shot 2565-02-15 at 11.51.00 AM.png

NAVIGATION

The majority of users commented that the online banking app they use is too difficult to navigate

Screen Shot 2565-02-15 at 11.51.02 AM.png

WORKFLOW

Half of the users mentioned the complicated workflows of the online banking app

Screen Shot 2565-02-15 at 11.51.07 AM.png

UI

A couple of users agreed that the UI of the digital banking app they use is outdated

- 35 % Millennials, 30 % Gen Xs

- 70 % use online banking to transfer money most often

- 10 % use online banking to check balance, monitor spending, and sending money

- 60 % dissatisfied with navigation

- 50 % mentioned concerns about outdated UI

Screen Shot 2565-02-14 at 11.11.09 AM.png

User personas

I then synthesized my research findings into two user personas, which I created to make sure it focuses on the right user and specified their needs and goals.

AVATARZ 1.png

Paul

Retired

Paul is a dad living in Bangkok. He spends most of the time at home or with his friends. He sometimes encounter difficulties navigating his mobile banking app to send money to his family.

AVATARZ 4.png

Alina

full-time worker

Alina works full time at a company near her house. She spends most of her free time transferring money from online shopping, and finds herself constantly thinking how outdated the UI of her banking app is.

Information architecture/Sitemap

I built the information architecture of this online banking system to organize the content in a clear and understandable way, so that users could easily find everything they need without much effort. I planned on keeping the website layout quite similar to the phone application for continuation and consistency, however, some of the layouts will have to be adjusted due to different screen types.

Screen Shot 2565-02-15 at 12.28.40 PM.png

Paper Wireframes

I used a design sprint method known as the crazy 8's. I chose to do this because it is a fast sketching exercise, sketching 8 distinct ideas in 8 minutes, that challenged me to generate a wide variety of solutions upon my research. This sped up the process and I was able to refine my ultimate choice much more quickly. The stars indicate the elements of each sketch to be included in the initial digital wireframes.

Screen Shot 2565-01-21 at 9.15.15 PM.png

Mobile application

Screen Shot 2565-02-15 at 12.35.54 PM.png

Website

Digital Wireframes

As the initial design phase continued, I made sure to take account the paint points discovered following user research. I attempted to make the design of the app as simple and straight-forward as possible. I plan on using a lot of instantly recognizable icons such that symbolizes each action so that users can sort through quickly according to their needs. These symbols are temporarily replaced with the grey boxes during this stage of the digital wireframe. 

Screen Shot 2565-02-15 at 12.48.45 PM.png

Quick, smooth and easy navigation was a key user need to address in the designs.

Screen Shot 2565-02-15 at 12.50.27 PM.png

Low-fidelity prototype

The low-fidelity prototype connected the primary user flow of sending money (mobile)/logging in (website) so the prototype could be used in a usability study with users

Screen Shot 2565-02-15 at 1.05.10 PM.png

Mobile application

Screen Shot 2565-01-23 at 1.38.04 PM.png

Website

Usability study: parameters

Screen Shot 2565-02-20 at 1.23.39 PM.png

Study type

Unmoderated usability study

Participants

10 participants

Location

Thailand; Remote

Length

10 - 15 minutes

Usability study: findings

To quickly get feedback, I conducted another round of usability study. The study used a high-fidelity prototype to help guide and revealed what aspects of the mockups needed refining.

Findings:

Screen Shot 2565-02-20 at 1.31.41 PM.png

Users wanted to be able to scan for payment easily

Users wanted to be able to track their weekly, monthly, and yearly expenses

Users wanted a function to see their upcoming payments

Homepage

On the left is a competitor, KPlus, a digital banking app that is most used for the users in my first survey. The comments I got for the homepage is that there were many unused functions, both at the top and bottom. The middle section also lacked visual hierarchy to distinguish the importance of different functions. The right hand side is the homepage that I designed, with the scan QR being in the middle of the tab bar at the bottom as it is one of the most used activity and needs from the users. 

Screen Shot 2565-02-20 at 2.30.36 PM.png

User ability testing

One task I conducted for the user ability testing was that one user wanted to transfer money to a friend. Here, they are able to do so from the homepage by touching the transfer button in the center, which will be directed to the transfer page where they are able to either search for the name or find the person from their "my favorites". Then, users are able to swipe through which card they'd like to transfer the money to, as well as the amount and notes for easy sorting later on if needed. When the user is done filling out the information, all they have to do is click the primary action "send money" at the bottom of the screen, and then they've successfully transferred the money. The process here only takes up 3 screens and 3 main actions.

Screen Shot 2565-02-20 at 2.39.58 PM.png

Hi fidelity prototype

This is the finalized version of the mobile app in 7 screens, showing all of the different pages including home, banking, scan QR, activity, and more. The solution for the interface is based on feedback I received from the user research and usability study. I made sure to prioritize findings and insights from my usability study to ensure optimized solution. 

Screen Shot 2565-02-20 at 3.32.51 PM.png

Mobile application

This is the finalized version of the website in 3 screens, that connected the primary user flow of opening the website to the landing page and signing into their account. The main differences between the desktop and the mobile version is that I was able to add in additional features because of the larger space I had to work with. Statistics analysis can be easily accessed. Diagrams break down the transactions into different categories, so users can se where their money goes. 

Screen Shot 2565-02-20 at 3.34.27 PM.png

Website

Design guide

Screen Shot 2565-02-20 at 4.00.07 PM.png

Typography

Main navigation

Card

Quick Actions

Buttons

Icons

Color Palette

Navigation

Actionable Icons

Logo

Accessibility/Design Considerations

Screen Shot 2565-02-20 at 1.31.41 PM.png

Use of icons help users recognize content faster

High color contrast colors for people with vision impairment

Clear labels for interactive elements that can be read by screen readers

Next steps

Screen Shot 2565-02-20 at 1.31.41 PM.png

Due to the time constraints, I wasn't able to conduct structural isability testing with a lot of people. I would like to conduct another round of usability studies to validate whether the pain points user experienced have been effectively addressed

Conduct research on how successful the app is in reaching the goal (to transfer money) to determine new areas of improvement, and listen to feedback to improve accordingly

I would consider more accessibility for the next project since it is a very important app that is used by many people

web mock.png
Screen Shot 2565-02-20 at 8.47.22 PM.png
bottom of page