project
project
date
toolkit
deliver
Mar - Dec 2021
Figma / Adobe XD
UI Design, Figma Prototype and Design System
Feesbee is an e-invoicing web app with a precise objective: to make e-invoicing a fun and accessible task. This is why the brand identity is designed on a visual style close to the world of gaming and technology in general. The task of the web app interface design, however, was to make the visual identity of the brand suitable and functional for a process as complex as creating an invoice. The interface design is kept as clean and essential as possible, taking up the main interaction patterns of digital tools without substantial innovation. It entrusts, however, the role of giving personality to the design to the colours and fonts, which have the task of communicating Feesbee's identity, avoiding generating confusion and doubts about the use of the web app. For this application, I designed some main screens to give a visual guide to the developers.
The web app was developed using a basic theme, so I designed some main pages of the app and produced a style guide to share with the developers. The realisation of the style guide was carried out together with the developers in order to verify for each aspect the correct technological feasibility of the front-end design. I tried to set a precise and functional typographical scale, I defined a graphic hierarchy of buttons by defining primary, secondary and tertiary settings, given the complexity of the web app's interactions. Another important aspect was the design of the forms and input systems, a primary element of the web app's interaction.
The aim of the project was to create a coordinated graphic system to be applied to the basic theme used for the development of the web app. In addition, specific advice on UI and UX design issues and aspects was required, as the initial development had been done in the lack of a UX/UI designer figure. For this reason, the core of the project was the realisation of the style guide in as precise and complete manner as possible, which could be easily consulted and used by the developers. This was followed by the realisation of some main screens such as the dashboard, the invoice list and the invoicing flow to give input to the developers on how to apply the style guide. Invoicing and bookkeeping is a complex process that requires the communication of a lot of information from the tool to the user, the critical issues of the project were therefore focused on the effective management of the levels of information to be communicated to the end user.