Design
System
Um "produto" que retroalimenta outros produtos e promove eficiência, consistência e escalabilidade em entregas de design e desenvolvimento
CLIENTE
VALORA
About Me.
Experiência
2021-2021
Product Designer
Responsabilidades
-
Aderir nova identidade
-
Fomentar e estruturar processo de design
-
​Documentar processo de design
-
Realizar pesquisa e descoberta
-
Estabelecer colaboração
-
Simplificar a experiência do produto
Contexto
Valora é uma startup com solução SaaS para precificação dinâmica, que está em fase de amadurecimento e evoluiu para um novo estágio com a estruturação de sua identidade digital. Essa nova identidade agora precisava ser implementada no produto, dentro de um ambiente ágil e propício a constantes mudanças.
​
Ao iniciar esse processo, não havia arquivos de design, diretrizes ou regras visuais estabelecidas, exigindo um trabalho estratégico para consolidar uma base sólida para futuras evoluções. Conduzi a criação do Design System em paralelo a outras entregas de design, colaborando diretamente com o time multidisciplinar para promover uma implementação eficiente.
​
Desafios identificados
-
A identidade digital estava registrada apenas em arquivos fechados
-
Não havia arquivos de design ou biblioteca de componentes
-
Barreiras de acessibilidade e escalabilidade exigiam ajustes
Metas
Padronizar e unificar elementos de design
Refletir a nova identidade da marca
Facilitar a adoção do Design System
Projeto
Para poder reutilizar componentes e reduzir o tempo de design de telas, criei este ecossistema com base neste conjunto de componentes bem conhecido.
​
Usei o modelo criado por Javier "Simón" Cuello, Designer UX, que conheci quando fiz o curso ministrado "Introdução a Sistemas de Design com Figma".
​
Pivotei a primeira versão, o que foi muito gratificante, aprendemos muito com ela e permitiu outros ajustes necessários no front-end.
Guideline
Primeiro passo foi a criação de um guideline na plataforma Milanote em colaboração com o CTO da empresa.
​
O guideline foi composto por:
-
Princípios de Design: Concepção do projeto.
-
Meta: Definição de objetivos.
-
Planejamento Criativo: Planejamento e conceituação.
-
Branding: Paleta de cores, logo, tom de voz, personalidade e público-alvo.
-
Plataforma: Proposta de valor, posicionamento, visual, performance e escalabilidade.
Versão
Piloto
Com uma visão geral estruturada do produto, incluindo sua concepção, identidade visual, posicionamento estratégico e proposta de valor definida a partir do Guideline, pude avançar para a criação do DS.
​
O primeiro passo foi realizar um inventário e agrupamento dos componentes para estabelecer uma estrutura sólida. A versão piloto do Design System foi então desenvolvida dentro do Figma, possibilitando a publicação dos elementos no sistema para serem reutilizados em outros arquivos de design, acelerando o processo de criação.
​
Desde o início, o desenvolvimento do Design System foi acompanhado pelo time em dailys, promovendo alinhamentos constantes ao longo das etapas. Aspectos de micro-interações foram mapeados com base no que já existia, tornando-se parte essencial do processo de documentação e evolução do sistema.
​
Embora os conceitos de Atomic Design não tenham sido incorporados na primeira versão, o Design System viabilizou sua adoção progressiva ao longo das entregas seguintes.
Conquistas
+50
elementos para proporcionar escalabilidade e consistência
9
estilos tipográficos cuidadosamente projetados para serem usados ​​em todos os produtos
10
elementos com micro-interações
para criar experiências intuitivas
2
produtos retroalimentados por design system
Homologar
Homologuei e documentei a versão piloto do nosso Design System no ZeroHeight, um repositório centralizado e acessível para toda a equipe. Essa validação permite que stakeholders e desenvolvedores visualizem e utilizem componentes padronizados com facilidade. A partir de agora, todas as diretrizes visuais e tokens de design estão disponíveis na plataforma, servindo como referência única para a construção de produtos digitais.
Adoção
A adoção do Design System no código foi facilitado com o uso de uma biblioteca de componentes existente, que atua como a base técnica para padronização e escalabilidade. Essa biblioteca já contém elementos que visam ser reutilizáveis que seguem diretrizes visuais e funcionais bem definidas, porém que a customização é possível, permitindo uma integração fluida entre design e desenvolvimento. Com sua estrutura consolidada, compatibilidade tecnológica, que atende a critérios de usabilidade e acessibilidade, conseguimos manter consistência na interface, reduzir retrabalho e acelerar a implementação de novos produtos e features.
Retrospectiva
Tive a oportunidade de observar, em primeira mão, como um produto de startup pode ser extremamente beneficiado pelo uso de um Design System, especialmente nos estágios iniciais do projeto. Ao se tornar uma base sólida, ele não apenas facilita a evolução do próprio produto, mas também abre caminho para a criação de novos produtos derivados.
​
A colaboração próxima com a equipe multidisciplinar foi essencial para construirmos um sistema acessível e intuitivo, permitindo que todos (designers, desenvolvedores e stakeholders) pudessem compreendê-lo e utilizá-lo de forma eficiente. Esse alinhamento impactou diretamente a experiência do usuário, tornando-a mais consistente e fluida.
O que eu aprendi?
​Principais aprendizados:
-
A colaboração ativa com o time de desenvolvimento é um pilar fundamental para o sucesso do Design System.
-
Alinhamentos frequentes com toda a equipe contribuem significativamente para a visão e planejamento da adoção do sistema.
-
A complexidade do produto não determina necessariamente a complexidade do Design System.
-
O Design System pode (e deve) ser adaptado a diferentes contextos sem comprometer sua integridade.
-
Não só é muito simples refletir uma nova identidade utilizando o sistema como também quaisquer outras novas evoluções de identidade.​
​
O que eu mudaria?
Criaria design tokens seguindo a lógica da Meiuca, que facilita a visualização e compreensão imediata do uso dos elementos no design e no código. Ao tornar os tokens mais intuitivos e autoexplicativos (por exemplo, $font-size-mdindicando um tamanho médio que pode ser 24px ou 32px), o fluxo de trabalho se tornaria mais ágil e acessível para todos os envolvidos.
​
Este foi o primeiro Design System que tive o privilégio de criar! Um legado do qual tenho muito orgulho. No entanto, não foi o último: desde então, apliquei os aprendizados dessa experiência para desenvolver mais três sistemas, sempre evoluindo e refinando a abordagem.