Hipay: Creating All-in-One Digital Wallet

Hipay: Creating All-in-One Digital Wallet

Product Design, UI/UX, Branding2020 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.

Running the 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 its capabilities in 3 steps with simple illustrations.

QUICK INTRO

EASY SIGN UP

Only request the necessary information, so the user can create the account faster without hassle.

EASY SIGN UP

GUIDED PASSWORD CREATION

To follow standards set by the Central Bank and PCI-DSS, we guided the user to create a secure password.

GUIDED PASSWORD CREATION

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.

STEP BY STEP

PERFECT HELPER

We prepared alignment tool, so our users can just align their ID and take a picture.

PERFECT HELPER

VERIFIED STATUS

Once the users are verified, we open up many new features and increase their limit.

VERIFIED STATUS

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.

ADD CARD EASILY

SCAN & PAY

Simple as scanning merchant’s Dynamic QR, it includes all the payment information.

SCAN & PAY

PAY ONE-CLICK

You will be asked to provide verification with Face ID, fingerprint, or PIN code.

PAY ONE-CLICK

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.

U MONEY RECHARGE

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.

HI-DAATGAL INSURANCE

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