VDP UI: Criando um Design System que garanta consistência

Vai de Promo é um e-commerce de viagens com a missão de ajudar os viajantes a encontrar todos os serviços que precisam para uma viagem.

🗣️ Overview

Este projeto foi iniciado para resolver questões críticas no design e na usabilidade do produto existente. Como Designer de Produto, meu objetivo foi desenvolver um design system abrangente que criasse consistência, garantisse acessibilidade por meio de elementos abrangentes e fornecesse um produto escalável.

Você pode acessar o arquivo do Figma aqui -> Link para o Figma

🚨 Identificação dos Problemas

Antes do início do projeto, o site enfrentava vários desafios:

1. Inconsistências Visuais: Elementos como botões, cores e campos de entrada variavam muito, levando a uma experiência de usuário fragmentada.
2. Problemas de Usabilidade: A navegação era confusa e obsoleta, e os usuários frequentemente encontravam dificuldades para completar tarefas.
3. Dificuldades de Manutenção: Adicionar novas funcionalidades e manter a base de código existente era desafiador e causava bugs devido à falta de componentes padronizados.

Ao identificar claramente esses problemas, pudemos estabelecer metas específicas para o novo design system: alcançar consistência visual, melhorar a usabilidade e simplificar o processo de desenvolvimento e manutenção.

🔎 Pesquisa e Análise

Para abordar efetivamente os problemas identificados, realizamos uma pesquisa abrangente. Isso envolveu:

Análise do Site Existente: Uma auditoria detalhada revelou inconsistências em elementos como botões, cores e campos de entrada. Essas inconsistências levaram a uma experiência de usuário fragmentada.

Benchmarking: Estudamos sistemas de design líderes da indústria, como o Material Design do Google e o Carbon Design System da IBM, e também concorrentes como o Suitcase DS do Hurb e o Tangerina da Smiles, identificando práticas-chave, como estruturação de componentes, princípios de layout e padrões de acessibilidade, que informaram nossa abordagem.

Feedback dos Usuários e Stakeholders: O comportamento dos usuários e entrevistas com stakeholders destacaram pontos problemáticos, como baixa hierarquia de componentes e botões muito pequenos, orientando nossas decisões de design.

Análise de Concorrentes: Examinamos sites de concorrentes como Decolar e Hurb revelou estratégias eficazes, como componentes reutilizáveis, que influenciaram nossa abordagem.

Essa fase de pesquisa garantiu que nossa abordagem fosse baseada em dados, estabelecendo a base para um design system bem-sucedido.

🚀 Definindo o Escopo e Objetivos

A visão para o projeto VDP UI era criar um design system unificado e escalável que melhorasse a experiência do usuário e simplificasse o desenvolvimento.

Componentes e Padrões: Elementos-chave incluíam botões, formulários, modais, menus de navegação e padrões de tipografia, projetados para versatilidade.

Ferramentas e Tecnologias: Utilizamos o Figma para colaboração em design e o Storybook para documentar componentes, escolhidos por seu suporte à colaboração em tempo real e consistência.

Tokens de Design: Variáveis para cores, espaçamento e tipografia garantiram um estilo consistente e atualizações fáceis.

Documentação e Diretrizes: Diretrizes detalhadas para cada componente incluíam instruções de uso e melhores práticas, servindo como referência para designers e desenvolvedores.

Ao definir o escopo e os objetivos, estabelecemos uma base sólida para o design system, alinhando os esforços em direção a um resultado coeso e eficiente.

🪚 Ferramentas

Para facilitar a criação e manutenção do VDP UI, selecionamos ferramentas-chave projetadas para apoiar a colaboração e a consistência.

Figma:

• Propósito: Colaboração em design e prototipagem.
• Recursos: Colaboração em tempo real, bibliotecas de componentes e tokens de design.
• Benefício: Permitiu comunicação contínua e aplicação consistente de design em toda a equipe.

Storybook:

• Propósito: Desenvolvimento e documentação de componentes de UI.
• Recursos: Explorador interativo de componentes, visualização ao vivo e suporte a add-ons.
• Benefício: Documentação centralizada de componentes, facilitando o desenvolvimento e a manutenção.

Essas ferramentas garantiram que nossos processos de design e desenvolvimento fossem bem coordenados e eficientes.

🎨 Design Tokens

