Desenvolvimento de um Design System, Completo e Acessível para a Planet Fitness
Entendendo as Prioridades
Antes de iniciar o desenvolvimento, conduzimos uma pesquisa aprofundada para mapear as necessidades e expectativas dos stakeholders. O Design System não seria apenas uma documentação técnica de UI, mas sim um ponto central de comunicação e alinhamento entre designers, desenvolvedores, tomadores de decisão, gerentes de projeto e representantes de marketing. Era essencial demonstrar por que investir em um Design System era uma decisão estratégica para a empresa. As principais razões identificadas foram:
✅ Consistência e Centralização – Criar uma única fonte de verdade para os elementos da interface, garantindo uniformidade visual e funcional.
✅ Eficiência e Redução de Lead Time – Eliminar a necessidade de "reinventar a roda" a cada nova interface, acelerando o desenvolvimento.
✅ Facilidade de Manutenção – Unificar e otimizar a interface, considerando sua aplicação em mais de 10 contextos diferentes dentro da organização.
✅ Acessibilidade Global – Assegurar conformidade com diretrizes internacionais de acessibilidade, tornando a experiência mais inclusiva.
✅ Eficiência e Redução de Lead Time – Eliminar a necessidade de "reinventar a roda" a cada nova interface, acelerando o desenvolvimento.
✅ Facilidade de Manutenção – Unificar e otimizar a interface, considerando sua aplicação em mais de 10 contextos diferentes dentro da organização.
✅ Acessibilidade Global – Assegurar conformidade com diretrizes internacionais de acessibilidade, tornando a experiência mais inclusiva.
Documentação para Diferentes Perfis
Devido à diversidade de stakeholders, estruturamos a documentação para atender às necessidades de diferentes públicos, garantindo que o Design System fosse compreensível e aplicável para todos os envolvidos.
🔹 Para o público geral - Explicamos o que é e para que serve um Design System e detalhamos a importância e flexões de uma documentação acessível e inclusiva.
🔹 Para desenvolvedores – Criamos uma documentação detalhada sobre a implementação dos componentes, uso em diferentes dispositivos e estrutura do arquivo no Figma.
🔹 Para novos integrantes do time de produto – Incluímos seções explicativas sobre a biblioteca e sua aplicação prática, facilitando a adaptação de novos profissionais.
🔹 Para novos integrantes do time de produto – Incluímos seções explicativas sobre a biblioteca e sua aplicação prática, facilitando a adaptação de novos profissionais.
🔹 Para o time de marketing - Descrevemos o arquivo de Figma em si, como funciona a criação de páginas novas, as definições de símbolo, estilos de texto, de cor, efeitos, grids, etc
Além disso, organizamos os componentes em tokens, átomos, moléculas e organismos, detalhando suas variações e funcionalidades. Essa abordagem permitiu uma implementação modular e escalável.
Acessibilidade Como Pilar Fundamental
A acessibilidade foi uma prioridade desde o início do projeto. Nossa documentação seguiu rigorosamente as Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.1), garantindo que a UI atendesse a um público mais amplo, incluindo pessoas com deficiência. Implementamos os seguintes requisitos essenciais:
✔ Navegação sem uso do mouse
✔ Estrutura e hierarquia consistentes entre os elementos da página
✔ Uso adequado de tooltips para auxiliar na interação
✔ Contraste suficiente entre texto e fundo, conforme os níveis da WCAG
✔ Inclusão de descrições ALT em imagens, seguindo padrões de acessibilidade
✔ Transcrições para vídeos e outros conteúdos multimídia
✔ Destaque visível do foco ao navegar pela interface
✔ Estrutura e hierarquia consistentes entre os elementos da página
✔ Uso adequado de tooltips para auxiliar na interação
✔ Contraste suficiente entre texto e fundo, conforme os níveis da WCAG
✔ Inclusão de descrições ALT em imagens, seguindo padrões de acessibilidade
✔ Transcrições para vídeos e outros conteúdos multimídia
✔ Destaque visível do foco ao navegar pela interface
Resultados e Impacto
O desenvolvimento do Design System gerou uma transformação significativa na gestão e implementação de interfaces dentro da Planet Fitness. Os principais impactos foram:
📌 Redução no lead time – Maior eficiência no desenvolvimento e entrega de novas interfaces.
📌 Alinhamento estratégico – Melhor comunicação entre times técnicos e tomadores de decisão, otimizando o processo de aprovação e implementação.
📌 Redução de custos operacionais – Menos retrabalho e maior reaproveitamento de componentes.
📌 Experiência do usuário aprimorada – Interfaces mais acessíveis e inclusivas, refletindo o compromisso da Planet Fitness com a diversidade de seus usuários.
📌 Alinhamento estratégico – Melhor comunicação entre times técnicos e tomadores de decisão, otimizando o processo de aprovação e implementação.
📌 Redução de custos operacionais – Menos retrabalho e maior reaproveitamento de componentes.
📌 Experiência do usuário aprimorada – Interfaces mais acessíveis e inclusivas, refletindo o compromisso da Planet Fitness com a diversidade de seus usuários.
Por concebermos uma documentação completa e responsável, procurando entender qual função o Design System de fato preencheria na rotina de todo o ecossistema que gira em seu entorno, fortalecemos não apenas nosso processo de trabalho, como também pudemos valorizar de forma organizada a experiência digital da marca e seu impacto social, tornando suas interfaces mais acessíveis e inclusivas.
O Design System da Planet Fitness se tornou um modelo de referência para futuras iniciativas, garantindo escalabilidade, eficiência e alinhamento com as melhores práticas do mercado.
Obrigada pela leitura!
