Design System
Visão Geral
Em dezembro de 2022, a equipe do LIGA, tomou a decisão de construir seu próprio design system para orientar seus produtos internos. Essa decisão foi tomada porque um design system é uma ferramenta essencial para garantir a consistência e a eficiência do design de produtos, permitindo que a equipe de design trabalhe de forma mais rápida e eficiente.
Após a divisão das categorias de trabalho, cada designer recebeu uma tarefa específica. Eu fiquei responsável por padronizar a documentação do design system e criei componentes importantes como Toast,/Message/Alert. Além disso, também desenvolvi o componente Checkbox, que é fundamental em muitos dos produtos internos da Facens.
Padronizar a documentação do design system foi uma tarefa desafiadora, mas muito importante. Garantir que todos os componentes sigam as mesmas diretrizes de design é crucial para garantir a consistência e a coesão do sistema. Além disso, criar componentes que possam ser facilmente reutilizados em diferentes produtos economiza tempo e esforço, além de garantir uma experiência de usuário mais consistente e intuitiva.
Minhas contribuições
Padronização da Documentação Toast/Message/Alert Checkbox
The team
1 PO 1 líder de ux/ui designer 3 ux/ui designers 1 ilustrador 1 scrum master
Year
jan/2023
Processo
O começo da jornada: Iniciando o projeto
A criação de um design system consistente e eficiente é um passo fundamental para garantir a qualidade dos produtos digitais desenvolvidos por uma empresa. No caso do Liga Facens, a construção do design system foi iniciada a partir da definição da identidade da marca. A análise de cores foi um dos primeiros passos na construção da identidade visual da empresa. As cores são um elemento muito importante na criação de uma marca forte e memorável, e devem ser escolhidas com cuidado para transmitir a mensagem adequada e atrair o público-alvo.
A revisão de materiais antigos também foi um passo importante para identificar pontos fortes e fracos da marca. Isso pode ser feito por meio da análise de postagens em mídias sociais, slides anteriores, materiais promocionais e materiais impressos. A partir dessa análise, foi possível identificar o que precisava ser melhorado para fortalecer a presença da marca no mercado.
A padronização dos slides de apresentação e da experiência do slide também foi um passo importante na construção da identidade visual do Liga Facens. Isso garantiu que todas as apresentações tivessem uma aparência visual consistente e reforçou a identidade visual da empresa. A equipe de design trabalhou de forma colaborativa e explorou diversas ideias para slides, componentes e estilos visuais. Ao final do processo, as melhores ideias foram selecionadas e combinadas para criar um template padrão de slide para o Liga Facens. Esse template foi então adotado como referência para todas as apresentações e materiais visuais produzidos pela empresa.
Após a definição das cores e do posicionamento da marca, a construção do design system para uso em produtos digitais foi iniciada. Um design system é um conjunto de elementos de design e diretrizes que ajudam a criar uma experiência consistente em todos os produtos digitais da empresa. Isso inclui a definição de tipografia, ícones, botões e outros elementos de interface do usuário.
As aventuras diárias: A saga das Dailys
As reuniões diárias de alinhamento, ou dailys, foram um dos principais mecanismos utilizados para manter a equipe do projeto do Liga Facens alinhada e focada nos objetivos a serem alcançados. Essas reuniões foram planejadas para ocorrer em horários e locais fixos, o que ajudou a estabelecer uma rotina de trabalho consistente e a manter todos os membros da equipe atualizados em relação ao progresso do projeto.
As dailys foram ótimas não apenas para manter a equipe alinhada, mas também para encorajar a comunicação aberta e a troca de ideias entre os membros da equipe. Durante essas reuniões, todos os membros da equipe tinham a oportunidade de compartilhar seus avanços, dificuldades e ideias, o que ajudou a manter a equipe motivada e engajada.
Além disso, após as dailys reservávamos um tempo para a apresentação de referências, troca de experiências e conhecimentos técnicos. Isso ajudou a amadurecer o conhecimento da equipe e permitiu que todos estivessem atualizados em relação às novidades e tendências do mercado.
Em busca do tesouro perdido: Referências e categorias
Durante o processo de construção do design system do Liga Facens, reservamos algumas reuniões para discutir referências de design system que poderiam inspirar e informar nosso trabalho. Essas reuniões foram uma oportunidade valiosa para explorar diferentes abordagens e soluções de design system e para discutir como essas referências poderiam ser adaptadas à nossa realidade.
Como membro da equipe de design do Liga Facens, senti-me particularmente orgulhosa por ter contribuído com a apresentação de referências que foram usadas para informar o nosso processo de criação. Foi gratificante ver que minhas ideias foram valorizadas e incorporadas ao projeto, e isso me motivou ainda mais a colaborar de forma ativa e criativa.
Para guiar nossas discussões e pesquisa, utilizamos o site https://designsystemsbrasileiros.com/, que é uma excelente fonte de referências e informações sobre design systems criados por empresas brasileiras. Utilizamos as informações e exemplos disponíveis no site para entender as diferentes categorias de componentes e padrões que poderíamos utilizar em nosso próprio design system.
Ao explorar as referências de design system disponíveis, percebemos que havia muitas oportunidades para criar soluções personalizadas e adaptadas às necessidades específicas do Liga Facens. Em vez de simplesmente copiar ou seguir modelos existentes, decidimos utilizar as referências como inspiração e ponto de partida para criar algo único e diferenciado.
Organização é tudo: Padronização da documentação
Padronizar a documentação para o design system foi um passo crucial na construção de um sistema visual coerente e consistente para o Liga Facens. Eu comecei pesquisando diversas referências de outros design systems para identificar as melhores práticas e tendências em documentação de design system.
Após essa etapa de pesquisa, eu padronizei as cores, fontes e componentes para garantir que tudo estivesse de acordo com a identidade visual da marca. Eu também criei um modelo de documentação para o design system, que apresenta seções como "O que é o componente?", "Quando utilizar?", "Anatomia", "Tipos", "Tom de voz", "Quebra de linha", "Posicionamento", "Estados", "Melhores práticas" e "Aplicação em mockups".
Essas seções foram pensadas para fornecer informações relevantes e completas sobre cada componente do design system, ajudando outros membros da equipe a entenderem como usar cada um deles de forma consistente e eficiente. Além disso, a padronização da documentação ajudou a garantir que a equipe estivesse alinhada quanto às melhores práticas e padrões de design a serem utilizados no projeto.
Hora de colocar a mão na massa: Construção de Componentes
Fui designada para construir dois componentes-chave: o Toast e o Checkbox. Essa tarefa foi muito importante porque esses componentes são amplamente utilizados em produtos digitais, e garantir que eles fossem bem projetados e desenvolvidos foi fundamental para a qualidade da experiência do usuário.
Para construir esses componentes, utilizei o Figma, que é uma ferramenta de design popular para criar interfaces de usuário. Ao trabalhar com esses componentes, aprendi mais sobre o uso do Auto Layout e como criar componentes responsivos. Isso foi essencial para garantir que os componentes funcionassem corretamente em diferentes tamanhos de tela e em diferentes dispositivos.
Além disso, a construção desses componentes me permitiu explorar ainda mais as novidades do Figma em relação à componentização. Através do uso de componentes no Figma, pude criar um conjunto de elementos reutilizáveis que poderiam ser facilmente aplicados a diferentes partes do design do produto, economizando tempo e garantindo consistência visual.
No processo de construção desses componentes, eu também trabalhei em estreita colaboração com outros membros da equipe para garantir que o design e a funcionalidade dos componentes atendessem às necessidades do projeto e às expectativas dos usuários.
Resultados
Gostaria de acrescentar que o projeto de construção do design system da Facens ainda está em andamento, mas foi pausado temporariamente devido a outras prioridades e demandas da equipe. Mesmo assim, já foi possível perceber o impacto positivo que o design system tem na eficiência do trabalho da equipe de design e na qualidade dos produtos desenvolvidos.
Com a pausa no projeto, temos a oportunidade de avaliar o progresso até o momento e identificar possíveis melhorias e ajustes que podem ser feitos. É importante lembrar que o desenvolvimento de um design system é um processo contínuo e que está em constante evolução. À medida que novos produtos são desenvolvidos e novas tecnologias surgem, o design system precisa ser atualizado e adaptado para garantir a melhor experiência possível para o usuário final.
Mesmo com a pausa no projeto, estamos ansiosos para retomar a construção do design system da Facens e continuar a aprimorar nosso trabalho. Estamos comprometidos em criar uma ferramenta robusta e eficiente que possa ser aplicada em todos os produtos internos da Facens, garantindo uma experiência de usuário coesa e de alta qualidade.