03Lello Condomínios

Um design system vivo, não um documento parado

Envolver o time de desenvolvimento na construção do sistema, em vez de só entregar um guia pronto, mudou a postura deles: passaram a sugerir melhorias por conta própria.

Design SystemUI DesignMobileColaboração com dev
Cliente
Lello Condomínios
Meu papel
UI + UX Design
Escopo
3 apps: Morador, Colaborador e Síndico
Ferramentas
Figma · Style guide

Três apps, um mesmo sistema

App do Morador
App do Colaborador
App do Síndico

Problema

Cada tela, um padrão diferente

Sem um design system, botões, cards, alertas, ícones e modais variavam de um app para o outro, e as propriedades desses componentes (cor, espaçamento, tamanho, borda) ficavam confusas sem uma referência única. O resultado era retrabalho constante e falta de padronização.

Priorizei a criação do sistema por iniciativa própria, com respaldo da Product Manager, que já pedia mais consistência entre as telas.

Processo

Um projeto em construção contínua

  1. 01

    Consolidação da base

    Levantei os componentes existentes nos três apps e consolidei tudo numa base única, documentando cor, espaçamento, tamanho e borda.

  2. 02

    Colaboração ativa com o time de dev

    Perguntei aos desenvolvedores o que estava faltando, tratando o sistema como um projeto compartilhado, não uma entrega unilateral do design.

O convite para participar mudou o comportamento do time: os desenvolvedores passaram a sugerir melhorias em vez de só consumir o que o design entregava.

Os fundamentos do sistema

Clique em qualquer item para ampliar.

Cores
Tipografia
Ícones
Header e navegação
Alertas
Cards e elevações
Botões

Reserva de áreas · App do Morador

Antes
Reserva de áreas, antes
Depois
Reserva de áreas, depois: fotos reais e filtros

Comodidades · App do Morador

Antes
Comodidades, antes
Depois
Comodidades, depois: ofertas e categorias

Impacto

De consumir para colaborar

O time de desenvolvimento ganhou uma referência clara, em vez de inventar componentes por conta própria. Isso reduziu ajustes durante os projetos e agilizou as entregas. Um exemplo: um desenvolvedor sugeriu setas indicando a sequência das telas dentro dos fluxos, e a sugestão entrou no sistema.

Aprendizado

O que eu faria diferente

Começaria mais cedo e envolveria o time desde o início, evitando inconsistências e correrias de última hora. Também documentaria fluxos completos de cada seção, não só componentes isolados, o que exigiria mais pessoas de design no time.