paint-brush
Sistemas de design: a chave para dimensionar seus aplicativos com eficiênciapor@elevenspace
413 leituras
413 leituras

Sistemas de design: a chave para dimensionar seus aplicativos com eficiência

por Eleven Space8m2023/04/27
Read on Terminal Reader

Muito longo; Para ler

Um sistema de design é uma coleção de regras de design, padrões de interação, diretrizes, componentes reutilizáveis e documentação. É um documento vivo que fornece a base para projetar e construir novos recursos, bem como manter os existentes. Ele promove uma melhor comunicação entre designers e desenvolvedores, garantindo um tempo de iteração mais rápido, redução de custos e consistência de design.
featured image - Sistemas de design: a chave para dimensionar seus aplicativos com eficiência
Eleven Space HackerNoon profile picture
0-item
1-item


Expandir a funcionalidade do seu aplicativo é igualmente empolgante e desafiador. Requer muita preparação, pesquisa, contratação de novos membros de equipe, gerenciamento de colaboração entre departamentos e investimento de recursos financeiros consideráveis para construir uma nova arquitetura que possa acomodar uma grande base de usuários e novos recursos.


Antes de decidir embarcar nessa jornada, certifique-se de ter esgotado todas as oportunidades de escalabilidade.

Crescer mantendo os custos no mínimo

Muitos empreendedores confundem "dimensionar" com "crescer" e usam os termos de forma intercambiável, perdendo o enorme potencial de negócios que reside em alcançar mais usuários e aumentar a receita, mantendo os custos e recursos no mínimo. Uma maneira de conseguir isso é integrando um sistema de design ao ciclo de desenvolvimento de seu aplicativo.


Mesmo que os sistemas de design tenham ganhado muita popularidade nos últimos anos, ainda parece haver alguma confusão em torno do conceito, especialmente para aqueles que não são especialistas na área.


Então vamos começar com o básico.

O que é um Sistema de Projeto?

Um sistema de design é uma coleção de regras de design, padrões de interação, diretrizes, componentes reutilizáveis e documentação que pode ser usada na criação de produtos digitais. É um documento vivo que fornece a base para projetar e construir novos recursos, bem como manter os existentes.


Como resultado, promove uma melhor comunicação entre designers e desenvolvedores, garantindo tempo de iteração mais rápido, redução de custos e consistência de design. Isso contribuirá para uma experiência de usuário perfeita.

Componentes do sistema de design

Cada sistema de design é diferente, mas, em geral, abriga 4 pilares principais:


  • Os tokens de design são todos os elementos visuais que definirão os componentes do sistema, como cor, tipografia e sistema de grade. Eles são usados pela equipe de produto para manter um design consistente e servem como base para criar as propriedades da biblioteca de componentes.


  • A biblioteca de componentes reúne elementos interativos que serão usados para construir a interface do aplicativo, como avatares, botões, emblemas, caixas de seleção, seletores de data, elementos de entrada, botões de opção e barras de progresso, apenas para citar alguns. Como mencionado acima, eles são projetados com propriedades específicas baseadas nos elementos da linguagem de design que os tornam dinâmicos. Eles são particularmente importantes para programadores durante o estágio de desenvolvimento.


  • As bibliotecas de padrões abrangem os componentes e tokens de design usados em caminhos comuns dentro de um aplicativo, como menus de navegação e formulários. Comumente implementado com a metodologia de design atômico , isso mostra quando e como os componentes devem ser usados e seus diferentes estados (hover, clique, transição, etc). Isso garante uma experiência consistente para o usuário final do aplicativo.


  • Diretrizes são todas as regras e princípios que os usuários do sistema de design devem levar em consideração ao trabalhar com o sistema. Ele serve como um manual que mostra o comportamento e a interação do componente, além de tornar mais eficiente a integração de novos membros.


Agora que abordamos a base, vamos ver como um sistema de design pode ser aproveitado para dimensionar um aplicativo sem a necessidade de investir muitos recursos.

Custos de expansão da funcionalidade do aplicativo

