Overview

Saber em Rede is an education startup that is part of Group A, a company specialized in educational solutions in Brazil since 1973, and a resident of Cubo Itaú since 2018.

As part of the startup’s identity update project and in partnership with the development team and leadership, I led the initial refresh of the Affiliate Platform pages, aiming to refine the dev-made MVPs into an interface with a better implementation of the initial project.

The main objective was to simplify navigation and make interactive elements explicit, already structuring the foundation for future mobile and app-based implementation.

Investigation

The investigative process began with the MVP of the platform, a system developed in ReactJS with a greater functional concern than usability concern.

The Platform

Building upon the existing framework, the initial focus of this refresh was to bring more intuitiveness to the platform mechanics. In addition to aesthetic emphasis, it was necessary to improve the signifiers of each screen and establish groundwork for future screens and iterations.

Navigation and Journey

The navigational elements of all pages were functional, but there were some highlighted points needing improvements:

• The home page lacked relevant information;
• The sales and purchases history was unclear: what constitutes a purchase? what constitutes a sale?
• The Courses page prioritized Institutions over course search;
• User registration required knowing all student data beforehand;
• The transactional functions “Commissions” and “Ambassador’s Shop” despite being linked were not presented together, affecting the visualization of parallel journeys;
• The main menu was confusing, and the information hierarchy did not prioritize grouping among platform sections;

Conclusions

From the initial investigation, three things became clear:

1. Navigation suffered from clarity and consistency across screen sizes;
2. Clickable elements were too varied and not very intuitive;
3. Information distribution was impractical and did not value the continuity of proposed user journeys;

Solutions

The first solution was to optimize user journey access and establish a foundation for mobile devices. Although research indicated that most accesses occurred on larger devices, the original version of the project gave very little priority to responsive screens, and one of the platform’s greatest strengths is ease of access outside the home. Thus, developing a solution prioritizing mobile was essential as a foundation for the future.

The second stage was to evaluate the remapping of platform areas. The flow evaluation process involved identifying how users interacted with available activities, grouping them into more effective screens and journeys for the audience. There were redundancies of access and information that could be much better utilized if linked to each other, such as points and commissions cataloging or the purchase and sale histories of courses and withdrawal information.

The third stage, finally, was to put this into practice in the layout: the initial standardization followed a reading inspired by Material Design V2, attempting to create appropriate communication with the development team using a common language.