Vale Benefícios

The Vale Benefícios is a product offered by the managers of Fitcard, aimed at employees who use Food and Meal voucher benefits.

The challenge in this project was to completely redesign the old dashboard, which was used by users to access important information such as balance and transaction history.

The old version had some difficulties in searching for information and usability issues. The homepage only gathered information about the card and its balance, wasting a lot of available screen space, requiring an additional click in the navigation menu to consult all transactions. In addition, credit information was also available on a specific page.

Regarding accessibility, the use of small fonts made it difficult to quickly read the information, while in other cases, the exaggerated font size resulted in wasted space and forced the user to take more actions to obtain the desired information.

The first change to be implemented in this project was to gather the relevant information on the homepage. This way, as soon as the user logged into the system, they would have access to all important information without the need for additional clicks.

For this, it was necessary to think of an information architecture and content hierarchy that privileged the card balance, along with a daily balance, calculated through the number of business days in the month.

Just below, a list of transactions would be presented that would include both credits and debits, which would be clearly highlighted in the listing. Additionally, it was necessary to think of useful filters for the user, such as a filter by date.

Furthermore, another relevant piece of information that should be included in this new version would be the possibility to display transaction details so that, in case of problems, the user could consult the purchase information and thus contact the establishment.

After gathering all the information obtained during the discovery process and conducting the necessary wireframe validations, the following result was achieved:

It is worth noting that when clicking on a transaction in the list, a modal is opened with useful details about the transaction, including a map with the location of the establishment.

Dark mode

Also, a dark theme for the system was created, which is automatically selected based on the user's system settings.

The final result was widely approved by the product users, being recognized as one of the best design solutions ever implemented by the company until then. This allowed for the creation of new opportunities for the UI (User Interface) sector within Fitcard, which did not yet have many established Design processes.