Os tokens de design foram um elemento crucial da VDP UI, fornecendo uma maneira padronizada de gerenciar propriedades essenciais de design. Focamos nos três principais tokens que consideramos importantes: Cores, Tipografia e Grids. Esses tokens garantiram consistência e permitiram atualizações fáceis em todos os componentes.

Cores da Marca:

• Definimos um conjunto central de cores da marca para manter uma identidade visual consistente em todos os elementos.

Cores de Destaque:

• Estabelecemos cores de destaque para enfatizar informações e ações importantes, garantindo uma experiência visual harmoniosa.

Tipografia:

• Criamos um sistema abrangente de tipografia, incluindo tamanhos de fonte, pesos e espaçamento de linha para títulos, texto principal e legendas.

Grids:

• Desenvolvemos diretrizes padrão de espaçamento e layout, incluindo valores de margem e preenchimento e um sistema de grids, para garantir uma interface limpa e organizada.

🧩 Componentes (moléculas)

Para os componentes, começamos documentando os dois principais que estavam causando problemas na UI: Botões e Inputs. Novamente, focamos em componentes-chave para criar a base de um design system coeso:

Botões:

• Padronizamos estilos de botões para botões primários, secundários e terciários, incluindo vários estados (hover, ativo, desativado) para um feedback visual claro.

Inputs:

• Unificamos elementos de formulário como campos de texto, caixas de seleção, botões de rádio e menus suspensos para interações previsíveis e intuitivas dos usuários.

Cada componente foi documentado com diretrizes de uso para garantir implementação e aplicação consistentes. Essas padronizações estabeleceram as bases para um design system coeso e escalável, melhorando a experiência do usuário e a eficiência de desenvolvimento.

🖥️ Implementação e Integração

Integrar o novo design system ao site existente exigiu planejamento e execução cuidadosos. Adotamos uma abordagem faseada, começando pelos componentes mais críticos e substituindo gradualmente os antigos. Isso permitiu testes contínuos e feedback, garantindo uma transição tranquila.

Testes de usabilidade e acessibilidade foram essenciais no processo de implementação. Cada componente passou por testes rigorosos para garantir conformidade com padrões de acessibilidade, assegurando que o novo design system fosse inclusivo e fácil de usar.

⛰️ Desafios e Soluções

Enfrentamos vários desafios durante o projeto. Um problema significativo foi a resistência à mudança por parte da equipe de desenvolvimento, acostumada às práticas antigas. Para resolver isso, realizamos sessões de handoff e workshops para familiarizar a equipe com o novo design system e seus benefícios.

Desafios técnicos, como integrar o design system com código legado, foram superados fornecendo suporte prático aos desenvolvedores. Esses esforços ajudaram a minimizar interrupções e garantir uma integração perfeita.

📈 Resultados e Impacto

A implementação do design system trouxe benefícios significativos. A consistência visual melhorou drasticamente, criando uma aparência coesa e profissional em todo o site. Melhorias na usabilidade resultaram em uma experiência de usuário melhorada, refletida em maior engajamento e taxas reduzidas de rejeição.

A eficiência na manutenção e desenvolvimento também apresentou uma melhoria marcante. Os componentes padronizados reduziram retrabalhos, diminuindo o tempo de desenvolvimento e permitindo que a equipe se concentrasse em novos recursos e melhorias.

Os stakeholders ficaram satisfeitos com a identidade de marca aprimorada e os ganhos de eficiência no processo de desenvolvimento.

🌟 Conclusão

O projeto VDP UI abordou com sucesso questões críticas do produto existente ao desenvolver e implementar um design system abrangente. Este projeto não apenas melhorou a consistência visual e usabilidade, mas também simplificou o processo de desenvolvimento, resultando em ganhos significativos de eficiência.

Para o futuro, a melhoria contínua e a manutenção do design system serão essenciais. Planos estão em andamento para atualizar regularmente o sistema com base no feedback dos usuários e nas necessidades de design em evolução.

O sucesso deste projeto destaca a importância de um design system bem estruturado na criação de uma experiência digital coesa, eficiente e amigável ao usuário.

Você pode acessar o arquivo do Figma aqui -> Link para o Figma

🤝 Agradecimentos

Gostaria de estender minha gratidão a toda a equipe de design e desenvolvimento pelo trabalho árduo e dedicação. Um agradecimento especial à minha colega Jaqueline Teixeira, sem sua orientação e habilidades técnicas, este projeto não teria sido tão excepcional como foi!