O Design System nasceu! E agora? Como manter ele funcionando?

Thaise Cardoso
Visual Designer
,
Easynvest
UPDATE:

A pandemia mudou tudo em 2020.
Por isso este artigo foi revisitado por quem escreveu em entrevista para o UXNOW com apoio da Deeploy.me

Imperdível!

Ouça este artigo

Artigo narrado por quem escreveu!

Em 2019 muito se foi falado sobre criação de Design Systems, Metodologias, Princípios e tudo mais. Só que, todo case que achamos na internet parece perfeito, poucas pessoas falam sobre erros e isso gera muitas frustrações em quem está começando.

O assunto que eu realmente sinto falta é “como manter um Design System?”. Poucas pessoas falam sobre e há poucos artigos também. Nada é perfeito e sempre aparecerá uma variável que vai fazer você se perguntar “O que devo fazer agora?”.

Vou te deixar um pouco mais tranquilo(a) contando a minha experiência sobre como entendemos que deveria existir uma Governança do Design System.

Iniciamos nosso projeto já tendo uma biblioteca de Design, com componentes que atendiam perfeitamente os Product Designers. Até aí, tudo bem, mas não conseguíamos fazer tudo sozinhos e, na atual situação, não podíamos tirar os devs de seus respectivos squads.

Uma das principais soluções foi criar uma reunião semanal com os pontos focais de cada plataforma para estruturarmos e irmos criando os componentes juntos. Em uma dessas reuniões, fomos questionados sobre alguns processos, como: “Quando teremos especificação dos componentes?”, “Vocês fazem algum tipo de alinhamento com os Designers?”, “Por que os Designers estão alterando componentes?”, “Vocês não fazem um “Code Review” de Design?”.

Perguntas que já deveríamos ter as respostas antes de iniciarmos o projeto.

O que podemos concluir com isso então? Faltavam processos de governança!

Então, criamos alguns processos. O primeiro foi dar autonomia aos desenvolvedores para que eles conseguissem se comunicar com os designers. A outra dor foi como manteríamos a consistência dos itens da biblioteca sem limitar a criatividade dos Designers?Para conseguir resolver essa e outras questões, de início tivemos a ideia de gerar um pequeno fluxograma de como funcionaria a criação de componentes, esse que separamos em sete partes:

1 - Ideia

É quando o Designer vê a necessidade de criar um componente para atender a demanda em andamento, sempre pedimos para eles verificarem se não tem nada de parecido em nossa Biblioteca que posso ser utilizada, caso não tenha, seguimos para a próxima etapa.

2 - Validação

Nessa etapa o Designer deverá trazer a Ideia, componente ou bug, para nós - Área de Design Ops - para entendermos e validar se de fato há essa necessidade. Ajudamos a entender não só a necessidade, mas sim, a funcionalidade do componente, tendo em vista que já tivemos problemas de tentarem mudar a funcionalidade e isso atrapalharia o processo de onboarding de um Design recém-chegado, assim como a vida do DEV tendo que alterar a funcionalidade de algo pré-definido. Por isso, nessa etapa tentamos validar com os Desenvolvedores também.

3 - Especificação

Nessa parte voltamos para o Designer responsável pela criação do componente, ele deve nos explicar como o componente vai funcionar e quais serão seus comportamentos.
O DEV precisa disso para a construção, sem a especificação tudo pode acontecer e isso seria uma loucura.

4 - Inclusão na Biblioteca de Design e no Zeplin

Depois da ideia passar pela validação e especificação, nós criamos as variações do componente na nossa biblioteca e subimos no Zeplin, em um projeto de componentes que está dividido para cada plataforma, aqui trabalhamos com Web, Android e IOS.
É através esses projetos que os DEVs também sabem o que tem ou não no Design System.

5 - Construção do Componentes

Seguimos então para a etapa cinco, que é a criação do componente. Essa etapa é dedicada exclusivamente aos DEVs, onde eles irão codar seguindo as especificações e se baseando nos estados definidos e inclusos no Zeplin, depois de criados eles também já fazem os testes unitários para validação deles.

6 – Documentação

A documentação é algo que ainda precisamos aprimorar. Já estamos construindo, mas ainda falta bastante coisa. Nessa etapa iremos descrever qual a finalidade do componente, como ele deve se comportar e como deve ou não ser usado. Seria uma documentação maior e baseada nas especificações para que qualquer pessoa que leia, entenda para que serve e em qual contexto aquele componente deve ser usado.

7 – QA

Iremos validar se aquele componente está seguindo todas as especificações proposta pelo Designer, tanto funcionalmente quanto visualmente. Se “OK”, o componente segue para produção, se “NOK” o componente volta para o DEV realizar os devidos ajustes.

