Redesigning Hipay Wallet
Product Design | Research | Design Systems
2020 Jun - 2020 Dec
Overview
Hipay is 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 brought me to pivot their existing MVP five months before launch. As the sole Product Designer, I collaborated closely with the CEO to bring his vision to life with user-centric approach.
Problem
In 2019, Hipay commissioned an agency for UI & UX design, focusing on fintech wallet app. However, the company pivoted massively and they were in need of creating super-app with time pressure.
Design sprint
During my first month, I led a 3-day Design Sprint with Hipay's core team, including the CEO, CTO, CPO, and other stakeholders.
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' behavour towards fintech products, and banking apps. Talking to actual customers helped me understand their pain point and how we can position our MVP.
The result revealed that third-party fintech apps have not been successfully integrated into users' daily lives with sole reason being that users don't trust fintech enough yet. Most users experienced unreliable transactions where they have to contact the fintech or their own bank providers. Other findings include:
85.7%
Interviewees use the banking app daily as they see it more reliable. But they complained about how slow banking apps are.
71.4%
Interviewees often install new fintech products, but only to redeem the marketing offering and uninstall the app afterwards.
21.6%
Interviewees 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 what we gathered through design sprint and focus group, starting with must-have functionalities. The home page was where everything was stored, from payment cards, wallet balances, loyalty, and mini apps. I needed to find a way to simplify the complexity of these multiple functions.
High fidelity design
After numerous iterations of sketches and ideation session with stakeholders,. I have started with high fidelity designs. I removed all the colors from presentation, so stakeholders will focus on the user experience rather than look and feel.
The onboarding flow was redesigned many times, as per regulations from Central Bank, while keeping the sign up process easy for the users.
Building the design system
As the app was built in React Native, we needed a font that works for Cyrillic and readable. Open Sans fitted the bill, only weakness it had was on numbers, where it was not easily readable. Which we had to choose more Monotype typeface, and that was Montserrat.
I built the design system with React Native in mind, so the developers can create the components and re-use it throughout their code base. Color tokens were created and provided with JSON format.
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. Main features include, secure payment cards storage, digital loyalty cards and receipt organization.
Onboarding flow
As mentioned above, onboarding flow required multiple iterations as per regulations from Central Bank.
As user-first startup, we wanted to ask for only Citizen ID and phone number when the user was signing up. And gradually increase user's permissions, and limit through multiple levels of KYC.
QUICK INTRO
Introducing Hipay and it's capabilities in 3 steps with simple illustrations.
EASY SIGN UP
Only request necessary informations, so user can create the account faster without hassle.
GUIDED PASSWORD CREATION
To follow standards set by Central Bank and PCI-DSS, we guided user to create secure password.
User verification flow
Once user signs up, they immediately get access to Hipay wallet with limited functionality. And when explore the app and find the services they need, we would to ask for a few more pieces of information.
Most of our users were bank customers, so they would get KYC verifications at bank branch with teller. At Hipay developer brand new digital verification flow, and guided our user through their first ever online KYC verification.
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.
Conclusion & learnings
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
Want to see more?
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!
