Case 04 · Design System · Lello 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 System UI Design Colaboração com Dev
Cliente
Lello Condomínios
Meu papel
UI + UX Design
Escopo
3 apps: Moradores, Síndicos, Colaboradores
Ferramentas
Figma Design · Style Guide
Problema

Cada tela, um padrão diferente

Sem um Design System para seguir, faltava consistência entre as telas: 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á vinha pedindo mais consistência entre as telas.

Processo

Um projeto em construção contínua, não um documento estático

01Consolidação da base+
Levantei os componentes existentes nos três apps e consolidei numa base única, documentando cor, espaçamento, tamanho e borda.
02Colaboração ativa com o time de Dev+
Perguntei ativamente aos desenvolvedores o que estava faltando, tratando o sistema como um projeto compartilhado, não uma entrega unilateral do Design.

Esse convite para participar mudou o comportamento do time: os desenvolvedores passaram a sugerir melhorias por conta própria, em vez de só consumir o que o Design entregava.

Decisão de produto

Aplicando o sistema em reestruturações reais

Com a base consolidada, apliquei o sistema em reestruturações visuais significativas dentro dos apps. Dois exemplos:

Paleta de cores do Design System: principais, de apoio e extras
Cores
Escala tipográfica do Design System
Tipografia
Sets de ícones organizados por menu e categoria
Ícones
Header unificado entre site e apps
Header & Footer
Telas de aviso e alerta, para apps e desktop
Alertas
Cards e elevações, com 3 níveis de sombreado
Cards & Elevações
Estilos de botão: primary, secondary e tertiary
Botões
Antes
Fluxo antigo de Reserva de áreas, sem componentização
Depois
Novo fluxo de Reserva de áreas, com fotos reais e filtros

Reserva de áreas — app do Morador

Antes
Fluxo antigo de Comodidades, lista simples
Depois
Novo fluxo de Comodidades, com ofertas e categorias

Comodidades — app do Morador

Impacto

De consumir para colaborar

O time de Desenvolvimento passou a ter uma referência clara para se basear, em vez de "inventar" componentes por conta própria — isso reduziu ajustes durante os projetos e agilizou a entrega. Um exemplo concreto dessa mudança de postura: um desenvolvedor sugeriu incluir setas indicando a sequência das telas dentro dos fluxos de uma seção do app, e a sugestão entrou no sistema.

Aprendizado

O que eu faria diferente

Teria começado mais cedo e envolvido o time desde o início — muitas inconsistências e correrias de última hora poderiam ter sido evitadas com esse alinhamento antecipado. Também documentaria fluxos completos de cada seção, não só componentes isolados — mas isso exigiria mais pessoas de Design no time, recurso que não tínhamos disponível na época.

← Voltar ao portfólio