Desafio

Construção de um Design System que contemple multiplas marcas em uma experiência unificada no mercado esportivo.

Time

Atuei como Product Designer para a Squad de Design System, sendo:

👨‍🎨 2 Designers;
👩‍💻 2 engenheiros;
👨‍💼 1 Product Manager.

Empresas

Grupo SBF (Holding), Nike, Centauro, NWB, Fairplay (DS Core)

Grupo SBF

Fairplay Design System

Minha atuação na construção de um Design System White-label para construção do ecossistema do esporte em Centauro, Nike, NWB e Grupo SBF.

Nosso principal foco para alcançar nossos objetivos:

Fundação

Sobre Fundação

Biblioteca UI

Sobre Biblioteca UI

Documentação

Sobre Documentação

Implementação

Sobre Implementação
1. Fundação

Cores

Projetamos a partir do que chamamos de Design Tokens o que seriam as nossas menores decisões de Design acerca de um produto que contemplassem múltiplas marcas.

A partir da definição de um valor chave conseguimos escalonar as cores através das marcas.

buttons styles

Tipografia

Dividimos nossas tipografias num sistema que facilitasse o entendimento e utilização através das marcas.

Nossos design tokens referenciam nossos estilos tornando a experiência de uso e visualização melhorada e acessível.

Design Tokens

Os Tokens são as menores decisões de um elemento visual, através deles que mantemos um visual consistente e escalável para o desenvolvimento de interfaces.

Utilizamos propriedades pré-definidas ao invés de valores codificados (como hexadecimais para as cores ou pixels para espaçamentos) para garantir flexibilidade e unidade em todas as experiências de produto.

Bibliotecas multi-marcas

Construimos um ecossistemas de bibliotecas que permeasse as necessidades do time de produzir produtos com a mesma consitencia visual e facilidade entre todos os nossos produtos.

Componentes

Componentes são elementos chaves em um Design System, unificamos Design e Engenharia para construirmos melhores produtos.

Descentralizando a tomada de decisão acerca de questões táticas de layout dentro das squads, possibilitando que nossos colaboradores foquem mais na parte estratégica e atingimento de metas de companhia.

Cada componente resolve um problema específico dentro da interface

Juntos desenvolvemos um design escalável e harmônico.

Tornando o dia a dia de desenvolvimento de produto, projetos e serviços mais ágil, consistente e escalável.

Plataforma oficial

Desenvolvemos uma plataforma para que todos da empresa possam consultar nossas documentação, componentes e entender mais sobre como trabalhamos.

Assegurando a cultura

Para garantir que todos nossos objetivos estavam sendo alcançados nos apoiavamos em alguns processos ajudando na adoção e utilização de nosso Design System

Onboarding
prático

Design
Critique

Pesquisas
de avaliação

Horários fixos
para atendimento

Acompanhamento
com time de Ops

Processo centralizado

Estabelecemos um processo centralizado de construção de componentes acerca de Design e Engenharia.

Métricas

Design system é um produto um tanto complexo de se trazer métricas, principalmente automatizada, o melhor modelo que conseguimos seguir para entender um produto que atua em cima da performance do time foi:

Componentes no ar

Nossa NSM (North-Star Metric)

Ela resume todas as outras métricas
Ela demonstra o principal valor do produto
Ela mostra que os designers e engenheiros consumiram os componentes sem fazer iterações
É única forma de tangebilizarmos todo valor que o produto se propõe a entregar

Se eles estão no ar, estão é porque estão sendo utilizados e gerando valor real para designers, engenheiros e para o usuário final.

Adoção


Sabem que existe?
Começaram a usar?

Sucesso da tarefa

Sabem usar?
Usaram corretamente?

Retenção

Ainda estão usando?
Está sendo efetivo?