Você precisa de um sistema de design?

Nos últimos 5 a 7 anos, o conceito de sistema de design tornou-se uma espécie de palavra de ordem tanto para designers de produtos quanto para desenvolvedores de front-end. Muitos começaram a criar seus próprios sistemas de design apenas porque está na moda. No entanto, você realmente precisa de seu próprio sistema de design e, em caso afirmativo, quais metas você deve definir para a equipe e como acompanhar sua eficácia? Ilya Lesov, Design de Produto, Líder de Equipe, Innotech, falou na conferência internacional CrossConf em Innopolis no fluxo de Design e Produto com um relatório sobre sistemas de design. Neste artigo, Ilya fornece respostas a algumas perguntas sobre este tópico.

O que é um Sistema de Design?

Ainda há discussões sobre o conteúdo da definição de um design system (DS). Há uma opinião de que o DS consiste nos componentes em um editor gráfico em conjunto com uma biblioteca no código. No entanto, este não é um DS no sentido pleno do termo.

“Um simples kit de interface do usuário sem filosofia, princípios, diretrizes, processos ou documentação de acompanhamento é como jogar um monte de componentes da IKEA no chão e dizer: “Aqui, construa uma cômoda!” Os manuais e a documentação incluídos com os componentes da interface do usuário servem como o manual de instruções que acompanha os componentes IKEA para ajudar o usuário a montar os móveis corretamente e com sucesso.”

Brad Frost — o autor do conceito de design atômico

É exatamente por isso que um sistema de design é devidamente definido como um conjunto único de padrões e regras que permite gerenciar o design em todas as etapas do desenvolvimento do produto, que inclui: padrões e diretrizes, conjuntos de estilos, componentes e modelos. Na verdade, é a única fonte de verdade para todos os membros da equipe de produto.

O que está incluído em um Design System?

Os sistemas de design de diferentes empresas são construídos de forma diferente. No entanto, existem alguns elementos comuns:

Linguagem Visual

Este é o componente principal e importante que é construído em torno da filosofia da sua marca. Inclui cores, tipografia, formas e estilos de sombra, ícones e ilustrações e muito mais. O elemento de linguagem visual é exatamente o que torna seu produto reconhecível para os usuários entre muitos outros.

Algumas pessoas esquecem da linguagem visual, mas é exatamente aqui que você precisa começar o desenvolvimento do design. Uma VL bem elaborada está sempre alicerçada no estudo do seu público-alvo.

Kit de IU em Design

Um conjunto de componentes prontos em um editor gráfico. Consiste em botões, formulários, modelos de módulo e páginas. Geralmente construído sobre o princípio do atomic design.

Biblioteca de componentes no código

Implementação técnica do UI Kit. Depende da estrutura em que seu produto será construído. Na maioria das vezes é React ou Angular.

Descrições de padrões e cenários de usuário

Um dos elementos mais importantes de qualquer sistema de design, sem o qual é apenas uma biblioteca de componentes. Esta é uma descrição de todas as opções de interação do usuário com o sistema: animação e seus tipos, formas de exibição das caixas de diálogo, princípios de validação de formulários, tipos de onboarding, etc. Isso geralmente inclui também os princípios de comunicação com usuários, guias sobre textos na interface e formas de visualização dos dados: gráficos, relatórios, etc.

Sistema de Controle de Processo para Criação e Implementação de Componentes

Provavelmente um dos elementos mais não óbvios do design do sistema, mas ao mesmo tempo é um dos fundamentos. Estes são os princípios de construção da interação entre a equipe de design system e outras equipes em sua empresa: quem definirá tarefas, introduzirá bugs, etc., o tipo de abordagem de desenvolvimento: Scrum ou Kanban, como a própria equipe de desenvolvimento será organizada, qual será o ciclo de lançamento de seus sistemas de design e muito mais. Quanto maior o número de usuários do seu sistema de design, mais sistemática e ponderada deve ser a abordagem para construir todos os itens acima. As empresas modernas de vários produtos geralmente formam uma equipe de Design Ops separada que desenvolve e mantém o sistema de design, bem como, em geral, todos os processos de design da empresa.

Como saber se você precisa de um Design System?

Antes de iniciar o desenvolvimento, você precisa responder a uma pergunta importante: “Por que precisamos de um sistema de design? Que metas e objetivos alcançaremos com isso?”

