Criar padronização visual de componentes para os produtos digitais desenvolvidos pela
Wiz Soluções.
Contextualização
O Design System é um ecossistema que agrupa um conjunto de padrões para
design e código, componentizado, que unifica as duas práticas onde ambas atuações podem usufruir.
Ao fazer isso,
beneficia de duas formas principais:
• Garante consistência visual e de codificação
• Acelera tanto a prototipação quanto a implementação front-end
beneficia de duas formas principais:
• Garante consistência visual e de codificação
• Acelera tanto a prototipação quanto a implementação front-end
Métodos e ferramentas utilizadas em cada etapa deste projeto
Solução
Utilizar o Angular Material como base para criar biblioteca do Design System - SYZ 2.0 da Wiz Soluções no Figma
Utilizar o Angular Material como base para criar biblioteca do Design System - SYZ 2.0 da Wiz Soluções no Figma
SYZ 1.0 - O início de tudo...
O SYZ é o Design System da Wiz, nele se concentram práticas e orientações de uso e aplicação visual. A implementação do SYZ 1.0 nos produtos Wiz foi de grande avanço e aparato no seu lançamento. Garantiu uniformidade e padrão visual em nossos produtos e, ainda otimizou suas implementações para o time de front-end e de design.
Mas ao decorrer do amadurecimento digital dos produtos digitais, códigos passaram a ser atualizados, novas bibliotecas foram tomando espaço nos projetos e o SYZ caiu em desuso entre o time de design e desenvolvimento.
O SYZ é o Design System da Wiz, nele se concentram práticas e orientações de uso e aplicação visual. A implementação do SYZ 1.0 nos produtos Wiz foi de grande avanço e aparato no seu lançamento. Garantiu uniformidade e padrão visual em nossos produtos e, ainda otimizou suas implementações para o time de front-end e de design.
Mas ao decorrer do amadurecimento digital dos produtos digitais, códigos passaram a ser atualizados, novas bibliotecas foram tomando espaço nos projetos e o SYZ caiu em desuso entre o time de design e desenvolvimento.
Mas qual o contexto do SYZ nas squads?
Para compreender o uso do SYZ nos produtos digitais, foi aplicado uma rodada de entrevistas
com o perfil de desenvolvedor e designer das squads em atuação. Entre os perfis, estavam novos
e antigos colaboradores da empresa, especialistas de cada vertical de tecnologia e colaboradores terceirizados.
Para as entrevistas, foi construído um roteiro semi-estruturado para dar espaço para a conversa fluir e novas perguntas serem incluídas durante a entrevista sem desviar do foco principal. Acesse o roteiro completo aqui.
com o perfil de desenvolvedor e designer das squads em atuação. Entre os perfis, estavam novos
e antigos colaboradores da empresa, especialistas de cada vertical de tecnologia e colaboradores terceirizados.
Para as entrevistas, foi construído um roteiro semi-estruturado para dar espaço para a conversa fluir e novas perguntas serem incluídas durante a entrevista sem desviar do foco principal. Acesse o roteiro completo aqui.
As principais perguntas mapeadas foram:
• Você usa o SYZ?
• Qual sua familiaridade com o SYZ?
• Qual é o principal fator que te incentiva a usar o SYZ?
• Tem algum projeto em operação que você sustenta de alguma forma? Como?
• De 1 a 5, como você classifica o nível de maturidade de projeto da sua squad relacionada ao SYZ?
• E quais mudanças trariam os maiores benefícios na sua opinião em relação ao design system?
• Você usa o SYZ?
• Qual sua familiaridade com o SYZ?
• Qual é o principal fator que te incentiva a usar o SYZ?
• Tem algum projeto em operação que você sustenta de alguma forma? Como?
• De 1 a 5, como você classifica o nível de maturidade de projeto da sua squad relacionada ao SYZ?
• E quais mudanças trariam os maiores benefícios na sua opinião em relação ao design system?
| Ao total, foram 37 pessoas entrevistadas e coletado 47 insights sobre o SYZ da Wiz.
Insights das entrevistas diferenciados por cores que representam cada squad.
O que os insights contam?
Durante as entrevistas foi possível constatar a subtilidade e baixa popularidade do SYZ entre os times e processos de desenvolvimento, além também de nenhuma padronagem nos produtos
das squads.
Com o time de desenvolvimento, o SYZ já havia sido superado por bibliotecas gratuitas disponíveis na rede. Além de facilitar o uso, era mais próximo da linguagem de programação popular entre o time. A troca rápida e fácil, em grande parte por conta da dificuldade de implementação e quebra
de códigos.
das squads.
Com o time de desenvolvimento, o SYZ já havia sido superado por bibliotecas gratuitas disponíveis na rede. Além de facilitar o uso, era mais próximo da linguagem de programação popular entre o time. A troca rápida e fácil, em grande parte por conta da dificuldade de implementação e quebra
de códigos.
Gráfico 01 - Referente ao uso do SYZ
Com o time de desenvolvimento, o SYZ já havia sido superado por bibliotecas gratuitas disponíveis na rede. Além de facilitar o uso, era mais próximo da linguagem de programação popular entre o time. A troca rápida e fácil, em grande parte por conta da dificuldade de implementação e quebra
de códigos.
de códigos.
Ainda assim, necessitam codar muitos dos componentes criados pelos designers devido a personalização da demanda. O que consome muito tempo para desenvolver os componentes sendo necessário buscar em várias bibliotecas a base.
Gráfico 02 - Referente ao uso do SYZ
Já o time de designers não desistiu do uso de alguns componentes do SYZ, mas raras as vezes
em que estavam presentes em algum layout dos produtos digitais. Além da peculiaridade de cada produto exigir um componente personalizado, os componentes mais comum como botões e check boxs eram reciclados ou reutilizados de outros produtos, gerando uma biblioteca secundária e particular de cada designer.
Descobrimos que muitos componentes iguais ou com mesma funcionalidade foram criados por diferentes designers, demonstrando falta de unificação entre o design team e a biblioteca SYZ.
em que estavam presentes em algum layout dos produtos digitais. Além da peculiaridade de cada produto exigir um componente personalizado, os componentes mais comum como botões e check boxs eram reciclados ou reutilizados de outros produtos, gerando uma biblioteca secundária e particular de cada designer.
Descobrimos que muitos componentes iguais ou com mesma funcionalidade foram criados por diferentes designers, demonstrando falta de unificação entre o design team e a biblioteca SYZ.
O tempo investido nos componentes novos gera refação desnecessária e aumenta o tempo mínimo necessário de execução estimado. Além disso, outros pontos também foram mapeados como:
• Falta de otimização de tempo
• Não padronização visual dos componentes nos produtos
• SYZ desatualizado (visual e código)
• Dificuldade/ falta de pack de ícones coerente
• Produtos possuem necessidades que são personalizadas
• Bibliotecas da rede são mais requisitadas
How Might We
• Como poderíamos tornar o SYZ popular entre os produtos?
• Como poderíamos criar um SYZ completo?
• Como poderíamos facilitar a implementação de código para o dev?
• Como poderíamos oferecer suporte e acompanhamento técnico?
• Como poderíamos reaproveitar componentes criados pelos designer?
• Como poderíamos otimizar o tempo do dev e designer com o uso do SYZ nos produtos?
• Como poderíamos criar um SYZ sem alto orçamento disponível?
• Como poderíamos tornar o SYZ popular entre os produtos?
• Como poderíamos criar um SYZ completo?
• Como poderíamos facilitar a implementação de código para o dev?
• Como poderíamos oferecer suporte e acompanhamento técnico?
• Como poderíamos reaproveitar componentes criados pelos designer?
• Como poderíamos otimizar o tempo do dev e designer com o uso do SYZ nos produtos?
• Como poderíamos criar um SYZ sem alto orçamento disponível?
Mapeamento de oportunidades
Após todo o levantamento de dados das entrevistas e o cenário da biblioteca atual do SYZ, as oportunidades em oferecer uma biblioteca mais completa em informações, de prático desenvolvimento e oferecer orientação técnica, de fácil suporte, manutenção e execução a todos. Conheça algumas das oportunidades mapeadas:
Após todo o levantamento de dados das entrevistas e o cenário da biblioteca atual do SYZ, as oportunidades em oferecer uma biblioteca mais completa em informações, de prático desenvolvimento e oferecer orientação técnica, de fácil suporte, manutenção e execução a todos. Conheça algumas das oportunidades mapeadas:
Mapeamento de oportunidades
Matriz de Impacto X Esforço
Saber priorizar cada oportunidade do produto, é um ponto chave para iniciar o seu desenvolvimento. Com a intenção de oferecer funcionalidades iniciais essenciais para conquistar o usuário e oferecer a uma experiência que trará mais qualidade de vida a ele. Através da Matriz de Impacto X Esforço, podemos analisar as oportunidades e priorizar cada uma delas e decidir o que poderá ser oferecido como primeira entrega do produto.
Saber priorizar cada oportunidade do produto, é um ponto chave para iniciar o seu desenvolvimento. Com a intenção de oferecer funcionalidades iniciais essenciais para conquistar o usuário e oferecer a uma experiência que trará mais qualidade de vida a ele. Através da Matriz de Impacto X Esforço, podemos analisar as oportunidades e priorizar cada uma delas e decidir o que poderá ser oferecido como primeira entrega do produto.
Matriz de Impacto x Esforço com as principais oportunidades do projeto
Proposta de Solução
Com o estudo realizado até aqui, não há dúvidas de que o SYZ é relevante para o desenvolvimento e otimização de tempo na construção dos produtos digitais.
Com o estudo realizado até aqui, não há dúvidas de que o SYZ é relevante para o desenvolvimento e otimização de tempo na construção dos produtos digitais.
A baixa popularidade de uso do SYZ atualmente entre devs e designers é desafiadora e ao mesmo tempo, dispõe de muitas oportunidades de melhorias. Devido ao baixo orçamento e pouco tempo para implementação de uma biblioteca própria ou paga, o caminho foi buscar alternativas econômicas para solucionar a demanda. Criando assim, o SYZ 2.0.
Inspirado na metodologia de Atomic Design de Brad Frost, que consiste em aplicar a química na estrutura de design, as soluções propostas foram:
Inspirado na metodologia de Atomic Design de Brad Frost, que consiste em aplicar a química na estrutura de design, as soluções propostas foram:
1 - Utilizar Angular Material como biblioteca base dos componentes do SYZ
2 - Concentrar a biblioteca do SYZ no Figma (Ferramenta de prototipação do Design Team)
• Espaço para centralizar materiais de orientação
• Centralizar conteúdos de marketing e style guide
• Centralizar ícones do Google Icons
• Espaço para centralizar materiais de orientação
• Centralizar conteúdos de marketing e style guide
• Centralizar ícones do Google Icons
3 - Criação do NG-SYZ para acolher componentes desenvolvidos pelo Design Team fora do SYZ
• Criação de fluxos
• Componentes que podem ser reutilizáveis em outros produtos
• Criação de fluxos
• Componentes que podem ser reutilizáveis em outros produtos
4 - Criar o fluxo de colaboração para incentivar a colaboração do Design Team
1- Biblioteca do Angular Material
Desk research
Devido ao baixo orçamento para implementação, o tempo a ser investido e a falta de um time dedicado, a proposta é utilizar de bibliotecas gratuitas disponíveis no mercado para compor o SYZ 2.0. Para compreender a que melhor se encaixa, foi realizada uma desk research para comparar as bibliotecas e definir a escolhida. A decisão foi tomada junto com a vertical de Front-end.
De acordo com StackOverflow, cerca de 40,14% dos 67k entrevistados em 2021 escolheram React, enquanto 22,96% mantiveram suas mãos na Angular. Como mostra no gráfico abaixo:
De acordo com StackOverflow, cerca de 40,14% dos 67k entrevistados em 2021 escolheram React, enquanto 22,96% mantiveram suas mãos na Angular. Como mostra no gráfico abaixo:
Gráfico 03 - Preferência de biblioteca dos entrevistados
Análise competitiva
O resultado final da desk reserach resultou em uma análise competitiva das duas bibliotecas mais citadas: A React e a Angular Material. Para uma comparação mais fiel, colocamos lado a lado cada funcionalidade das bibliotecas. As células em cor vermelha significam desvantagem, em verde significam vantagem. Segue abaixo:
Tabela de comparação entre React e Angular Material
O Angular parece mais complexo. Portanto, um desenvolvedor precisa se concentrar e dedicar muito tempo ao aprendizado do Angular. No entanto, Angular é muito mais fácil de manter e expandir, especialmente quando se trata de aplicativos e projetos em larga escala. Por isso, a biblioteca escolhida é a Angula Material.
2 - SYZ no Figma
Para propor a integração entre os produtos e a biblioteca, a construção do SYZ 2.0 está sendo realizada na nossa principal ferramenta de prototipação: O Figma. Todo o Design Team tem acesso e permissão para edição (dentro do fluxo de edição). Para que a nossa biblioteca de componentes no Figma seja fidedigna com a biblioteca do Angular Material, a realização de um depara com os componentes existentes hoje.
Para a organização do SYZ no Figma, usamos como referência quatro bibliotecas que seguem a estrutura dentro do Figma. São elas:
Para propor a integração entre os produtos e a biblioteca, a construção do SYZ 2.0 está sendo realizada na nossa principal ferramenta de prototipação: O Figma. Todo o Design Team tem acesso e permissão para edição (dentro do fluxo de edição). Para que a nossa biblioteca de componentes no Figma seja fidedigna com a biblioteca do Angular Material, a realização de um depara com os componentes existentes hoje.
Para a organização do SYZ no Figma, usamos como referência quatro bibliotecas que seguem a estrutura dentro do Figma. São elas:
Coleta de referências de Design Systems no Figma
Estrutura das páginas no arquivo
A estrutura das páginas no arquivo SYZ 2.0 do Figma tem o objetivo de categorizar e facilitar o acesso do designer no momento da busca. Ela foi separada da seguinte forma:
Demonstração da estrutura das páginas do SYZ 2.0 no Figma
Estrutura das páginas de componentes
A estrutura das páginas de componentes dentro do Figma tem o objetivo de demonstrar e orientar o uso de cada componente individualmente. Como mostrado abaixo:
Demonstração de estrutura das páginas de componentes do SYZ no Figma
Conteúdo das páginas
Cada página está destinada a determinado grupo de conteúdo segmentados e agrupados pelas similaridades em cada um deles. Acompanhe abaixo:
Estrutura e contexto das páginas no Figma
3 - NG-SYZ no Figma
A criação do NG-SYZ foi uma iniciativa da vertical de Front-end para acolher e registrar componentes desenvolvidos pelo Design Team fora da biblioteca disponível do SYZ 2.0.
A criação do NG-SYZ foi uma iniciativa da vertical de Front-end para acolher e registrar componentes desenvolvidos pelo Design Team fora da biblioteca disponível do SYZ 2.0.
A cada novo componente criado, será alimentado a biblioteca do NG-SYZ, que nada mais é do que nossa biblioteca de componentes mas com “pegada” de Angular Material.
Assim foi criado o catálogo de componentes do NG-SYZ no Git Hub, que reúne um conjunto de componentes desenvolvidos pelo Dev Team tendo o Angular Material como base, e que são candidatos a reuso em outros produtos. Abaixo, você pode conferir a estrutura dos componentes:
Assim foi criado o catálogo de componentes do NG-SYZ no Git Hub, que reúne um conjunto de componentes desenvolvidos pelo Dev Team tendo o Angular Material como base, e que são candidatos a reuso em outros produtos. Abaixo, você pode conferir a estrutura dos componentes:
Ecossistema de componentes desenhada pela vertical de Front-End
4 - Fluxo de colaboração
O processo de colaboração do SYZ, visa orientar a adição ou atualização de conteúdos, componentes e elementos necessários para construção e manutenção dos produtos Wiz. A colaboração do Design Team com o SYZ 2.0 no Figma contribui para:
• Disponibilizar novas criações para uso nos produtos
• Editar conteúdos já existentes mantendo-os atualizados de acordo com mudanças ou necessidades
• Atender necessidades mapeadas pelo time
• Aprimorar qualidade ou detalhamento
• Otimizar rotina de criação e desenvolvimento
• Disponibilizar novas criações para uso nos produtos
• Editar conteúdos já existentes mantendo-os atualizados de acordo com mudanças ou necessidades
• Atender necessidades mapeadas pelo time
• Aprimorar qualidade ou detalhamento
• Otimizar rotina de criação e desenvolvimento
O Fluxo de Colaboração tem como objetivo orientar o processo de colaboração com a biblioteca, visa mais autonomia do designer, padronização e consistência do SYZ no Figma. Através dele, você acompanha o passo a passo detalhado e todos os atores envolvidos até a oficialização da colaboração sugerida e até onde
ela impacta.
Imagem do Fluxo de Colaboração do SYZ 2.0
Tá, mas o time usa mesmo?
A resposta é sim! Com a pesquisa quantitativa lançada após 3 meses de implementação do SYZ 2.0 com o Design Team, as respostas foram positivas quanto a sua utilização e otimização de tempo em relação a vertical de design.
Já não podemos dizer o mesmo sobre o NG-SYZ. Através da pesquisa foi confirmado que o Design Team ainda não adotou completamente a biblioteca do NG-SYZ e uma pessoa do time não tem conhecimento da biblioteca secundária. Pode ser resultado de desinformação nos nossos repositórios ou falta de reforçar a divulgação e utilização entre o time.
A resposta é sim! Com a pesquisa quantitativa lançada após 3 meses de implementação do SYZ 2.0 com o Design Team, as respostas foram positivas quanto a sua utilização e otimização de tempo em relação a vertical de design.
Já não podemos dizer o mesmo sobre o NG-SYZ. Através da pesquisa foi confirmado que o Design Team ainda não adotou completamente a biblioteca do NG-SYZ e uma pessoa do time não tem conhecimento da biblioteca secundária. Pode ser resultado de desinformação nos nossos repositórios ou falta de reforçar a divulgação e utilização entre o time.
Alguns resultados da pesquisa quantitativa aplicada ao Design Team
Mas como podemos pedir o uso e aplicação correta do SYZ nos produtos digitais da Wiz?
A utilização do Syz no desenvolvimento dos produtos digitais é tão importante na Wiz que foram criados alguns mecanismos para medir sua adesão. Temos a meta de atingir 70% de adesão
em 2022.
em 2022.
Além disso, o uso do Figma Libraries torna possível mapear os componentes mais utilizados em cada equipe do Figma e entender as particularidades individuais do produto, que nos proporciona exatamente a visão que precisamos para aprimorar cada vez mais o SYZ 2.0 e entender o seu uso e aplicação no ecossistema da Wiz.
Embora a medição seja realizada levando-se em conta a implementação dos componentes no código pelo dev frontend, nós designers somos co-responsáveis pelo sucesso ou insucesso do Syz.
Embora a medição seja realizada levando-se em conta a implementação dos componentes no código pelo dev frontend, nós designers somos co-responsáveis pelo sucesso ou insucesso do Syz.
Imagina só se não pesquisarmos com cuidado e atenção as bibliotecas que compõe o nosso sistema de design, e criarmos novos componentes sem necessidade? Ou induziremos o dev ao erro, ou daremos trabalho dobrado, exigindo que ele faça esse trabalho de pesquisa para verificar possíveis substituições do componente proposto inicialmente.
O que podemos esperar do SYZ 2.0 a partir de agora?
Em conjunto com o Design Team, vamos aprimorando cada vez mais o SYZ 2.0 ao mapear necessidades e demandas dos produtos e dos designers, seja através de 1:1 ou pesquisas qualitativas. Os próximos passos consistem em:
• Mapear e mensurar o uso e aplicação do SYZ nos produtos digitais da Wiz pelos próximos 6 meses versus a quantidade de novos produtos e/ou implementações versus atualização de produtos já existentes e ativos
• Mapear e mensurar o uso e aplicação do SYZ nos produtos digitais da Wiz pelos próximos 6 meses versus a quantidade de novos produtos e/ou implementações versus atualização de produtos já existentes e ativos
• Avaliar a qualidade de código e implementação dos componentes disponíveis
• Mensurar e incentivar a aderência do NG-SYZ entre as squads e produtos
• Testar o Fluxo de Colaboração com o Design Team
Aprendizados finais
Nem sempre, investimento de tempo e orçamento representam o caminho ideal para adquirir uma biblioteca personalizada. Mesmo utilizando de bibliotecas gratuitas e disponíveis, não há razões para acreditar que isso poderá de alguma forma prejudicar os projetos nos quais serão utilizadas.
O impacto de componentes personalizados nos produtos da Wiz seria baixa, e não interfere de forma alguma na experiência do usuário ao interagir com eles, pelo contrário, utilizar de bibliotecas prontas pode ser uma ótima alternativa para quem quer iniciar o design system na empresa e criar a cultura do time de devs e designers.
