Smarttbot - Design System

O Design System não é só projeto, é um produto vivo que melhora a consistência de outros produtos.

O projeto

A Smarttbot, também conhecida como empresa que trabalho atualmente hehehe, não tinha ainda definido um Design System para o seu webapp. Primeiramente, vamos contar rapidamente qual é o negócio da empresa. A Smarttbot é uma plataforma de investimento automatizado, pioneira no mercado onde atua. Sediada em BH, hoje é considerada uma empresa sólida e seu produto já possui vários parceiros e ajuda a democratizar o investimento inteligente. Mesmo nesse cenário a empresa ainda não tinha um design system próprio e esse era o desafio.

Sem um design system próprio, a Smarttbot perdia muito em consistência visual e também em escalabilidade de produto. O design system nasceu não pensando nisso apenas, mas também em fornecer uma melhor experiência visual e também uma melhor acessibilidade, o que ainda não era contemplado plenamente no modelo atual.

O processo de trabalho

Descoberta e Criação

  • Foi preciso mapear todos os produtos da empresa para descobrirmos todos os componentes que seriam contemplados na versão inicial do design system.

  • Após isso, baseado na identidade visual da empresa e também num trabalho de pesquisa, foi criado um styleguide contendo tudo que é referente ao estilo visual: cores, tipografia, espaçamento, sombras etc.

  • Após esse momento criamos os componentes utilizando as diretrizes desse styleguide que foi criado no inicio do processo. 

  • Importante ressaltar que a inspiração veio do framework atomic design, onde partes menores vão se juntando para criar partes maiores. Esse método só não foi implementado em sua totalidade porque na etapa de descoberta sentimos que seria um passo muito além do que necessitávamos no momento.

  • Por fim, criamos uma nova proposta de UI para podermos usar em um futuro breve.

Um pouco do que foi criado