Com tudo isso, conseguimos matar parte dos problemas. Mas, para continuarmos mantendo a consistência do nosso Design System, incluímos também o Design Review, que nada mais é do que o Designer apresentar seu projeto para nós antes de ser apresentado para a Squad. Lembra que eu comentei sobre funcionalidades de componentes? Nesse processo conseguimos pegar muito disso e é muito bom para mantermos a saúde do nosso produto.

Esses pequenos processos já nos ajudaram muito e foi a maneira que encontramos para acompanhar a validação dos componentes criados e melhorar nossos processos para mantermos a consistência. Lembrando que, pode ser que para você esse processo não funcione da mesma maneira. Uma coisa que costumo dizer é que “Nada é uma verdade absoluta”, então o que é certo para mim, pode não ser para você, mas podemos aprender juntos. Então, compartilhe seus aprendizados, tudo de bom e de ruim que aconteceu em sua jornada e lembre-se de já criar processos antes de iniciar o seu Design System, muitas complicações e dores de cabeça podem ser evitadas.

Depois me conta!  😉 

Não perca novos artigos no site e no podcast!
Não quero mais ver isso
Patrocinado:
Dados computados com sucesso!

(Essa mensagem não foi escrita por um UX Writer)
Vixi Maria! Algo errado não está certo...

Pode tentar de novo?

Se não conseguir, pode memandar um email que eu coloco seu nome da neswletter nem que seja na base do papel e caneta!

Vitor Guerra
vitor@pulegada.com.br
Thaise Cardoso
Visual Designer
,
Easynvest

Há mais de 8 anos na área, atualmente trabalho na Easynvest na área de Design Ops. Sendo uma das responsáveis pela criação do Design System, minha missão é unificar a linguagem dos nossos produtos e fornecer insumos para os Product Designers desenvolverem novas funcionalidades :)

A história por trás do Design 2020, via Design Team

A (in)visibilidade da acessibilidade e inclusão nos eventos de Design

Ana Cuentro
Revisado após a pandemia
disponível em áudio
Ana Cuentro

O que é o design centrado no usuário se não são as pessoas?

Priscila Siqueira de Alcântara
Revisado após a pandemia
disponível em áudio
Priscila Siqueira de Alcântara

Desenhando o futuro

Natalí Garcia
Revisado após a pandemia
disponível em áudio
Natalí Garcia

Uma visão holística de Acessibilidade, UX e Dados como soluções que atendam a todos

Liliane Claudia
Revisado após a pandemia
disponível em áudio
Liliane Claudia

Designers em (form)ação

Thiago Esser
Revisado após a pandemia
disponível em áudio
Thiago Esser

O criatividade das cavernas

Thalita Lefer
Revisado após a pandemia
disponível em áudio
Thalita Lefer

O iminente estouro da bolha de UX

Thomaz Rezende Gonçalves
Revisado após a pandemia
disponível em áudio
Thomaz Rezende Gonçalves

UX das Coisas: IoT, design e tecnologia na era dos dados

Thiago Barcelos
Revisado após a pandemia
disponível em áudio
Thiago Barcelos

Você não sabe nada

Bruno Rodrigues
Revisado após a pandemia
disponível em áudio
Bruno Rodrigues

Acessibilidade com foco no usuário

Elias Fernandes
Revisado após a pandemia
disponível em áudio
Elias Fernandes

Os próximos desafios do design

Anderson Gomes da Silva
Revisado após a pandemia
disponível em áudio
Anderson Gomes da Silva

How might we…. Como [nós, designers] podemos construir um 2020 para nos orgulhar?

Letícia Pires
Revisado após a pandemia
disponível em áudio
Letícia Pires

Os assistentes de voz e os desafios de desenhar interfaces conversacionais em 2020

Karina Moura
Revisado após a pandemia
disponível em áudio
Karina Moura

Acessibilidade como ponte de empatia para o diverso

Livia Cristina Gabos Martins
Revisado após a pandemia
disponível em áudio
Livia Cristina Gabos Martins

Ética e Privacidade: UX Research em Cidades Inteligentes

Raquel Cordeiro
Revisado após a pandemia
disponível em áudio
Raquel Cordeiro

Vamos criar novos líderes?

Claudia Mardegan
Revisado após a pandemia
disponível em áudio
Claudia Mardegan

O choque das gerações para a liderança de design

Rodrigo Lemes
Revisado após a pandemia
disponível em áudio
Rodrigo Lemes

Design de produtos digitais em agências

Marcela Hippe
Revisado após a pandemia
disponível em áudio
Marcela Hippe

Como foi seu dia de trabalho?

Paola Sales
Revisado após a pandemia
disponível em áudio
Paola Sales

Design estratégico - como a percepção sistêmica torna meu trabalho mais eficiente

