Resumo
Um Design System é concebido para estabelecer guias de construção de interfaces, apresentando padrões de formas e componentes a serem aplicadas na arquitetura de informação de um produto. Com base nele, pode-se escalar de forma harmônica e coerente um produto digital ou um grupo de produtos que componham o portfólio de uma empresa.
Uma vez implementado, o Design System minimiza o trabalho de desenvolvedores, com a descrição de código de componentes. Torna-se uma ferramenta importante na garantia da qualidade, minimizando incidências em QA. Do ponto de vista de designers, O Design System comunica e reforça a consistência visual e comportamental da interface do usuário, apresentando o design dos componentes mais básicos aos mais complexos, regras de uso de branding com manual de marcas.
O Grupo Nexxera conta com cerca de 300 colaboradores e 9 empresas, todas apresentando soluções digitais corporativas para gestão financeira e banking, sendo o principal gateway de transações financeiras e mercantis do Brasil.
Gerencia cerca de 2.5 bilhões de transações bancárias por ano, movimentando mais de R$ 356 bilhões, possuindo 5 mil clientes corporativos ativos.
Detalhes do Projeto
Cliente: Grupo Nexxera – Florianópolis, Brasil
Data: 2018 – …
Responsabilidades: Conceber e organizar a GUI dos produtos do grupo
Plataforma: Web, responsivo
Ferramentas: Adobe XD, Storybook
Métodos de UX: Graphic User Interface Design
O Desafio
Com mais de 25 anos de atuação e mais de 20 produtos desenvolvidos a Nexxera vem sofrendo uma transformação interna e inovadora em seu modo de desenvolvimento e entendimento das necessidades do mercado. O desafio passa tanto pela reformulação de produtos com arquitetura legada, como também a construção de novos produtos que atendam ao segmento de B2C, até então não explorado pela empresa.
Por conta disto, a fim de trazer um olhar mais focado na experiência do usuário-cliente, em 2018 a Nexxera decidiu investir na criação de uma equipe de design de produtos, me convidado para atuar nas soluções do Grupo.
Diante do cenário desarmonioso, em que cada produto apresenta uma solução gráfica e de interação distintas, muitas vezes inviabilizando a escalabilidade e conversação entre as soluções dos produtos, tomei a iniciativa de iniciar a construção do Design System Nexxera – DSN.
Em sua primeira versão, já estamos aplicando o guideline do DSN em novos produtos corporativos e já estamos nos preparando para a revisão e atualização dos demais produtos legados do Grupo.
DSN Design System 1
DSN Design System 2
DSN Design System 3
DSN Design System 5
DSN Design System 4
DSN Design System 7
DSN Design System 8
DSN Design System 6
DSN Design System 9
DSN Design System 10
DSN Design System 11
Processo de Desenvolvimento
Para este projeto, realizei uma série de reuniões com os times de desenvolvedores e POs, apresentando as vantagens de termos nosso Design System elaborado internamente.
Atualmente ela atende aos produtos web da empresa e está em rápida expansão para contemplar artefatos em Apps/PWAs. Ele também contará com elementos de branding dos produtos do Grupo e materiais de marketing.
Através de uma pesquisa de soluções para a publicação do DSN, selecionamos como melhor opção para o nosso contexto, a plataforma open source Storybook. , sendo o Google Material Design a base inicial do DSN, que atualmente já apresenta componentes e estrutura própria.
Aprendizados e Conclusões
Este projeto segue em desenvolvimento, com algumas iniciativas das equipes de desenvolvimento em componentizar o material, criando um framework próprio da empresa. Alguns projetos novos da Nexxera já seguem o Design System como o Nix dentre outros.