Vital Design System
Um dos maiores desafios do meu portfólio, criar um Design System para uma empresa que tinha acabado de se fundir com outras 3, cada uma com seu design e identidade totalmente diferentes.Da necessidade de ter um design constante e escalável entre os produtos, nasceu o Vital Design System, da Hyperlocal, inicialmente estruturado para 6 marcas, mas durante o projeto a empresa foi reestruturada para 3 marcas.
Primeiros passos:
Após analisarmos a situação definimos que esse projeto seria feito em 6 etapas, sendo elas:
1 - Mapeamento de produtos.
Foi feito um levantamento de todos produtos ativos e inativos das marcas, como:
- Apps, Landing Pages, Plataformas, Site Institucional e Sistemas de retaguarda como Backoffice.
2 - Linguagens e Roadmap
Investigar como esse produtos foram desenvolvidos:
Qual a linguagem;
Em qual fase eles está;
Como são feitas as demandas de atualização;
Se existe legado;
Quais os times responsáveis;
Possíveis bloqueios de tecnologia.
3 - Diretrizes de marca
Junto com o time de Branding, desenvolvemos os guidelines de todas as marcas. Paletas de cores com ênfase em acessibilidade, famílias tipográficas, características da identidade de acordo com o público, direcionamento de imagens e ilustrações e tom de voz.
4 - Inventário
Após tudo mapeado, foi feito um inventário de componentes.
Passando de tela em tela, identificando quais seriam os componentes que entrariam no design system, filtrando e classificando se seriam Core Componentes (Padrão em todas as marcas) ou Team Componentes (Específico de cada marca).
5 - Desenvolver
Depois de tudo mapeado é hora de colocar
a mão na massa.
Definido qual seriam os Core componentes, foi iniciado o desenvolvimento do design e handoff para entregar para o time de desenvolvedores criarem as bibliotecas em código.
6 - Documentação
Organização de como os times vão consumir essas bibliotecas no dia a dia dentro dos projetos.
Documentar em uma plataforma de fácil acesso para todos os times.