Vilma Vilarinho
Revisado após a pandemia
disponível em áudio
Vilma Vilarinho

Mais atividades, mais designers (e mais dificuldades)

Guilherme Gonzalez
Revisado após a pandemia
disponível em áudio
Guilherme Gonzalez

Chegou a hora da nossa gente bronzeada mostrar seu valor

Guilhermo Reis
Revisado após a pandemia
disponível em áudio
Guilhermo Reis

Os desafios da pesquisa compartilhada

Desirée Sant'Anna Maestri
Revisado após a pandemia
disponível em áudio
Desirée Sant'Anna Maestri

A visão cliente é o ponto de intersecção dos meus “dois mundos”

Denise Rocha
Revisado após a pandemia
disponível em áudio
Denise Rocha

Machine Learning e UX: insights e aprendizados (até agora…)

Carla De Bona
Revisado após a pandemia
disponível em áudio
Carla De Bona

A natureza contraditória de um Product Owner

Hélio Basso
Revisado após a pandemia
disponível em áudio
Hélio Basso

Empreendedorismo feminino em UX Design

Patricia Prado
Revisado após a pandemia
disponível em áudio
Patricia Prado

UX Como SAC

Richard Jesus
Revisado após a pandemia
disponível em áudio
Richard Jesus

Eurocentrismo, Identidade e Negritude

Wagner Silva
Revisado após a pandemia
disponível em áudio
Wagner Silva

Reflexões sobre desenho de experiências com Inteligência Artificial e voz

Melina Alves
Revisado após a pandemia
disponível em áudio
Melina Alves

O Design está morto. Longa vida ao Design!

Al Lucca
Revisado após a pandemia
disponível em áudio
Al Lucca

Desenhando para gigantes

Fares Hid Saba Junior
Revisado após a pandemia
disponível em áudio
Fares Hid Saba Junior

A importância de UI Design em um produto digital e a sua relação com UX

David Arty
Revisado após a pandemia
disponível em áudio
David Arty

Dia da Marmota

Daniel Furtado
Revisado após a pandemia
disponível em áudio
Daniel Furtado

O papel do designer está um pouco amassado. Como ele estará no futuro?

Caio Calderari
Revisado após a pandemia
disponível em áudio
Caio Calderari

Projetar para durar. Uma análise crítica da nossa profissão e dos produtos que projetamos

Filipe Landu Nzongo
Revisado após a pandemia
disponível em áudio
Filipe Landu Nzongo

Desenhar telas não vai salvar o mundo

Bruna Amancio
Revisado após a pandemia
disponível em áudio
Bruna Amancio

Aprenda a atender expectativas e nunca mais (ou quase) lide novamente com frustrações!

Marcelo Sales
Revisado após a pandemia
disponível em áudio
Marcelo Sales

Caminhos; experiências e narrativas

Clécio Bachini
Revisado após a pandemia
disponível em áudio
Clécio Bachini

É hora de falar de ética na construção produtos digitais

Ana Coli
Revisado após a pandemia
disponível em áudio
Ana Coli

O bom design começa dentro de casa

Rodrigo Peixoto
Revisado após a pandemia
disponível em áudio
Rodrigo Peixoto

Por que você precisa fazer a lição de casa

Mao Barros
Revisado após a pandemia
disponível em áudio
Mao Barros

Escolhi ser designer no Brasil, e agora?

Bernardo Carvalho Wertheim
Revisado após a pandemia
disponível em áudio
Bernardo Carvalho Wertheim

O poder da visão holística e do posicionamento estratégico do UX

Priscilla Albuquerque
Revisado após a pandemia
disponível em áudio
Priscilla Albuquerque

Design como um todo

Roberta Nascimento de Carvalho
Revisado após a pandemia
disponível em áudio
Roberta Nascimento de Carvalho

O que você precisa saber sobre métricas para ser um UXer com uma visão 20/20

Allan Cardozo
Revisado após a pandemia
disponível em áudio
Allan Cardozo

Design como ferramenta de exclusão social

Diego Rezende
Revisado após a pandemia
disponível em áudio
Diego Rezende

Formação e organização de times de Design

Victor Zanini
Revisado após a pandemia
disponível em áudio
Victor Zanini

Como fugir da mediocridade

JP Teixeira
Revisado após a pandemia
disponível em áudio
JP Teixeira

Vieses racistas: como combatê-los no design

Karen Santos
Revisado após a pandemia
disponível em áudio
Karen Santos

Seu produto é honesto com o usuário?

Flávio Pires
Revisado após a pandemia
disponível em áudio
Flávio Pires

Indo além das boas práticas de User Experience Design

Rafael Miashiro
Revisado após a pandemia
disponível em áudio
Rafael Miashiro
Design 2020 também está disponível como podcast.

Updates
periódicos!
Ouça no Spotify