Overview

After implementing part of the V2 Interface in Saber em Rede’s Affiliate Platform, it was clear a restructuring from the ground up was the next step. From a technical point of view, there is constant demand in the system for customization: many of the partner institutions require different visual languages, terminologies, aspects and that can become overwhelming when dealing with the amount of modules in the system.

Because of that, SaberDS, the design system built for Saber em Rede, inspires itself in Material Design to transform itself in a clear objective: making the platform customizable for our partners.

Background

The Affiliate Platform was, at the time of SaberDS’s creation, in its second revision. While V1 initially had an aesthetic focus on consolidating the Platform’s visual identity around the then-current Saber em Rede brand, V2 focused on issues involving language standardization and the construction of the first building blocks for system standardization.
As an evolution of V2, the proposal for SaberDS was to consolidate the platform’s interface into a comprehensive library, this time designed to accommodate the recurring customization cases from the institutions’ Affiliate Programs.

Navigation and Hierarchy

With new products being incorporated into the platform constantly, it is essential to consider the space we’d dedicate to these additions. New cards, blocks, tools, and search columns demanded we ensure information remains accessible and legible. SaberDS focuses on building pages in modules adaptable to various sizes and layouts, ensuring consistency in the position and importance of blocks, regardless of proportions. Navigation is also a priority: iconography, distribution, and visual/textual organization must provide continuous context to the user while using the platform.

Customization

One of V2’s biggest weaknesses was the impossibility of complete user experience customization. Users from an institution are introduced to a homepage (Home Flow) adapted to their program and immediately navigate to sections entirely outside this visual structure in the rest of the platform. One of the pillars of SaberDS is to prioritize a complete experience and to make the Platform’s structure, although still visually based on SR (Saber em Rede)’s, tied to the visual standard of the participating Institutions (IEs). All tokens and components are rethought to allow the reconstruction of elements’ highlight colors.

Conclusion

The final project is still ongoing, between discussions regarding implementation and modifications, but it presented opportunities to optimize journeys on the platform and reduce the loading time of redundant elements per institution.