Vamos considerar o exemplo de uma empresa B2C de tecnologia em estágio inicial que enfrenta o desafio de não cumprir os prazos de desenvolvimento de recursos de seus produtos e precisa encontrar uma solução para atender às expectativas de seus stakeholders e investidores.


Sua equipe de produto é formada por 1 x Product Owner, 1 x Designer, 5 x Desenvolvedores (Front e Back-end) e 1 x Quality Assurance.


Exploraremos ainda os possíveis cenários que os tomadores de decisão normalmente considerariam para implementar isso, cobrindo custos e alocação de recursos para cada opção. ‍

Opção A : neste caso, eles podem atribuir membros da equipe existentes para dar suporte à nova funcionalidade além de suas tarefas diárias e contratar especialistas baseados em projetos para lidar com a carga de trabalho adicional. Isso requer recursos financeiros consideráveis para suportar o custo extra de mão de obra, além do longo tempo necessário para integrar os novos membros.


A alternativa para tudo isso é investir em um sistema de design.


Opção B: terceirizar o desenvolvimento do sistema de design para uma agência de design dedicada e projetar o caminho da assinatura internamente depois que o sistema estiver em vigor.


Opção A

Opção B

Mão de obra adicional

1 x UX Designer ( média salário/h: 49$ )
2 x Desenvolvedores ( média salário/hora: 57$ Desenvolvedor front-end )

Agência de design/freelancer ( min. $ 60/h mas a taxa depende da localização e experiência da agência)

Prazo de implementação do projeto

- Recrutamento: mín. 1 mês (scouting, entrevista, papelada)
- Integração: 2 semanas
Design de caminho de assinatura: 1 mês (pesquisa, wireframes, design, teste, loops de feedback e atualizações)
- Desenvolvimento do caminho da assinatura: 2 meses
- Teste e otimização: 2 semanas

- Recrutamento de agências de UI/UX e configuração de colaboração: 2 semanas
- Desenvolvimento do sistema de design: ± 2 meses
- Projeto de caminho de assinatura: 1 semana
- Desenvolvimento do caminho da assinatura: 2 semanas
- Teste e otimização: 3 dias

Tempo total

5 meses

4 meses

Custos adicionais

$ 40k
(1 x Designer $ 8k + 2 x Desenvolvedores $ 32k)

± $ 20k
(por uma média de ±$60/hora para o sistema de design, o próprio caminho de assinatura é desenvolvido pela equipe existente, portanto não é considerado um custo adicional)

Com base nos cenários acima, além de ser muito mais eficiente começar a pensar em implementar um sistema de design para lançar o caminho da assinatura mais rapidamente, esse é realmente um investimento que trará resultados por pelo menos cinco anos.


Para o propósito deste exercício, oferecemos uma análise básica do tempo e dos recursos necessários para implementar um modelo baseado em assinatura que requer o design e desenvolvimento de um novo caminho para pagamentos do usuário final.


Decidimos optar por uma abordagem minimalista, que seja facilmente compreensível, a fim de mudar o mal-entendido popular de que a implementação de um sistema de design é um trabalho tedioso, que requer muito tempo e recursos. Por esse motivo, muitos empreendedores tendem a adiar a adoção, perdendo a oportunidade de realmente automatizar e otimizar seus negócios.


Claro que esse cálculo será diferente de acordo com o caso específico de cada negócio e incentivamos os empreendedores a analisarem seus custos reais, caso a caso.

Agora vamos nos aprofundar mais para ver por que as startups em crescimento devem considerar um sistema de design.

Benefícios de um Sistema de Design

