Scroll
DATE —
Sept_2018
ROLE —
UX Designer
KIND —
SaaS Dashboard

Overview

01

Social security calculations, especially in Brazil, are extremely complex and can take a few days, due to the hundreds of rules and the specific situations of each case, so lawyers usually need the help of a professional accountant in the area to perform these calculations.

Cálculo Jurídico is an online tool that allows the lawyer himself to be able to perform social security calculations without the need to hire a third party.

The first version of the system was developed using Bootstrap as support for the UI. It worked well for a while,however as the tool evolved and new features were added, the usability got more complex, so the user started to have a hard time trying to complete some tasks within the platform. This situation brought up the need for an UX approach, and the creation of a custom UI.

The process

02

I was responsible for conducting the redesign process, and as a first step, we have tracked all possible paths within the system, discovered the journeys to perform a given task, and then suggested improvements. With a wide variety of combinations for each calculation, it was not clear how each parameter affected the following screens or the final results, which was on a separate screen. As an improvement, we decided to anticipate some information and create real-time feedbacks, to avoid the need to go back and forth between screens to test a new parameter.

Cálculo Jurídico Fluxogram
[fluxogram]

Some of the structural changes were the transposition of the main menu (1) and the calculations menu (2). The main menu at the header, besides being unusual, didn't allow the addition of more items. The internal calculations menu, on the other hand, didn't seem very connected with the content, in addition to having sub-items that repeated themselves and confused the users, which were later incorporated into the calculation screens.

Cálculo Jurídico dashboard
[old]
[new]

In terms of content, due to the complexity of the tasks, it was common to see multiple questions at the same time. To make it simpler, we have decided to bring only one question at a time in the most crucial tasks, as in the calculation wizard.

Cálculo Jurídico dashboard
[old]
[new]

Design System

As it was a temporary job, my strategy was to develop a simple component library, so the development team could implement new features in the future with greater consistency.

Cálculo Jurídico Design System

Outcome

03
Cálculo Jurídico dashboard
New menu structure.
New calculation header with quick access to customer information.
Quick access to initial calculation settings.
Toggles between 2 display modes, table or chart.
The results are now on the same screen as the settings with real-time feedback highlighting any changes.
Call to action for the next calculation step.
Cálculo Jurídico dashboard

Microinteractions

One of the problems was that, due to the complexity of performing the calculation in the manual method, new users were suspicious about the veracity of the calculation, since the system presented the result instantly. To tackle that we have chosen to create animations during the calculations, telling that the computer was processing and would soon present the data.

Cálculo Jurídico SaaS Mobile
All screens were fully developed for both desktop and mobile access.
Calculation Wizard
Cálculo Jurídico dashboard - Calculation Wizard
New calculation onboarding. Now using cards, it presents a brief introduction related to the type of calculation to be done.
Empty List
Cálculo Jurídico dashboard - Empty List
Each screen now has an empty space with instructions for the section task.
Office
Cálculo Jurídico dashboard - Office
Empty Space
Cálculo Jurídico dashboard - Empty Space
Each screen now has an empty space with instructions for the section task.
Client page
Cálculo Jurídico dashboard - Client page
Calculation history, comments, and attachment of documents related to the client's case.
Scroll