Payhub is a financial app that gives an overview of the incomes from our products and gives detailed cash flow statements. We built a new product from scratch, end-to-end design process, 1.5 months long

Compared to our web platform, inside the new app users requires less time to perform different use cases, -25% for secondary scenarios and -270% for the main one (log in ➝ view transactions)

The interface of the existing web platform is unfriendly to the user. There was no way to quickly access key financial metrics of products within the company. Transaction data is fragmented and cannot be obtained without generating an accurate query to the database. No way to access the platform from the phone

PROBLEM

Initial interface. Web-platform

To understand the task, I gathered via interviews all the available information. The Mind mapping technique helped me to cluster insights into specific to figure out what we need to focus on

Insights and references formalized into a Mind map

Payhub CJM

DISCOVERY

I had wrote down several hypotheses of product usage (jobs) and we conducted 5 user interviews in order to validate our ideas. We realized that there are several key roles, but for efficiency it is worth building an MVP based on one role. We decided to prioritize work on one type of user:
"The owner"

Jobs To Be Done. The owner role

INTERVIEWS & JTBD

Based upon data from in-person interviews and user reviews, I organized my observations and categorized them using cutomer journey map. This helped me expose pain points and areas for improvement in the future app along the entire user journey. It also helped spark discussions to help close knowledge gaps and acted as a catalyst for idea sharing and generation between team and stakeholders

CUSTOMER JOURNEY
MAPPING

IDEATION

We decided to make a mobile application. This way, access to the information you need is always at hand.

Together with the team, we discussed what information are we going to show and what features are going to be our "Low hanging fruits". Considering the context of using the phone, I tried to combine the information in a way that would look more natural and provide a gradual data disclosure

WIREFRAMES

I sketched countless ideas and brainstormed various possibilities with my product team and created low-fidelity wireframes and prototypes to test. The outcome was a new user flow with gradual data disclosure

High-Fidelity Prototype

Sketches. MoSCoW Prioritization. Information Architecture

Sketches. Information Architecture

USABILITY
TESTING & V1.0

ITERATIVE APPROACH

RESULTS

I had built a Figma prototype and tested it with few users to validate the main hypotheses before moving to visual design and development. We asked our users to complete certain tasks with the prototype and then measured the # of tasks completed successfully. Based on the usability tests, we made some text improvements to make it more clear and grouped the information inside the tables in a slightly different way, all in order to improve user experience. As a result, we moved to the visual design and v1.0 of our app

Some new input data and a few more additional improvments led to a slighty updated information architecture and visual design. This kind of iterative approach, together with more usability testing, helps improving the feature on the go, find out fresh insights, and continue experimentations being data-informed

3 main screen of our app