Se você está lançando um produto pequeno que resolve 1 a 2 problemas de usuários, não precisa de nenhum sistema de design. Além disso, não adianta desperdiçar recursos e tempo precioso da equipe no desenvolvimento do kit de interface do usuário e da biblioteca de componentes se você ainda não tiver uma compreensão clara da escala do produto futuro. É melhor gastar esse tempo testando hipóteses e protótipos, desenvolvendo e implementando novas funcionalidades. É uma história diferente se você estiver lançando um grande sistema ou fazendo um redesenho global de todo um ecossistema de produtos.

Nesse caso, o sistema de design ajudará a resolver toda uma lista de tarefas:

• Garantia da integridade do estilo visual do produto
• Combinação de padrões de interação do usuário
• Padronização de abordagens para design e desenvolvimento
• Aceleração dos processos de time to market e lançamento de novas versões do produto
• Prototipagem Rápida e Tempo de Preparação UT Reduzido
• Possibilidade de fácil dimensionamento do produto
• Redução do tempo de integração para novas contratações

Etapa 1. Identificar futuros usuários

Para identificar os principais consumidores do design system e aqueles que irão influenciá-lo, é necessário mapear os stakeholders. Isso ajudará a levar em consideração os interesses de cada uma das partes no design e determinar o principal público-alvo.

As partes interessadas diretas são os principais usuários do futuro sistema de design. Divida-os em segmentos e conte o número de pessoas em cada um. Isso lhe dará uma compreensão numérica de quantos usuários em potencial você cobrirá com seu desenvolvimento.

Etapa 2. Realizar entrevistas com representantes de cada grupo de partes interessadas

Reserve um tempo para entrevistar desenvolvedores, designers e pesquisadores. Isso ajudará você a entender melhor o fluxo de trabalho e as dores, além de reunir suas ideias sobre a construção de um sistema ideal. Apenas 5 respondentes de cada um dos grupos são suficientes para fornecer dados conclusivos suficientes. Como resultado, você obterá uma enorme quantidade de insights sobre os processos atuais e novas entradas.

Etapa 3: Faça Pesquisa Quantitativa

Realizar um estudo quantitativo para cada um dos segmentos de público-alvo. Para fazer isso, colete uma lista de componentes futuros e peça a cada designer/desenvolvedor para estimar quanto tempo leva para criar um componente no momento.

Emita a média aritmética para cada um dos indicadores. Como resultado, você obterá uma tabela semelhante.

Etapa 4. Estime o retorno do investimento (ROI)

Crie uma tabela com base nos dados recebidos. Preencha-o com todos os seus componentes futuros e dados de tempo que você coletou dos membros da equipe. Nas colunas adjacentes, adicione o custo médio por hora para um desenvolvedor e um designer (se você não tiver dados da empresa, poderá obter dados de mercado). E, claro, o número de projetos individuais que existem ou estão planejados para serem lançados em sua empresa.

Como resultado, você obterá valores específicos para o custo de desenvolvimento de um sistema de design e a quantidade de dinheiro e tempo economizados, bem como o custo de desenvolvimento no contexto de cada componente. É claro que esses números não são totalmente precisos, mas mostram o quadro geral e permitem que você justifique os custos para a administração/investidores. Para cálculos mais precisos, você pode adicionar o tempo de desenvolvimento de cada produto e o número de implementações de cada componente nele.

O que mostra?

Se você não vê economias significativas em dinheiro e tempo, provavelmente não precisa de um sistema de design. E isso é normal, não adianta seguir tendências cegamente e criar um produto que não compensa. Se você deseja garantir a integridade do estilo visual, pode criar um guia de estilo simples e confiar nele com segurança ao projetar a interface do usuário.

Se seu objetivo é acelerar o desenvolvimento e garantir consistência nos padrões do usuário, você pode usar qualquer sistema de design de código aberto, como Material, Carbon ou Ant. Além disso, simplificará bastante o dimensionamento do produto e você sempre poderá personalizar os estilos para o seu livro de marca.

Caso você entenda claramente que precisa de um sistema de design e precisa fazê-lo do zero, não se esqueça de definir KPIs e coletar métricas para avaliar regularmente sua eficácia.