Fino DS

02/2024

Design system - Multimarca

Design system

Necessidade

Como poderíamos ter um design consistente, escalável que atendesse multimarcas, múltiplas plataformas e que fosse de fácil implementação e desenvolvimento

Equipe

Designers - Andressa Lucena, José Paulo

Devs

Front-end - Felipe Romero, Karoline Cruz

Flutter - Tauã Rodrigues, Breno Novaes

Linha do tempo

Março - Abril de 2023

Ferramentas

Figma

Design system - fino

White mode e Dark mode, Multiplataforma, Multimarca

Problema

Quando entrei na epoc para liderar o time de design, tínhamos a missão de criar e melhorar inúmeros produtos, para múltiplas marcas com prazos curtos e consistência visual.

Processo de design

Com a popularização do Design system no mercado brasileiro e a adesão das grandes empresas como itaú, google, quinto andar. Muitas possuíam documentação e artigos de design system publicados, estudamos esses recursos para entender e como poderíamos adaptá-los ao nosso cenário e contexto.
https://designsystemsbrasileiros.
com/Criamos uma estrutura a partir disto de acordo com cada frente de desenvolvimento

Tendo diversos produtos e marcas, optamos por utilizar a metodologia de tokens para alimentar os produtos. Os componentes principais, aplicáveis a todos os produtos, são alimentados por esses tokens, com variações apenas nas cores para cada frente B2C e B2B. Nas aplicações B2C e B2B, os componentes são ajustados conforme a experiência em cada dispositivo, mantendo a coesão de estilos, navegabilidade e identidade de marca.

Entrega do time
de design

Montserrat

$font-family-base

weights

Bold

Medium

Regular

italic

Brand colors

Como agilizamos
a entrega

Para facilitar o trabalho dos designers, duas ferramentas foram essenciais para agilizar a entrega aos desenvolvedores: a funcionalidade de variáveis no Figma, que automatiza processos, e o plugin EightShapes Specs, utilizado para a handoff.
‍

Implementação

Com equipe reduzida e sem um squad exclusivo para o design system, cada squad assumiu a responsabilidade de componentizar e criar bibliotecas para suas frentes. O desenvolvimento do design system ocorreu gradualmente em cada sprint, com contribuições dos desenvolvedores."

Conclusão

Ao longo do desenvolvimento e entregas, o design system foi sendo aprimorado. A cada nova sprint, observamos uma aceleração na produção do produto, resultando na redução significativa do tempo de desenvolvimento.‍

02/2023

Visualizar projeto

Reflexão

A compreensão do contexto e do tamanho da nossa equipe foi fundamental para a construção de um design system que beneficiasse diversas frentes, abrangendo desde a concepção até a manutenção e desenvolvimento de futuros produtos.