Problem Statement:

Financial freedom can be difficult to attain without access to financial education. Providing knowledge and resources can help users improve their financial well-being.

Our goal is to create a platform that makes it easy for users to learn about finance, put their knowledge into practice, and access financial tools and services all in one place.

Project Overview:

The project is spearheaded by ThitsaWorks & DSIK as a part of their financial inclusion initiative. The goal is to help financially underserved populations, with financial knowledge and access to financial products.

ThitsaWorks Pte. Ltd. is a Singapore-registered FinTech Company, as a real-time payment and credit intelligence solution provider for financial inclusion.

The German Sparkassenstiftung aims to enhance the professional capacity of its partner institutions, empowering them to offer their customers permanent access to financial services. In particular, small and medium-sized enterprises (SME), but also poor population strata and social fringe groups.

Role & Responsibility:

As the lead product designer for this project, I collaborate closely with the product owner to establish the product direction, make product decisions, conduct workshops and create the design system.

βœ… Summary of what I’ve learned

  • Developing the product narrative and vision to ensure that all stakeholders understand the product's objectives

  • Employ and collaborate with entry-level designers

  • Coordinate with various stakeholders from different organizations

Challenges:

  • Thitsaworks has a Facebook page called β€œPite Pite” to share financial knowledge, but customers cannot apply the financial knowledge they learn to build good habits

  • They also work with microfinance providers to generate leads but they don’t have a proper pre-qualification process

  • It is hard to successfully bring an app to market, but doing it in the middle of a military coup is challenging with all the electrics and internet blackouts

Discover Phase

The main stakeholders for me to manage are, Thitsaworks, DSIK, and the development team. The main point of contact is Zun from Thitsaworks, who is the linchpin that holds everything together.

The initial brief is pretty vague, build a budget planner application with these features:

  • Saving goal

  • Budget planner

  • Digital financial literacy

To bring everyone on the same page I decide to run Lighting Decision Jam so that everyone's voice is heard and have a common understanding of the product goal.

We also run multiple workshops during the product design process with different stakeholders to refine the product direction.

Design Process:

This is my 1st time as an independent product designer, to help bring a product from concept to the market. I have 2 streams of the design process to consider, product design & branding. I had help from Kyle, who mentored me in the planning stage.

To make the client understand the design process, the tasks are divided as follows:

Product Design

  • Defining the Product & Users

  • Journey Mapping

  • Wireframe

  • Key Screen Flows

  • UI Screens

  • Design Library

Branding

  • Brand Strategy

  • Mood-board

  • Initial Visual Direction

  • Logo Design

  • Brand Guideline

  • Brand Collaterals

In this case study, I will only focus on the Product Design side of the project.

Quantitative & Qualitative Research:

For Quantitative research ThitsaWorks’ other product, Pite Pite has the audiences we want to serve and we collect surveys from them.

From that list, we run in-depth interviews to understand possible use cases.

  • We try to find out what is their goals and tools they will need to achieve them

  • We focus on how they learn financial knowledge and the tools they use to track their day-to-day finance

Competitive Analysis:

To get a solid understanding of how our competitors are doing in the market, we conduct a competitor analysis which consisted of direct and indirect competitors in both international & local markets.

Defination Phase

We create user personas and journey maps to make our research findings easier to understand for our stakeholders.

Ideation Phase

We create actions and features needed to prioritize them according to their importance and usefulness. We also design the information architecture to align design decisions with user behavior.

Design Phase

These are the design steps we took for our UI design process:

  1. Paper Sketches

  2. Low-fidelity wireframes with variations

  3. High-fidelity Design

Paper Sketches:

I hosted sketch sessions with our PM and stakeholders to understand their thinking processes and also take ownership of the design process.

Low-fidelity wireframes:

From these sketches, I synthesize them into low-fidelity wireframes. We decided to use the material design library, to optimize our design for developer hand-offs. After we finalize our wireframes, I started working on branding and visual design, while the developers started laying the app foundation to meet our deadline.

Onboarding flow

Coach flow

Final Design:

After I finish with the branding and visual design. I come back with pixel-perfect UIs for the developers. Using the material design library creates less friction between designers and developers. I have experienced a product that went into a development limbo because the developers have troubled design into finishing products, so using a design library is the right call. This also reduced the need to use custom components and gave extra attention to them we need it.

Expense Tracker Flow

21 days challenge

Mascot Design

Custom Icons

The Result:

Re21 launched in the last week of January 2022, in 6 months :

  • 9K users and used in more than 10 countries

  • 97% of responders think Re21 is for long-termed usage.

  • We also created Re21 coach, a companion app for MFIs to assist users to apply for microfinance loans

Post Launch:

Following the product launch, I remain involved in the project on a retainer basis. I assist the team in organizing product documentation so that our ideas can be easily understood and continued by future team members. I use quantitative and qualitative research, as well as customer feedback, to continuously improve the product's performance and user experience.

Product Wiki

Product Wiki

β€œIn addition to his UI/UX and project management skills, Mike is excellent in oral and written communications. Mike not only developed the visual elements, but he has also drafted brand guidelines, reports, and project documentation and conducted presentations for various organizations' senior representatives.

Mike is a reliable and productive team member who can deliver good results efficiently and works well under tight deadlines. Mike has outstandingly cooperated with team members and partners in all the projects.”

Nyi Nyein Aye - CEO & Managing Director

Designers who supported me: