Como o Dev Mode ajuda a HP a reduzir 1 hora e meia no processo de design ao desenvolvimento

Um verdadeiro titã da indústria de eletrônicos, a HP é pioneira em tecnologia com uma linha de impressoras, notebooks, sistemas de jogos e muito mais. Na verdade, a garagem onde a empresa começou modestamente em Palo Alto, Califórnia, é hoje um Marco Histórico do estado americano, sendo considerado o “Berço do Vale do Silício.” No entanto, com uma gama tão ampla de produtos, cada um com sua própria base de clientes, manter uma experiência consistente para todos se torna um desafio à medida que a empresa continua a inovar. É aí que entra o sistema de design da HP, o Veneer. Conversamos com a equipe para entender como eles:

• Desenvolveram um design system multicamadas para dar suporte a mais de 70 produtos e quebrar barreiras entre as equipes
• Usaram o Dev Mode para economizar em média 98 minutos por semana para desenvolvedores e designers
• Implementaram o Code Connect para ampliar a adoção do Veneer e reduzir a troca de contextos para os desenvolvedores
• Alcançaram um ROI de 500% em economia de tempo anual e reduziram o tempo de desenvolvimento em 50% com o Veneer

Fale um pouco sobre a sua equipe e como vocês garantem a qualidade dos produtos da HP.

Gilson Hoffmeister, Design Systems Strategist da HP: Nossa equipe gerencia a experiência completa do sistema de design da HP, desde a capacitação em design até plataformas específicas como Android, iOS, Windows e web.

Nosso foco é capacitar as equipes da HP para criar experiências de alta qualidade, consistentes e excepcionais para cada cliente de uma forma eficiente. No entanto, isso pode ser um desafio. A HP é uma grande empresa, com mais de 100 linhas de produtos diversificados. Cada produto HP tem um DNA único. Para os PCs corporativos, busca-se algo elegante e funcional para o uso diário, que transmita confiança aos usuários. Já para os acessórios de jogos, o objetivo é que sejam divertidos e de alta qualidade, algo que as pessoas tenham orgulho de usar e exibir.

Andrei Garcia, Senior Design Manager na HP: Enfrentamos desafios com as diversas unidades de negócios da HP, cada uma seguindo seu próprio caminho e focando em suas próprias necessidades. Muitas vezes, elas trabalhavam de forma isolada, sem muita coordenação sobre como deveria ser a aparência digital da HP. Embora isso não tenha sido feito de propósito, precisávamos juntar todos em um único padrão.

Pode nos falar sobre o Veneer, o design system da HP?

Gilson: Na HP, o objetivo número um é a satisfação do cliente. Com o Veneer, podemos garantir que todo o nosso software seja consistente e funcione bem em conjunto. Ele ajuda todos a seguirem as mesmas diretrizes de design, o que facilita a vida dos nossos diferentes clientes.

Andrei: O Veneer fornece uma base a todos para começar: designers, desenvolvedores, escritores, entre outros, e os apoia ao longo do processo de desenvolvimento de software. O que começou apenas como uma 'biblioteca de componentes de frontend' evoluiu para um sistema multifacetado que economiza tempo, evita trabalho redundante e cria coesão.

Como vocês mensuram a adoção do Veneer?

Gilson: Medimos a adoção do Veneer por meio de uma combinação de métricas quantitativas e qualitativas. Analisando os dados de engajamento da biblioteca do Figma e rastreando os downloads dos nossos pacotes de desenvolvimento, obtemos informações sobre a extensão e a eficácia do uso do sistema. Por exemplo, na nossa biblioteca de Iconografia, observamos que 915 componentes de ícones são utilizados por 320 equipes em toda a HP, com uma média de 85.000 adições por semana, um testemunho do uso extensivo. Curiosidade: o ícone de reticências se destaca como o mais utilizado, com mais de 1,2 milhão de adições.

Por que é importante impulsionar a adoção?

