Pela BRQ iniciei a atuar na Vitru no fim de 2025, com mais 2 UX designers e 1 UX writer, para criar Design System para duas marcas (Uniasselvi e UniCesumar). Partimos um guia visual de outro fornecedor, que não tinha como ser escalado para um Design System consistente, em curto espaço de tempo.
Se tratavam de 2 identidades diferentes, criando universos visuais separados, apesar de semelhanças entre alguns elementos. Vários componentes apresentavam problemas de responsividade, comportamento inconsistente e incompatibilidade entre desktop e mobile.
Apesar da demanda interna, o produto não possuía qualquer estrutura para suportar temas claros e escuros (dark mode), algo cada vez mais esperado pelos usuários. Além disso, as páginas tinham grande volume de módulos, carrosséis e conteúdo dinâmico, exigindo um nível de padronização para funcionar de forma escalável.
Em cerca de 3 meses foi criada a base dos dois Design Systems, considerando tokens, variáveis, grid, dark mode. Um modelo básico de página de produto (curso) foi criado com os componentes. Em meio a esses 3 meses entraram os desenvolvedores front end.
Alguns tokens de cores.
Nos meses seguintes foram criadas outras páginas. O time interno de design do cliente (com 4 profissionais) foi sendo atendido no tocante a dúvidas de uso do Design System. E acertos e evoluções de componentes não previstos inicialmente forma sendo feitos.
Foi percebido problemas na escala de cores iniciais, que tinham contraste insuficiente (pelas regras da WCAG) em alguns layouts. Foi proposta alteração para adequação junto ao time de branding.
Ajuste de cores proposto e aceito.
Também foram feitas alterações em 3 componentes com a entrada do recurso do slot no Figma, dando mais flexibilidade aos designers.
O time interno ganhou muita velocidade na criação e tombamento de páginas das duas marcas. Foi pensado um fluxo de proposta e revisão de componente, com critério de quando algo entra.
Exemplo de componente.
Working through BRQ, I began an engagement with Vitru in late 2025 alongside two other UX designers and a UX writer to create a design system for two brands (Uniasselvi e UniCesumar). We started with a visual guide from another vendor that could not be scaled into a consistent design system within the required timeframe.
We dealt with two distinct identities, creating separate visual universes despite some shared elements. Various components suffered from responsiveness issues, inconsistent behavior, and desktop-mobile incompatibility.
Despite internal demand, the product lacked the framework to support light and dark themes (a feature increasingly expected by users). Furthermore, the pages contained a large volume of modules, carousels, and dynamic content, requiring standardization to ensure scalability..
Over the course of about three months, the foundation for both Design Systems was established, covering tokens, variables, grids, and dark mode. A basic product (course) page template was created using these components. Front-end developers joined the project during this three-month period.
Some color tokens.
Additional pages were created in the following months. Support was provided to the client's internal design team (comprising four professionals) regarding the use of the Design System, while adjustments and enhancements to components—not originally foreseen—were implemented.
Issues were identified with the initial color scale, which lacked sufficient contrast (according to WCAG standards) in certain layouts; a modification to ensure compliance was proposed in collaboration with the branding team.
Color adjust proposed and accepted.
Changes were also made to three components following the introduction of the "slot" feature in Figma, providing designers with greater flexibility.
The in-house team significantly accelerated the creation and implementation of pages for both brands. A workflow for component proposals and reviews was established, including criteria for when items are introduced.
Component example.