Cilia Tecnologia

Chassi Design System: Construindo um ecossitema

Design System Em Destaque SaaS UX Research

Contexto

O ecossistema da Cilia é composto por múltiplas interfaces construídas em momentos diferentes, com padrões variados e soluções produzidas sob demanda.

Diante da oportunidade de expansão na América Latina, surge a necessidade de consolidar um ecossistema de design contemporâneo e inteligente.

Os Desafios

  • Falta de padronização entre produtos.
  • Ausência de documentação unificada.
  • Inconsistências visuais e funcionais.
  • Visual desatualizado em relação ao posicionamento atual da empresa.
  • Comunicação fragmentada entre designers, desenvolvedores e produto.
  • Dificuldade de escalar componentes e experiências para novos produtos e mercados.

Assim como o chassi de um carro...

O Design System é a estrutura fundamental na construção de um produto.

  • Objetivos do Design System

  • Padronizar interfaces e comportamentos em todo o ecossistema.

  • Acelerar o processo de desenvolvimento dos produtos.

  • Reduzir inconsistências e retrabalhos.

  • Modernizar e atualizar a linguagem visual da Cilia.

  • Facilitar a comunicação entre designers, desenvolvedores e stakeholders.

  • Garantir escalabilidade e flexibilidade para evolução dos produtos.

  • Preparar o ecossistema para a expansão na América Latina.

Os Pilares
de Design

  • Esses são os princípios que guiaram a criação do Chassi DS, garantindo eficienciência e logevidade.

  • 1. Aprendizado e Evolução

    Tudo começa aprendendo com tudo que já fizemos, extraímos do nosso passado lições valiosas para construir um Design System que não apenas define regras, mas evolui continuamente.

  • 2. Consistência e Coesão

    Muito mais que uma biblioteca de componentes, oo padronizar a linguagem visual, criamos uma experiência unificada que reforça a identidade da marca Cilia. Construído uma estrutura se adeque a todos produtos do ecossistema.

  • 3. Eficiência e Escala

    Com cada componente sendo pensando e construído para serem reutilizados em diferentes contextos. O objetivo é que os times de design e desenvolvimento ganhem agilidade e foquem em resolver problemas complexos.

  • 4. Clareza e Usabilidade

    Buscamos o equilíbrio entre estética e funcionalidade. Focamos em interfaces limpas e intuitivas, utilizando formas suaves e respiros agradáveis para garantir uma experiência leve e acessível a todos os usuários.

O Chassi DS vai além de uma simples biblioteca de componentes.

Ele é projetado para ser um ecossistema completo, pensado para padronizar e garantir a escalabilidade de todos os produtos Cilia.

Documentação e regras de uso

Para construir uma biblioteca que fosse de fácil compreensão para todos os envolvidos, foram documentadas as regras de uso, instruindo sobre variantes, estados, boas práticas de uso e acessibilidade, entre outros.

Tokenização

Para assegurar a escalabilidade e a consistência do produto. O design System foi construído a partir de uma estrutura de tokens a fim de construir uma estrutura reutilizáveis, de fácil manutenção e amigável a suporte fácil e documentado a estrutura de temas.

Estrutura de templates

Funcionando como base eficiente para criar padrões complexos. A estruturação de templates permite que designers e desenvolvedores foquem na resolução de problemas estratégicos.

Além de acelerar a entrega, essa estrutura atua como um conjunto de dados curado e semântico que serve como base solida para conexão com ferramentas de IA.

Resultados alcançados

  • Ganho em maturidade

    A implementação do Chassi Design System marcou um ponto de virada na forma como construímos produtos, elevando o ganho de maturidade em design de uma abordagem artesanal para um pensamento sistêmico e escalável.

    Ao centralizar as definições visuais e funcionais, conseguimos estabelecer uma padronização na documentação e handoff, reduzindo ruído na comunicação entre designers e desenvolvedores.

  • Impactos Técnicos e Operacionais

    Um dos pilares dessa evolução foi a criação do monorepo e repositório de componentes, que vem consolidando nosso ecossistema de código.

    Essa estrutura facilitou a governança e permitiu que atualizações globais fossem propagadas com segurança para diferentes frentes de produto. Como resultado direto, observamos um expressivo ganho de tempo na produção de protótipos de alta fidelidade.

  • Coerência Estratégica

    Além da eficiência técnica, o Chassi promoveu um maior alinhamento entre marca e produto.

    Através de uma arquitetura de tokens bem estruturada, as diretrizes da marca foram traduzidas diretamente para a interface, garantindo que a personalidade da empresa esteja presente em cada interação do usuário.