Design System Wibx

A empresa precisava de um novo Design System para os projetos futuros da marca, o Design System antigo estava muito defasado, desorganizado e cheio de erros, não atendia às necessidades da equipe e da empresa, que desejava um visual mais moderno e mais alinhado com a nova identidade da marca em seus próximos aplicativos.

Com isso, iniciamos a construção de um novo Design System para substituir a versão antiga e para que os projetos fossem desenvolvidos com maior rapidez e ficassem esteticamente mais agradáveis aos usuários, sem o visual obsoleto do DS anterior.

Produto

Design System

Atuação

UI Designer

Duração

4 meses

Empresa

Wibx Company

Pesquisa e estudo

Este projeto foi um grande desafio, pois a equipe era bem enxuta, contava apenas com dois Product Designers sem nenhuma experiência prévia na criação e documentação de Design Systems, o que nos exigiu bastante estudo e atenção, mas também trouxe grande aprendizado e desenvolvimento profissional.

No início foi realizada uma pesquisa de referências para a definição de como seria o visual dos componentes. Criamos a paleta de cores e listamos quais componentes seriam necessários para nossos aplicativos. Estudamos vários projetos semelhantes e realizamos alguns cursos e tutoriais para aprender as melhores maneiras de documentar e nomear os componentes e como criá-los de forma correta.

A metodologia escolhida para catalogar e documentar o Design System foi o Atomic Design, os componentes foram divididos entre átomos, moléculas e organismos de acordo com sua estrutura e função.

Construção dos componentes

Para agilizar o processo optamos por comprar um UI Kit básico e a partir dele construir o Design System, vinculando-o com a nossa biblioteca de ícones e ilustrações. O UI Kit nos forneceu alguns elementos essenciais como inputs, botões, controls, modais, checkbox, etc. Modificamos esses componentes iniciais para que se adequassem a identidade visual da marca e ao estilo que planejamos, iniciamos a documentação e começamos a criar os novos componentes, sempre em duas versões diferentes: light e dark.

Foram criados pela equipe diversos componentes novos como dropdowns, datepickers, alerts, collapses, progress circles, nav menus, drawers, entre outros, e alguns componentes bem específicos dos apps Wibx como wallets, action sheets e diversos tipos de cards.

Conclusão

A Etapa de criação e documentação do Design System foi finalizada com sucesso, se tornou um dos melhores cases no setor de Produto e com o tempo ele poderá ser expandido conforme as necessidades da empresa.

Para mim, como Product Designer foi um grande aprendizado participar e liderar a construção desse projeto, Design System era uma área em que eu já tinha bastante interesse e curiosidade, por isso encarei este desafio como uma grande oportunidade de aprendizado..

Atuar na criação do Design System Wibx me trouxe uma visão bem mais completa sobre nomenclatura e função dos componentes de um aplicativo e como utilizá-los corretamente, além de me mostrar a importância de uma boa documentação e de trabalhar de forma organizada.