Dois produtos, uma linguagem: o design system que estruturou a base visual da LinkedBy

Resumo executivo

A LinkedBy possuía diferentes produtos digitais evoluindo ao longo do tempo, cada um atendendo públicos e contextos distintos. Para garantir consistência visual, reduzir retrabalho e acelerar novas entregas, a Evo Systems desenvolveu um Design System completo, criando uma linguagem única para os sistemas da empresa.

Desafio

Com mais de 25 anos de atuação no mercado de ERP, SFA e soluções logísticas para distribuidores de bebidas e alimentos, a LinkedBy mantém um ecossistema de produtos utilizados diariamente por vendedores, gestores e equipes operacionais.

Entre esses produtos está o UXSync, sistema desenvolvido em parceria entre a LinkedBy e a Evo Systems para gestão e parametrização dos demais aplicativos da empresa. Além dele, outros sistemas como o SFA e o Painel de Vendas evoluíam continuamente para atender novas necessidades do negócio.

Apesar de fazerem parte do mesmo ecossistema, esses produtos não possuíam uma base visual compartilhada. Componentes semelhantes eram implementados de maneiras diferentes, padrões de navegação variavam entre projetos e novas funcionalidades exigiam decisões de interface praticamente do zero.

Essa falta de padronização gerava inconsistências para os usuários e aumentava o esforço de desenvolvimento e manutenção das aplicações.

Estratégia

Em vez de tratar inconsistências individualmente, a Evo Systems definiu uma abordagem estrutural: criar um Design System capaz de servir como referência para todo o ecossistema de produtos da LinkedBy.

O trabalho começou pelo levantamento dos componentes utilizados nos sistemas existentes e pela identificação de padrões recorrentes de navegação, formulários, tabelas, estados e elementos visuais.

Cada componente foi projetado considerando aplicações web e mobile, permitindo reutilização entre diferentes produtos sem comprometer as particularidades de cada contexto de uso.

Além da biblioteca visual, foram documentadas regras de utilização, comportamentos, estados de interface e boas práticas de implementação, facilitando tanto o trabalho das equipes de design quanto de desenvolvimento.

Transformação

O Design System passou a fornecer uma linguagem visual única para os produtos da LinkedBy.

O UXSync foi um dos primeiros sistemas a utilizar essa nova base, adotando componentes padronizados, tipografia consistente, regras de espaçamento e padrões de interação que posteriormente passaram a orientar também a evolução do SFA, Painel de Vendas e outros sistemas.

Foram desenvolvidos componentes para diferentes cenários de uso, incluindo:

• tabelas para grandes volumes de informação;

• formulários complexos;

• modais;

• badges e indicadores de status;

• campos de busca e filtros;

• botões e ações priorizadas;

• mensagens de erro, sucesso e carregamento;

• componentes responsivos para web e dispositivos móveis.

Todos os estados das interfaces foram documentados, incluindo situações de exceção, garantindo previsibilidade durante o desenvolvimento e maior consistência na experiência dos usuários.

Resultados

A criação do Design System trouxe uma base sólida para a evolução dos produtos da LinkedBy.

Entre os principais ganhos estão:

• padronização da identidade visual entre diferentes sistemas;

• reutilização de componentes em novos projetos;

• redução do retrabalho durante desenvolvimento e manutenção;

• maior consistência na experiência dos usuários;

• documentação centralizada para designers e desenvolvedores;

• evolução mais rápida de novos módulos sem necessidade de redefinir padrões visuais.

O Design System também serviu como base para projetos posteriores desenvolvidos pela Evo Systems, incluindo o redesign do SFA e outras iniciativas dentro do ecossistema da LinkedBy.

Tecnologias utilizadas

UX/UI Design

O projeto foi desenvolvido em Figma, com construção de uma biblioteca completa de componentes, estilos, padrões de interação e documentação para utilização pelas equipes de design e desenvolvimento.

Conclusão

Conforme um produto cresce, manter consistência deixa de ser apenas uma questão estética e passa a impactar diretamente velocidade de desenvolvimento, manutenção e experiência do usuário.

Ao estruturar um Design System próprio, a LinkedBy estabeleceu uma base comum para seus produtos, permitindo que sistemas diferentes evoluíssem de forma consistente sem perder identidade ou qualidade.

Perguntas frequentes

O que foi desenvolvido neste projeto?

Foi criado um Design System completo para padronizar interfaces, componentes e padrões visuais dos produtos da LinkedBy.

O UXSync é o Design System?

Não. O UXSync é um sistema desenvolvido em parceria entre a LinkedBy e a Evo Systems. O Design System foi criado para servir de base visual ao UXSync e aos demais produtos da empresa.

Quais sistemas utilizam esse Design System?

Inicialmente o UXSync adotou essa base visual, que posteriormente passou a orientar também a evolução do SFA, Painel de Vendas e outros sistemas da LinkedBy.

Quais benefícios um Design System oferece?

Padronização da experiência, reutilização de componentes, redução de retrabalho, maior velocidade de desenvolvimento e manutenção mais simples ao longo da evolução dos produtos.