Construindo a Base do Sucesso no Conquer Plus
Como Criamos um Design System Escalável que Transformou a Eficiência e a Experiência do Usuário
Desafio
No processo de rebranding e reposicionamento da marca Conquer Plus, nosso principal desafio foi criar uma nova identidade visual e desenvolver um Design System exclusivo para a plataforma.
A missão era clara:
Construir um sistema escalável, consistente e eficiente que otimizasse o trabalho de designers e desenvolvedores, acelerando a criação e manutenção de produtos.
A documentação do Design System foi essencial para garantir a padronização, fornecendo uma referência acessível e clara que todos, desde novos integrantes até colaboradores experientes, pudessem consultar para implementar os componentes de maneira rápida e uniforme.
O que é Design System?
Um Design System é um ecossistema de bibliotecas que reúne componentes programados e padrões de design, permitindo que a equipe crie produtos digitais de forma consistente.
Ele vai além de um projeto isolado:
É um produto vivo que se adapta e evolui, otimizando a criação de experiências digitais escaláveis.
Análise Heurística: Diagnóstico de Oportunidades
Para embasar a construção do Design System, realizamos uma Análise Heurística completa na plataforma Conquer Plus.
Identificamos inconsistências significativas nos componentes que comprometiam a experiência do usuário e a eficiência da interface.
Os insights dessa análise forneceram a base necessária para a criação de um sistema mais padronizado, alinhado às necessidades dos usuários e da equipe de desenvolvimento.
Problemas e Dores
Problemas e Dores de Engenharia:
- Complexidade na manutenção de cores, espaçamentos e tipografias.
- Correção de bugs demoradas devido a componentes implementados de formas diferentes.
- Tempo de desenvolvimento elevado para componentes já existentes.
- Dificuldades em escalar novas features (como Dark Theme, acessibilidade e responsividade).
Problemas de Design:
- Falta de padronização entre as plataformas Plus e English.
- Dificuldade em localizar componentes no Figma.
- Desalinhamento nos padrões entre design e front-end.
- Longo tempo de adaptação para novos integrantes do time.
Design Tokens Implementados:
- 🎨 Cores
📑 Tipografia
- 📐 Espaçamento
- 📱 Breakpoints e Grids
- 📏 Bordas e Contornos
- 👻 Opacidade e Sombreamento.
Support Components
- 🙂 Ícones
- 👑 Brand
- ✍️ Ilustrações
Global Components
- ✨ + de 37 componentes
- 📱💻 Todos os componentes versionados por web e mobile
- 🧩 Componentes versionados para as plataformas Plus e English.
- ⚙️ Automatização de componentes para facilitar a implementação.
Ganhos e Métricas de Sucesso
A criação e implementação do Design System trouxe ganhos mensuráveis tanto para a equipe de design quanto para a operação da Conquer Plus.
Aqui estão as métricas-chave que acompanharam o sucesso do projeto:
Métricas de Sucesso para a Equipe de UX:
- 30% de redução no tempo de desenvolvimento de novas telas, devido à reutilização de componentes padronizados.
- 20% de aumento na consistência dos fluxos de design, refletida na redução de inconsistências entre versões web e mobile.
- 25% de redução no tempo de integração de novos membros na equipe de design, devido à documentação clara e acessível.
Métricas de Sucesso para a Conquer:
- 15% de redução nos tickets de atendimento relacionados à usabilidade nas plataformas, resultado direto da padronização dos componentes.
- Implementação de ferramentas de acessibilidade e melhorias na experiência para todos os perfis de usuários.
- Aumento nas avaliações positivas nas lojas de aplicativos e no Reclame Aqui, elevando a percepção de qualidade da plataforma.
Próximos Passos
Com a base do Design System implementada, nossos próximos passos incluem:
- Implementação dos componentes pelo time de engenharia, garantindo consistência na execução.
- Refatoração das telas existentes para alinhar todos os produtos à nova identidade visual e padrões do Design System.
- Documentação contínua de boas práticas para garantir a manutenção e evolução dos componentes.
- Estabelecimento de processos regulares de atualização e otimização do Design System, acompanhando as necessidades de negócio e design.
Conclusão:
O desenvolvimento do Design System do Conquer Plus foi uma transformação crucial para garantir consistência, escalabilidade e eficiência em toda a plataforma.
O sistema não só facilita a criação e manutenção de interfaces, mas também melhora significativamente a experiência do usuário e a performance do time de design.
Essa estrutura modular e bem documentada permite uma maior agilidade na evolução dos produtos, assegurando que o Conquer Plus mantenha seu padrão elevado e sua identidade visual coesa em todas as interações, resultando em melhores avaliações de usabilidade e maior retenção de usuários.
E por fim, agradeço a você, que dedicou um tempinho para ler esse artigo.
