プロジェクトを知る
In a Nutshell
Cresol is a famous Credit Cooperative with branches all over the South region of Brazil.
This project consisted in the reformulation of charts, graphs and tables of a restrict website (available only for employees).
The site was divided into two spaces, the first was the elements of the interface itself. That is to say, menus and tabs that were out of my scope. The second, were elements provided by a third-party software, the ones I reformulated.
Due to contract, I'm not be allowed to share confidential information, project images or other documents.
The project
I started by rearranging elements so that they would respect the Western “Z pattern” of reading. Since birth, we learn to read from left to right and from top to bottom, forming a sort of “Z” shape.
Z pattern UI elements.
The second step was to give more weight to elements according to their categories. Titles and buttons were re-scaled so they would fit the hierarchy. Texts and tables, for example, lost a little bit of opacity so they would seem secondary to titles.
Weight of different UI elements.
After that, I managed to reformulate the division between charts. Before, all charts were placed in a general blank space. In order for the page to seem less like a printable document and to convey the idea of a dashboard for the user, I introduced cards and shadows.
Cards that divide different charts.
The charts
To reformulate the colors of the charts, I had to take into consideration some factors :
-
Cresol’s Branding;
-
The colors of the site;
-
Which colors the users used to have contact with when with the previous version of the charts;
-
Basic Color Theory: the sentiments which color could bring the user to feel: in contrast to green, red would always be subconsciously interpreted as bad, for instance.
To recreate shapes and avoid the commonly used pizza and donut charts, I conducted research through sites such as Viz Gallery and The Data Visualization Catalogue. See one of the charts that was recreated:
Recreated chart.
Nielsen’s Heuristics
Last, for the navigation to become more fluid and user centered, I conducted and Heuristic Evaluation which resulted in the adoption of a few missed elements:
-
A return button in the top of the title, so the user could easily be redirected to the page he was before (in consonance with the 3rd Nielsen Heuristic “User Control and Freedom”):
Return button above the title.
-
A breadcrumb substituting the return button in pages that had more than two instances of hierarchy, so the user is always aware of where he is in the system (in consonance with the 1st Nielsen Heuristic “Visibility of System Status”):
Breadcrumb up above the title.
-
Lines to divide charts positioned next to another that actually didn't concern the same subject or statistic, so the user wouldn’t be misguided to understand them as a unique block of information (in consonance with the 6th Nielsen Heuristic “recognition rather than recall”):
Charts' division.
Results
After multiple presentations seeking its approval, the project was finally accepted. The feedback was tremendously positive and, indeed, management was surprised with the great effect the simple changes in layout brought to the final user.
