Locaweb Design System

Colaborative systems

Design System

Interaction

Management

Strategy

1M +eficiência operacional

300% produtividade do Design

50% de diminuição de time to market

24 produtos implementados

Conversar Conectar Contatar Conversar

Contexto

Conhecendo a LWSA

A LWSA é uma das maiores empresas de tecnologia do Brasil, com um ecossistema composto por dezenas de produtos digitais, múltiplas marcas e diferentes times de design e engenharia.
No cenário da Locaweb, a ausência de um Design System corporativo gerava inconsistências visuais, retrabalho frequente, dificuldade de escalar decisões de design, número excessivo de erros e bugs que oneram o time de engenharia e impacto direto no time-to-market dos produtos.

O projeto teve como objetivo criar um Design System escalável, multibranding e agnóstico à tecnologia, capaz de atender às necessidades atuais e futuras da organização.

Desafio

Antes do projeto, os principais desafios identificados eram:

  • Inconsistência visual e de experiência entre produtos
  • Duplicação de componentes e esforços entre times
  • Baixa previsibilidade nas entregas de design
  • Dificuldade de colaboração entre design e engenharia
  • Ausência de governança clara para decisões de design em escala

Além disso, o sistema precisava ser flexível o suficiente para suportar diferentes marcas do grupo, sem comprometer coerência e eficiência operacional.

A imagem contém elementos do design system antigos, os componentes de chips, uma enorme quantidade de tokens de cores e variações do componente de botões.
Component Chips e tokens do Locastyle v4 (antigo DS)

Abordagem e Estratégia

Atuei como líder do projeto, sendo responsável por estruturar a visão estratégica, definir governança e conduzir a execução do Design System.

As principais frentes de atuação foram:

  • Definição de princípios de design alinhados aos objetivos de negócio e à maturidade da organização
  • Estruturação de um modelo de governança colaborativa, garantindo evolução contínua e tomada de decisão clara e autonomia entre os times.
  • Criação de uma arquitetura de componentes agnóstica à tecnologia, facilitando adoção por diferentes stacks
  • Desenvolvimento de um sistema multibranding, permitindo personalização sem fragmentação
  • Alinhamento contínuo com liderança, designers e engenharia para garantir adesão e escalabilidade

O trabalho foi conduzido de forma incremental, priorizando entregas de alto impacto e validação constante com os times consumidores do design system.

Detalhamento do processo

Pessoas: recolhi os feedbacks dados, os acompanhamento feito por gestões anteriores e claro, metas financeiras que tínhamos em mãos. Com base nesses  artefatos desliguei duas pessoas e remanejei uma pessoa bastante motivada que estava em outra equipe. Outras duas pessoas foram contratadas posteriormente.

Materiais: Realizei um inventário de todas as jornadas de todos os produtos, documentando cada tipo de elemento utilizado, recorrência e aproveitamento entre ambientes, deste modo estabelecemos os objetivos de cobertura de componentes levando em consideração os principais produtos da empresa.

Governança: para o design system ser escalável necessitava de uma governança colaborativa e independente para que não fosse dependentes de um time específico evitando assim os possíveis gargalos no processo. Portanto criei um modelo de processo colaborativo com fórum no qual qualquer designer poderia colaborar, com os devidos níveis de decisão e autonomias estabelecidas, realizamos rituais de acompanhamento para deliberar o que eram novos “base components”, “team components ” ou “local components”.

Resultados alcançados

Depois de 6 meses trabalhando nessa frente, obtivemos um artefato totalmente agnóstico de tecnologia, multibranding, colaborativo e totalmente escalável.

Tivemos várias agendas e projetos para a adesão dentro das estratégias dos produtos, porém os detalhes desses processos deixo para um outro momento pois o acordo de NDA não me deixa ir além.

Entretanto posso exemplificar alguns resultados alcançados no primeiro ano:

  • Tempo de prototipação médio: 12h para 3h
  • Cycle time médio: 43 dias para 12 dias
  • Time to Market: de 4 meses para 2 meses
  • Resolução de bugs de 7 dias para 2 dias.
  • Incidência de bugs de interação: praticamente zerada com 6 meses de implementação.
  • Tempo de carregamento médio de página de 10s para 2.5s.
  • Aumento médio de 20 pontos de NPS.

Como não posso divulgar dados da empresa, vou exemplificar de maneira hipotética utilizando os resultados que obtive com dados de média salarial retirados do Glassdoor.

Média de salarios em São Paulo:
Dev pleno: R$7000.
Product Owner pleno: R$ 8000.
UX Designer pleno: R$ 6000.

Considerando uma equipe composta de:

  • 1 Product Owner
  • 2 Ux Designers
  • 5 Devs

O valor aproximado investido por mês, sem contar impostos e encargos trabalhistas é de R$ 55000

O Design system triplicou a velocidade do Designer e duplicou a velocidade de entrega do desenvolvedor.

Portanto temos o resultado por equipe:

R$ 21500 de eficiência operacional por mês

R$ 258 000 de eficiência operacional em 1 ano utilizando o Design System, com mais de 4 equipes passou facilmente da casa de 1 milhão.

Logicamente que não estamos falando de demissões, mas sim de capacidade de trabalho sendo empregada em frentes cada vez mais estratégicas, oportunizando que as pessoas possam trabalhar além do operacional, cada vez mais estratégicas.

Também vale ressaltar que as equipes nem sempre tem apenas pessoas em nível pleno.

Como disse, são dados hipotéticos mas acredito que já seja suficiente para quem estiver lendo esse post conseguir mensurar os impactos olhando para dados da própria empresa.

Aprendizados

Este projeto reforçou aprendizados essenciais para liderança em design em escala:

  • Design Systems exigem governança contínua, não apenas entrega inicial
  • A adesão dos times é tão importante quanto a qualidade dos componentes
  • Clareza estratégica e alinhamento com liderança são fatores críticos de sucesso
  • Um Design System bem estruturado impacta diretamente eficiência, cultura e resultado de negócio

Evolução contínua

Até o momento desse post o Design System evoluiu em várias áreas:

  • LW Design System for Emails – Estruturas de comunicação e marketing com o cliente.
  • LW Design System for Sites – Vertical que visa ambientes voltados a conversão e vendas, otimizado para cenários de performance, como checkout e autenticação.
  • LW Content System – Materialização das diretivas de marca em todos os pontos de contato, definição de tom e voz, arquétipos e fluxos conversacionais.
  • LW Design System for Apps
  • Tokens multibranding: Globais, semânticos e contextuais

E ai, vamos conversar?

Será um prazer falarmos sobre projetos,
sonhos e oportunidades

Marcar um horário