manage all cards and expenses in one app

Project Intro – The Who

Transferwise is a privately owned financial company. The company offers card and expense management services to clients in Nigeria.

Project Details – The Why

The client “Transferwise” employed us to research into their users and design a card and expense management dashboard that helps their customers operate their banking needs from a secure and useful dashboard. The deliverables were: Competitive analysis, user flows, user stories, mood board, low and high fidelity wireframes. 


 The major constraint was a very short timeframe.

My Role

I worked alongside Researcher, Prototyper, Content strategist. I was tasked with the obligation to work with the researcher and also work on the dashboard screen.

Objectives – The What

The goal was to create a card and expense management dashboard that allows customers to perform their banking needs right in their browser either on a mobile phone or a computer.

Solution – The Process

The first step of action during the project was to carry out a competitive analysis of products that are already in the market serving some of the users. There is a saying, “Keep your friends close and your enemies closer”. As far as digital products are concerned, this pretty much hit the nail on the head.

Competitor Research
Competitor Analysis

After we researched the competitors and categorized our findings into strengths and weaknesses, we moved on to conducting user interviews using surveys. 

User Interview

The survey helped us in creating comprehensive user personas for our product. Understanding the goals and needs by empathizing with our users we defined the type of design that is suitable to their needs.

User Persona 1
User Persona 2

To better streamline how our solution caters to the user’s goals and needs, we created user stories and user flows, which serve as a direction to prioritizing what needs to be in the product MVP.

User Flow
The App

The use of rough sketching during brainstorming and the user flows created, help me get the ideas for the dashboard on paper. Even though some of the early design ideas from the Low and Mid-level wireframes changed due to some failures we ran into during the first user testing.

Sketching 1
Sketching 2
Design Execution

After implementing all the insight we gathered from the research process, I moved on to creating the dashboard screens with the style guide that was created by one of my team members.
Overview of the dashboard is the first thing a user sees on landing on the dashboard after completing the onboarding process. Let me break the flow down one-by-one:

  1. Profile- This is the first part of the screen located at the top bar of the dashboard for easy access.
  2. Side Menu- The top bar and the side menu was separated to avoid clusters.
  3. Card-based UI- The overall design of the dashboard was based on a card-based UI from the material design. It allows users to be able to scan through the dashboard easily.
First Solution
First Solution 2
Final Solution Designs
Final Solution Screen 1
Final Solution Screen 2
Final Solution Screen 3
Final Solution Screen 4

Learnings and Key Findings – The Discovery

Due to the little time available to create a comprehensive style guide, our first solution for the dashboard failed during the user testing, which forced us to go back to the whiteboard and re-design according to the feedback we got.
One of the many reasons why the dashboard wasn’t a success was that the style guide wasn’t comprehensive enough. Well they say, “with every disappointment comes to a blessing”, the dashboard failure made us come together as a team and we were able to create a better solution for the dashboard.

Thanks for reading.