Email: office@yourdomain.com
Phone:: +44 20 7240 9319
back to top

For many SME owners, moving money across borders is a chore fraught with many frictions. Manual paperwork, high fees and unfavorable exchange rates, just to name a few. The client’s mission is to provide better cross-border payments for smaller players who aren’t adequately serviced by large banks.

The client a Singapore-based financial technology startup. Invested by prominent regional VCs, they are building an innovative blockchain-enabled platform to settle cross-border payments that could scale massively for small businesses. 
I was hired to design their first mobile wallet app. With a very tight timeline to launch the app for a test market, I worked closely with the founders and engineering team to roll out an MVP in just 1 month.
Starting with conceptualizing the app vision with the team, I went on to architect the app flow and wireframe the solution. My role ended at key screen high fidelity UI design that went on to become a live app on Appstore. Read the full story below. 
CLIENT: FinTech startup (confidential)
MY ROLE: User Experience Design App Flow Architecture Wireframing Prototyping Interaction Design App Interface Design
TIMELINE: 4 Weeks

Stage 1–Define the Solution

Product Requirement Document (PRD)

The client team has been working with customers on the ground for some time and know their MVP must-have features very well. However there is no clear vision for why this app needs to exist, and how would it work.


I took the initiative to develop a Product Requirement Document with the team and invited everyone to input including founders, developers, and finance admin. We also did a fun exercise to have everyone on the team to email me privately what they think Koku stands for. The result is a PRD that brings the team together and clarifies what we are building. 

Feature Prioritization 

Another challenge we have is to prioritize features for this MVP. As with most founders, it is very typical to want to have all the nice and fancy features at the start. However, it takes away the focus of what problem this app will solve.

 

I developed this MoSCoW framework to align with the team on what’s most important to build.    At its core, Koku app is offering competitive exchange rates for smooth and easy transfers. Some features like QR code scan will look fancy but is not essential and is expensive to build.  

Use Case Diagram

Because the client team is not just building a consumer app but a multi-player platform where liquidity providers, merchants, and payees come together to exchange currencies, it is essential to map out the ecosystem and how each player interact with each other. 

Journey Mapping With User Story

Moving on to user flow, I started with writing out the user journey. This user story details each moment of target user Melissa based on a real Koku customer as she goes about her day.    The user story really works for us because it helps determine what goes on each screen so it acts as a UI requirement doc. After a few back-and-forth with the team, we nailed down the details of each step of the journey down to the naming of labels. 

Stage 2–Wireframing the Solution

Stage 1 prepared us with the necessary context and data to start conceptualizing the visual solution. From user flow diagram to key screen wireframes, I worked with the team to progressively add more fidelity to the design prototype.

User Flow Diagram

A few of the core flows users can take within the app include: top up, transfer, convert and withdraw. To make the process as simple and intuitive as possible, we had rounds of discussion with the team on how to minimize input and frictions for the user.    In the end we had this user flow that is the shortest, most efficient flow for both the user and app backend without losing details. 

Key screen wireframes

The user flow diagram gives us a conceptual model of the system but not enough content. Prototyping with real content is key to UX success. Using Balsamiq, I wireframed all key screens required for the 4 critical actions, as well as form input and screen states.

Stage 3–Develop the Visual Identity 

With detailed wireframes from Stage 2, I only needed to create a few key UI designs in high fidelity for the development team to start implementing.

To make sure that color and typographical hierarchy work together to communicate clearly, I started designing in greyscale. Once I have achieved satisfactory visual hierarchy with a monochromatic color scheme, I started applying colors.

From greyscale to color without losing clear visual hierarchy

The app is now live on the Appstore. It’s currently only available to use for enterprise users to test it out. Due to NDA agreement with my client, I cannot publish the app name in this case study.

Learnings

A few things that I learned in the process has to do with building an MVP and simplifying complex financial information. My learnings can be summed up as follows:

  • Never stop asking why” and why not” to yourself and the team. Each design element or feature request needs to exist for a reason. 
  • Prioritize. Everyone’s time is limited resources including the founders, designer, and developers. Especially the user’s time. Nothing should waste their time on solving puzzles that matter very little. Focus on what matters the most. 
  • Communicate early and often with dev team. Handing over a few screens is not enough. The UxD designer’s job is to clearly define and communicate solutions for each screen state. Nothing should be left to chance. 
  • Accept changes and imperfections while keep improving. 

Design is never done, and we will always be improving. The important thing is to always remember the big picture, and adapt to the situation when necessary.

Next Case Study

The music sharing space is broken. Next up you will be introduced to how research and ideation techniques can create an elegant design solution to make music sharing relevant and personal again.