Client to invoice

Product Design


This little project was created out of my curiosity about use cases in a mobile app about banking and fintech. Initially, I was challenged by a fintech company to make a small showcase, but later I improved it in order to obtain an MVP.


Design a journey that allows App users to create a client to send an invoice to.
(The problem statement process should be reviewed and adapt during the discovery phase)

Problem Statement

In order to define the problem we asked 4Ws questions, to reach the point of the problem to then arrive at the solution.

App user and Client

Create a client profile.
Be able to send invoices to clients.

Mobile app and in the future an external place to receive the invoice.

The App user has their clients organised in the app and can better manage their invoices.
Save App user time with tax processes.

Following the research we clearly realised what is the main focus of the objective:

How the app user creates a client profile to then send invoices.


After realising the statement, we proceed to benchmarking, to understand the features that the competition practices in order to make our journey stand out and get the metrics already established in the market.

This company separates clients and invoices into labels. The functionality is clear and user-friendly, in the sense that you create a client with his data and add it to the database to then associate to invoices.

Some of the key functionalities:

  • Client portal for invoices;
  • Late Payment Reminders;
  • Recurring Invoices;
  • Tax Preparation.

Some of the key functionalities:

  • Possibility to customise invoice;
  • Invoice share options via email, text or social media;
  • Status tracking and reminders for invoices.

Some of the key functionalities:

  • Possibility to customise invoice;
  • Receive payments with QR code;
  • Payment links.


With the objective clear and the market comparison made, we then realise what the construction of this journey could be. We defined a section for clients and to create new ones.

For that we created use cases in order to build the user flow.

This gives rise to use cases for both the app user and their client.

Main section
– Be able to create a client profile with their fiscal data;
– Be able to search for added clients;

Use cases for invoices
– Be able to automatically send invoices to the client;
– To give a clear and quickly accessible format to the client for the invoice sent by email (pdf);

Future use case:
– In the email sent to the client with his invoice, have a link with access to a portal where he can see the past, current and pending invoices.

usability test

We ran an interaction test on Maze* with a prototype of the wireframes, and these were some of the responses we got regarding the first screen:
  • I didn’t understand why the “send” button was in the same hierarchy as the “clients” button. I feel there should be a logical separation between the two.
  • The whole interaction was simple to understand, but I’d like to see an idea on the home screen of what the invoice labels would look like according to the customer’s profile.

(*Maze is an platform where you can create user testing projects to get user insights and prototype reactions.)

Improvements regarding the usability test responses:

Low fidelity journey screens

After gathering the necessary information and realising which path we wanted to take, we moved on to building the wireframe. At this stage we realised the most usual and logical way to create this functionality.

High fidelity journey screens

Taking into account the low-fidelity construction and the interactions discussed, the final design was created. The UI rules were applied, such as an 8px scale grid, a 60% / 30% / 10% colour scheme, fonts suitable for mobile and figma construction using auto-layout.


Final considerations

This project was challenging, I was able to understand that an app like this can cover several products and services in a single space, which requires understanding the best way to be user-centred and the most effective way to create interactions.

On a personal level, it was interesting to build a project in this sector, because as I explained at the beginning, I was curious to be able to realise product design with this type of service, which is so in demand today.

Check other projects