Gilson: Usar o Veneer é fundamental porque acelera o nosso processo de desenvolvimento de produtos e mantém tudo consistente em toda a HP. Com o Veneer, designers e desenvolvedores têm um ponto de partida. Criar componentes do zero leva tempo. Nós retiramos isso da carga de trabalho das pessoas, pois diferentes estados dos componentes e melhores práticas de acessibilidade já estão incorporados, e as equipes não precisam desenvolver e testar as mesmas coisas que já testamos no Veneer. Isso economiza tempo para que as equipes se concentrem em seus negócios e no que precisam entregar.

Gilson: Por exemplo, de janeiro a dezembro de 2023, vimos que o uso do Veneer economizou 500% mais tempo nos projetos em comparação ao tempo gasto para criá-los do zero. Em vez de cada projeto gastar o mesmo tempo construindo esses componentes por conta própria, eles usaram os componentes pré-prontos do Veneer. Isso mostra o quanto o Veneer ajudou a economizar custos e melhorar a eficiência, tornando nosso investimento cinco vezes mais valioso.

Andrei: Quando as equipes optam por não usar o Veneer, isso prejudica significativamente a consistência do produto, a escalabilidade e a eficiência dos desenvolvedores. De acordo com nosso VP of Engineering, Gaurav Roy, o uso do Veneer reduziu o tempo de desenvolvimento de alguns projetos em 50%. Esse benchmark reflete comparações externas, como um estudo da IBM que observou um tempo de desenvolvimento 47% mais rápido para formulários simples quando se usa um design system, comparado a começar do zero.

Antes do Dev Mode, quais desafios a sua equipe enfrentou paraa impulsionar a adoção do Veneer?

Andrei: Um problema significativo era, e ainda é, a quantidade de sub-marcas que a HP possui. É impossível apoiar esse cenário com um design system de camada única. Levou um tempo para estruturarmos o Veneer de forma a ser flexível o suficiente para apoiar uma estratégia de múltiplas marcas. Sem múltiplos níveis de implementação, não conseguiríamos promover alinhamento e consistência entre os diferentes produtos e segmentos.

Gilson: Convencer os designers a usar o Veneer não foi fácil, porqueeles se preocupam muito com seus produtos e com os usuários. Quando algo de fora tenta interferir no que eles estão construindo, isso acende um sinal de alerta, pois eles temem que a abordagem possa prejudicar a relação com seus usuários.

O grande desafio foi mostrar às pessoas o quanto um design system unificado poderia ajudar. Muitos eram acostumados a tomar suas próprias decisões sobre design, como quais componentes usar ou quais cores escolher. Precisamos mostrar que, ao deixarem essas tarefas de lado e utilizarem o Veneer, eles poderiam se concentrar mais nas partes criativas e únicas de seus projetos, como a lógica de negócios e os padrões de design.

Os desenvolvedores acharam mais fácil adotar o Veneer porque compreendiam os benefícios da reutilização de códigos. No entanto, ainda enfrentamos o desafio de garantir que o Veneer fosse eficaz em mais de 40 estruturas de UI e tecnologias frontend utilizadas na HP.

Pode compartilhar como as equipes da HP têm usado o Dev Mode com o seu design system?

O Dev Mode otimizou a forma como nossos desenvolvedores acessam essas especificações de design no Figma, reduzindo a necessidade de discussões e reuniões extensivas e tornando a transição de design para código mais fluida do que nunca.

Andrei: Por exemplo, adicionamos suporte para componentes em forma de pílula e, com isso, precisávamos ajustar os espaçamentos e margens. Usando anotações no Dev Mode, foi mais fácil para os designers apontarem as atualizações para o desenvolvimento e agilizar o fluxo.

A funcionalidade de comparar alterações é extremamente útil para ver o que mudou de uma versão de design para outra, especialmente quando estamos atualizando nossos produtos já existentes. Isso mantém todos na mesma página e torna as atualizações mais fluidas.

Outra vantagem é poder marcar partes do design como “prontas para desenvolvimento”. Isso indica aos nossos desenvolvedores exatamente no que trabalhar, reduzindo a confusão e ajudando todos a focar na execução das tarefas.

Como você está utilizando variáveis com o Dev Mode para ajudar nos desafios de uma oferta variada de produtos?

Andrei: Usamos variáveis vinculadas aos nossos tokens primitivos ou semânticos, o que se escala maravilhosamente em diferentes temas e modos, como claro, escuro e alto contraste.

