top of page
Cosmos banner.png

Cosmos Design System

Criação, concepção e implementação do Design System da Embraer e Techcare.

Contribuições

Product Management

Design Ops

Team Management

Visão geral

A Hotmart estava se tornando uma empresa global, integrando outras empresas em uma holding.

Isso exigiu a reformulação do Cosmos, o Design System da Hotmart, para um Design System Global para toda a empresa Hotmart.

Entendimento do problema

O desafio foi criar uma lógica de Design System que pudesse transformar qualquer componente em uma nova marca, mesmo que que marca da holding fosse diferente.

Os principais problemas da versão anterior do Cosmos foram:

  • O Cosmos foi criado pensando apenas nos produtos da Hotmart;

  • Legados técnicos que não podiam ser evoluídos para um Design System Global;

  • A construção do front-end era feita apenas em React Native;

  • Os componentes não atendiam a todas as equipes (squads);

  • Não havia métricas para medir o impacto do Design System.

Construção

Com base nas necessidades e desafios dos usuários e do negócio, a construção do Design System foi realizada nas seguintes etapas:

  1. Medir o tempo de ciclo das equipes de Desenvolvimento e Design de todas as empresas da Hotmart Co.

  2. Alinhamento com os stakeholders e equipes para entender suas necessidades e desafios.

  3. Mapeamento dos componentes, levando em consideração a escalabilidade para a nova versão.

  4. Estudos de front-end para encontrar um framework adequado para os componentes da web que suporte React, Angular e Vue.

  5. Calcular o CSAT (Satisfação do Cliente) da versão atual do Cosmos.

  6. Criar uma nova lógica de Design Tokens e documentação de uso a partir do feedback de designers e desenvolvedores.

Durante todo o processo, estávamos alinhados com a Teachable, outra empresa da Hotmart Co., que usaria como teste piloto nova versão do Cosmos, agora chamada de "Cosmos Global".

Captura de Tela 2023-06-23 às 11.23.10.png

Os Design Tokens foram projetados para se adaptarem a cada empresa, considerando os modos dark e light.

Captura de Tela 2023-06-23 às 11.28.52.png

O Cosmos Analytics para medir Cobertura ajuda a entender quais componentes serão utilizados a partir de uma Versão Global

Implementação

Uma vez que a estrutura foi criada, começamos a desenvolver componentes white label e flexíveis, não apenas para ajudar as equipes da Hotmart, mas também para atender outras empresas, como a Teachable.

Captura de Tela 2023-06-23 às 11.35.05.png

O produto MRO Consumer serviu como produto piloto para o Design System, que seria usado para a Embraer e Techcare

Para ajudar as equipes, também realizamos workshops mensais sobre como utilizar o Cosmos e disponibilizamos uma biblioteca de componentes para que as equipes possam criar com base nos componentes do Cosmos Global.

Com o objetivo de otimizar o tempo dos designers na criação de telas, também desenvolvemos componentes de conteúdo de UX Writing para cada situação, seguindo boas práticas de UX e reduzindo o tempo de suporte de UX Writing em demandas menores e pequenas alterações.

Captura de Tela 2023-06-23 às 12.15.13.png

O Designer pode facilmente escolher um componente com texto em branco ou conteúdo pré-estabelecido para usar em uma situação adequada, se for uma mensagem de erro, automaticamente o componente irá sugerir um fundo vermelho e etc.

Portanto, a estrutura do Cosmos foi dividida da seguinte forma:

  1. Tokens: eles definem a aparência dos componentes;

  2. Componentes Principais (Core Components): flexíveis para serem usados em várias situações;

  3. Componentes de Conteúdo (Content Components): podem ser usados para otimizar o tempo na criação de novos conteúdos;

  4. Componentes de Equipe (Team Components): criados pelas equipes específicas usando o Cosmos Design System.

Captura de Tela 2023-06-23 às 12.08.24.png

Métricas

Para medir o impacto do Design System, orientamos-nos por essas métricas:

  • Cobertura do Cosmos;

  • CSAT (Satisfação do Cliente) dividido em integração, uso, novos componentes e suporte;

  • Tempo otimizado por componente;

  • Tempo médio do ciclo de Designers e Desenvolvedores;

Essas métricas nos ajudam a criar OKRs (Objectives and Key Results) trimestrais para orientar quais métricas precisamos melhorar para uma melhor experiência do produto.

Captura de Tela 2023-06-23 às 12.37.28.png

Como exemplo do impacto do componente, calculamos o tempo médio de construção de design e desenvolvimento com as equipes que utilizaram esses componentes. O resultado é o tempo médio economizado ao utilizar um Componente do Cosmos em vez de criá-lo do zero.

Resultados

O CSAT aumentou de 44% para 80%.

Average time saved until 40%

Integração com Hotmart e Teachable.

Cobertura do Cosmos em 70%.

bottom of page