Redesigning Hipay Wallet
Product Design | Research | Design Systems
2020 Jun - 2020 Dec
Overview
HiPay, a startup offering all-in-one financial solutions for Ulaanbaatar citizens, and played a pivotal role in Mongolia's digital transition during the COVID pandemic.
In June 2020, the team sought my expertise to redesign their MVP just months prior to launch. As the sole Product Designer, I collaborated closely with the CEO to realize his vision using a user-centric approach.
Problem
In early 2020, Hipay commissioned an agency for UI & UX design, focusing on a wallet app with transactions and transfers. However, as the company underwent significant changes and shifted direction, they required a new design centered around being Super-App as the core function.
Design Sprint & Research
I led a 3-day Design Sprint with Hipay's core team, including the CEO, CTO, CPO, and others.
Monday: We discussed the what, how, and why. Later in the day, we set goals for 2020-2022.
Tuesday: We defined the brand voice, app feel, message tones, target audience, and established three personas.
Wednesday: We analyzed competitors' weaknesses, brainstormed solutions, and prioritized Hipay app features, refining existing ideas and introducing new ones.
USer interviews
I conducted a focus group to learn about our potential users' approach to payment apps, fintech products, and banking apps. Talking to real people helped me understand what causes the most problems while they are using payment apps on their phones and what could be improved.
The result revealed that third-party fintech apps have not been successfully integrated into users' daily lives, because how payment process feels unreliable. When it doesn't work, users have to call bank & fintech company to solve the issue, making it hassle.
Interviewees who use the banking app daily as it's more reliable. But they complain about how slow banking apps are in general.
71.4%
Interviewees who tried new fintech products, but never continue using them because it was hard to understand and wasn't reliable.
21.6%
Interviewees that use fintech products in their daily life and they say the fintech experience is faster when it comes to taking loans and transferring money.
IDEATION & WIREFRAMING
I sketched initial wireframes from the Sprint Data, starting with must-have functionalities. The home page was where everything was stored, from payment cards, wallet balances, loyalty, and mini apps. It needed to be organized and connected to their services frictionlessly.
High Fidelity Design
After understanding how the payment process works, I went on to create high-fidelity wireframes. These were shown to the team early on and the colorless, simple design helped them to focus their feedback on the user journey.
The onboarding flow was disputed and changed many times, as we needed to follow regulations from Central Bank, but also tried to make signup easy for the end users. We introduced multi-step onboarding with only validating Citizenship ID in the first step.
Building the design system
As the app was built in React, I needed to select a font that works flawlessly on both Android and iPhone. Every text in the Hipay App is written in Open Sans, for simplicity and readability.
As it's a financial app, I needed to also make sure the Numbers, Amounts are easily readable and distinguishable. I found that Open Sans was not standing out enough, so settled on Montserrat for all the number related texts.
INTRODUCING HIPAY APP
Hipay Wallet is an all-in-one financial application for busy citizens. The goal of the app was to replace your physical wallet with the digital one.
The app has built-in features to add payment cards, get digital loyalty cards and handle receipts.
ONBOARDING FLOW
The onboarding flow was hard to design, as I had to follow regulations from Central Bank to fight money laundering.
After careful consideration, Hipay Team decided to only ask for Citizen ID and phone number when the user was signing up. This was enough to prove this user was real and can start using the app with limited services.
QUICK INTRO
Introducing Hipay and it's capabilities in 3 simple steps and beautiful illustrations.
EASY SIGN UP
Only asking for necessary information and getting the user through the door faster.
GUIDED PASSWORD CREATION
We guide our users to make strong password, so they can keep their wallet safe and secure.
VERIFYING the USERS FLOW
After the user signs up, they can use Hipay Wallet with limited services. And when they are ready to experience it whole, we needed to ask for a few more pieces of information.
Our users were used to going to the bank, handing out their ID cards, and getting them verified in-person. Most of them haven't tried online-only digital verification, so we had to make sure it's easy as possible.
STEP BY STEP
Most of our users never tried mobile verification before, we had to make it easy as possible.
PERFECT HELPER
We prepared alignment tool, so our users can just align their ID and take a picture.
VERIFIED STATUS
Once the users are verified, we open up many new features and increase their limit.
PAYMENT FLOW
I designed a flow to add a payment card, also which was heavily regulated by PSI DCC standards and Central Bank. Mongolians are used to using two or more banks, so I had to design card styles and differentiate them from each other.
ADD CARD EASILY
Add your card once and use it forever. It is safe and secure in your wallet.
SCAN & PAY
Simple as scanning merchant’s Dynamic QR, it includes all the payment information.
PAY ONE-CLICK
You will be asked to provide verification with Face ID, fingerprint, or PIN code.
MINI APPS
Hipay Wallet is a super app, featuring a variety of financial services, including U Money Bus Card top-up, Hi-Daatgal insurance, and more. The Mini Apps that were built by Hipay all had similar design language and process, so user use them with ease.
U MONEY RECHARGE
First every mobile NFC payment flow. User can recharge their bus card with their connected payment cards.
HI-DAATGAL INSURANCE
Making insurance easy is a challenge. I developed a flow for car insurance, driver's insurance, and real state insurance with each having special differences.
OUTCOME
Conclusion & Personal Thoughts
Hi-Pay Wallet App launched in Nov 2nd, 2020 and it was successful. In a first week, it debuted #1 on both App Store and Play Store.
Currently, Hi-Pay has exceeded 200’000 users and it became essential part of Ulaanbaatar Citizen’s daily file.
I have left the company Sep, 2021 to pursue freelancing, it was an amazing experience working on such a huge scale application.
200K+
Signed Up Users
200+
Merchants
#1 Debut
Both Apple Store & Play Store
More Projects?
I am currently working on bringing more case studies, but in the meantime, you can check out the U Money case study, Centered Project, or my Dribbble!