Mais importante ainda, essas variáveis formam uma ligação crucial entre os elementos de design e o ambiente de codificação. Nossa equipe de Foundation gerencia os elementos fundamentais do Veneer, como o uso de automação para agilizar a transição do design para o código. Eles construíram uma ponte robusta que conecta design e desenvolvimento usando a API do Figma para ler essas variáveis diretamente dos designs. Ou seja, as variáveis usadas no design são traduzidas individualmente para o código, garantindo que tanto designers quanto desenvolvedores estejam literalmente falando a mesma língua.

Esse alinhamento não apenas agiliza o processo de desenvolvimento, mas também melhora a comunicação entre as equipes, permitindo uma implementação mais precisa das especificações de design. Ao manter essa correspondência direta entre os elementos de design e o código, reduzimos significativamente as inconsistências e melhoramos a qualidade e a escalabilidade geral dos nossos produtos digitais.

Como um dos primeiros a implementar o Code Connect, você pode compartilhar sua experiência até agora?

Gilson: O Code Connect é o recurso que mais nos empolgou. A configuração foi super fácil, levou apenas duas semanas para um engenheiro concluir.

Para economizar ainda mais tempo, estamos automatizando ainda mais o processo para coisas como alterações nos componentes. Por exemplo, temos um arquivo fonte onde todos os ícones estão em sua versão "editável" (usando várias camadas e diferentes elementos como linhas, retângulos, círculos, etc.). Monitoramos as alterações no arquivo fonte via automação, onde achatamos os ícones e criamos um dicionário com o código SVG, que é usado para criar nossa biblioteca de Iconografia no Figma e compartilhado com o desenvolvimento a fim de ser adicionado às bibliotecas de desenvolvimento. Sempre que um ícone é adicionado ao arquivo fonte, a automação o adiciona automaticamente à biblioteca de ícones, ao Code Connect e o repassa para as bibliotecas de desenvolvimento.

Gilson: Temos um site enorme com documentação sobre cada componente, em que os desenvolvedores podem ver propriedades e até obter demonstrações ao vivo com trechos de código. Antes, eles precisavam gastar tempo indo até um site para procurar os trechos de código. Agora, com o Code Connect, eles podem simplesmente clicar em um componente no Figma e ver os trechos de código com todas as configurações corretas. Isso acelera muito o desenvolvimento e a integração do Veneer.

Andrei: O Code Connect também tem sido uma grande ajuda para nossos designers; eles compreendem melhor como o código funciona, o que os ajuda a criar protótipos mais precisos, algo que vai além do que podemos fazer apenas com o recurso de prototipagem do Figma.

Como sua equipe respondeu ao Dev Mode?

Gilson: Realizamos uma pesquisa com 400 pessoas usando o Dev Mode na HP, em que a maioria dos participantes eram desenvolvedores. O feedback foi extremamente positivo. Um desenvolvedor comentou: “O Dev Mode reduz o tempo que gasto em tarefas rotineiras, permitindo que eu me concentre em melhorar a funcionalidade." Outro observou: "A capacidade de gerar e usar trechos de código diretamente acelerou significativamente nossos ciclos de desenvolvimento."

Em média, eles também economizaram 98 minutos por semana por pessoa, pois não precisaram trocar o contexto e acessar um site diferente para obter os trechos de código corretos.

Esses números demonstram claramente que a maioria das equipes obteve melhorias substanciais em seu fluxo de trabalho devido à implementação do Dev Mode, com percentuais significativos relatando aumento na eficiência, velocidade e qualidade do trabalho. Esse feedback quantitativo ressalta os benefícios tangíveis do Dev Mode, reforçando o valor que ele traz para os processos de desenvolvimento da HP.

Andrei: Com o Dev Mode, também tivemos uma grande mudança de mindset. Ele está ajudando designers e desenvolvedores a falarem a mesma língua e nos faz repensar o processo de como construímos produtos. A ideia de "handoff" foi eliminada e as pessoas estão começando a falar sobre o fluxo de trabalho entre design e desenvolvimento. O fluxo de trabalho está mais fluido, e nosso processo de desenvolvimento de produtos foi acelerado.