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:
​
-
Medir o tempo de ciclo das equipes de Desenvolvimento e Design de todas as empresas da Hotmart Co.
-
Alinhamento com os stakeholders e equipes para entender suas necessidades e desafios.
-
Mapeamento dos componentes, levando em consideração a escalabilidade para a nova versão.
-
Estudos de front-end para encontrar um framework adequado para os componentes da web que suporte React, Angular e Vue.
-
Calcular o CSAT (Satisfação do Cliente) da versão atual do Cosmos.
-
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".
Os Design Tokens foram projetados para se adaptarem a cada empresa, considerando os modos dark e light.
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.
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.
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:
​
-
Tokens: eles definem a aparência dos componentes;
-
Componentes Principais (Core Components): flexíveis para serem usados em várias situações;
-
Componentes de Conteúdo (Content Components): podem ser usados para otimizar o tempo na criação de novos conteúdos;
-
Componentes de Equipe (Team Components): criados pelas equipes específicas usando o Cosmos Design System.
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.
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%.