Com base em nossa experiência, a implementação de um sistema de design aumentou a velocidade de design e implementação em 65% em uma equipe de ciclo completo, reduzindo o trabalho de um sprint de duas semanas, de 10 dias para 3,5 dias. Leva alguns meses para construí-lo e configurá-lo, mas toda vez que uma equipe opta por essa abordagem, eles obtêm resultados fantásticos.

  1. Reduza a carga de trabalho e os custos Um dos principais benefícios de um sistema de design é a escalabilidade. Uma vez que todos os componentes tenham sido projetados, é fácil duplicá-los e fazer pequenos ajustes com base em necessidades específicas.


    Dessa forma, em vez de ter que começar do zero toda vez que seu aplicativo precisar de um novo recurso, sua equipe pode selecionar partes do sistema de design e criar com base nelas. Em vez de perder tempo decidindo como um botão deve ser, eles podem se concentrar em aspectos mais importantes do negócio, como melhorar os fluxos de usuários ou resolver problemas que não apenas diminuem os custos, mas também geram fluxo de caixa adicional.


  2. Melhore a colaboração entre equipes

    Com um sistema de design implantado, designers e desenvolvedores podem colaborar com mais eficiência porque têm acesso às mesmas informações — como padrões e componentes de interface do usuário — em todos os projetos. Ele reduz os ciclos de feedback e incontáveis horas desperdiçadas em reuniões e elimina as suposições. O processo se torna mais previsível e a integração fica mais fácil. Sempre que um novo membro se junta à equipe, a documentação do sistema de design permitirá o alinhamento da equipe.


  3. Implantação rápida do produto

    Os sistemas de design podem reduzir o tempo necessário para integrar novos designers, fornecendo-lhes exemplos e diretrizes. Isso significa que eles podem começar a contribuir mais rapidamente e, como resultado, sua equipe ficará mais coesa. Ele permite que você dimensione sua equipe usando os mesmos padrões repetidamente. Isso se traduz em menos tempo gasto no treinamento de novos funcionários e mais tempo gasto na criação de ótimos produtos.


    Os sistemas também ajudam os desenvolvedores a entender como as coisas devem parecer e sentir. Eles podem consultar o guia de estilo ao criar novos recursos ou fazer alterações nos existentes e não perder tempo com a estética. Isso garante que tudo pareça consistente em todas as plataformas e dispositivos.


  4. Aumentar a Retenção de Clientes

    Uma experiência intuitiva e bem pensada tem o poder de aumentar a conversão e fidelizar o cliente o que gera um efeito composto no longo prazo.


    Como observa o Nielsen Norman Group: “Se uma tarefa foi particularmente fácil de realizar em comparação com as expectativas do usuário, essa experiência pode ter um efeito positivo em relação ao produto – o usuário provavelmente recomendará o produto a um amigo e se tornará um usuário recorrente” .

    Consistência, melhor colaboração da equipe e alocação inteligente de recursos contribuem para criar uma experiência perfeita para seus clientes em todas as plataformas e no aplicativo, preparando o terreno para o crescimento de longo prazo de maneira eficiente.

Opções de adoção do sistema de design

Se você já começou a pensar em como integrar esses benefícios ao seu negócio, deve escolher entre duas opções de adoção:


  • Criando um sistema de design personalizado

  • Adaptar um já existente, como um open-source


É essencial ter uma compreensão clara das necessidades da sua organização antes de configurar um projeto de sistema de design e avaliar cuidadosamente as compensações.


Se uma organização tiver requisitos específicos que não podem ser atendidos por um sistema de design de código aberto, será um bom investimento criar um sistema de design personalizado.


Para testar um sistema de design, você pode verificar alguns dos sistemas de código aberto mais populares:

Porcentagem de opções de sistema de design de código aberto usadas ou experimentadas entre 2019-2021 | Fonte


Pensamentos finais

Há muitas maneiras de abordar a expansão de aplicativos, mas os sistemas de design fornecem uma base robusta para escalabilidade eficiente, representando assim uma solução para todo o sistema à prova de futuro. Não só traz vantagens de longo prazo, mas nosso cálculo rápido prova uma escolha financeira ainda mais inteligente para planos imediatos.


Ao usar sistemas de design, podemos reduzir a quantidade de tempo gasto reinventando a roda, melhorar a consistência entre os produtos e reduzir custos reutilizando componentes em vez de construí-los do zero todas as vezes.


Originalmente publicado aqui