Inspecionar e Refletir com o Design System da Wise

A sessão começa com a introdução dos palestrantes, todos com vasta experiência em sistemas de design. John Delman, com 25 anos de experiência em design e quase uma década em sistemas de design, atua na Workday. Andre, baseado no Reino Unido, possui mais de 12 anos em design e oito focados em sistemas de design, atualmente liderando equipes de produto e marketing na Burberry. Raquel, com oito anos de experiência, lidera o sistema de design da Nokia e trabalhou anteriormente na Volkswagen Digital Solution. Jane, líder da equipe de sistemas de design no Mozilla Firefox, também contribui com sua experiência em grandes projetos. A diversidade de suas experiências enriquece a discussão sobre as melhores práticas em sistemas de design.

Para facilitar a interação, os espectadores podem fazer perguntas adicionando notas adesivas ou comentários diretamente no FigJam, garantindo que todas as questões sejam centralizadas e visíveis. São compartilhados links para as comunidades Friends of Figma, incluindo a de Portugal, que promove eventos online e presenciais para designers, incentivando a participação e o aprofundamento em tópicos de design. Este formato visa criar um ambiente colaborativo e acessível, onde a comunidade pode interagir e aprender ativamente durante a sessão.

O principal objetivo da sessão é inspecionar e refletir sobre o uso do sistema de design da Wise em seus produtos, buscando identificar melhores práticas e promover o crescimento mútuo da comunidade de design. É crucial ressaltar que esta não é uma sessão de crítica, e os criadores do sistema de design da Wise não foram convidados intencionalmente, a fim de focar na aprendizagem e na reflexão sobre o que pode ser implementado em outros sistemas. As discussões visam extrair lições valiosas e oportunidades de melhoria para a comunidade. Além disso, é feito um convite para futuras sessões de 'Inspecionar e Refletir', destacando o sistema de design Salt do J.P. Morgan, que recentemente se tornou público.

A discussão inicial sobre o sistema de design da Wise revelou que a 'Wise Design' atua como um guarda-chuva maior, englobando não apenas o sistema de design, mas toda a estratégia de design da empresa. Os palestrantes elogiaram a estrutura das fundações, que são bem definidas e se traduzem de forma eficaz para os componentes e a linguagem do sistema. A documentação distingue claramente entre o foco do produto e o editorial, o que é um reflexo da estratégia de design da Wise, embora isso possa adicionar uma carga de interpretação para o designer final. Apesar disso, a solidez das fundações proporciona um ambiente seguro para a criação, tornando difícil desenvolver algo fora dos padrões. A Wise também oferece Storybook e documentação pública, facilitando o acesso e a exploração por parte da comunidade. Este aspecto foi particularmente elogiado pela sua clareza e acessibilidade.

Acho que o verdadeiro poder deste sistema é a confiança que ele dá ao seu design acima de tudo.

A equipe observou que a documentação da Wise, disponível publicamente, reflete a cultura de design da empresa e segue uma tendência crescente entre grandes companhias, como eBay e Dropbox. Ao contrário de sistemas super técnicos, a Wise busca ser mais simples, eficiente e 'à prova de erros', com uma abordagem humana e abrangente. A documentação é elogiada por ser visual e direta, evitando a necessidade de longas leituras que poderiam desencorajar os usuários. Esse estilo torna o sistema mais apelativo e intuitivo, permitindo que os designers compreendam rapidamente como utilizar os componentes e padrões, sem a necessidade de consultar manuais extensos. A priorização da experiência do usuário na documentação é um ponto forte, incentivando a adoção e a produtividade.

Surgiu a especulação de que o site de documentação da Wise não é necessariamente a fonte primária de verdade, mas sim uma vitrine de marca, focada em demonstrar o que existe e a maturidade do sistema. Embora apresente tokens e outros elementos, a falta de detalhes específicos sugere que a documentação completa pode residir internamente. Esta abordagem pode ser utilizada para promover o impacto da equipe de sistema de design internamente, mas para o uso diário, os designers e engenheiros podem recorrer a outras fontes, como ferramentas de design. O fato de o acesso ao Storybook ter sido encontrado apenas por meio de pesquisa, e não explicitamente no site de documentação, reforça essa ideia de uma divisão intencional.

O que importa é o que os engenheiros têm. É um caso interessante em que aprofundar o site de documentação pode não ser a melhor coisa, porque ele serve a um propósito diferente.

A evolução de ferramentas como o Figma permite que toda a documentação esteja integrada ao fluxo de trabalho dos designers, especialmente com o modo de desenvolvimento. Isso significa que um site externo super elaborado pode não ser tão essencial quanto a documentação diretamente acessível onde o trabalho acontece. O contexto organizacional da Wise, com uma cultura de design forte entre marca e produto, pode justificar essa abordagem de 'vitrine', enquanto os engenheiros utilizam outras ferramentas para suas referências. A distinção entre plataformas, como desktop e mobile, levanta a questão de como a documentação deve ser estruturada. Se as equipes são separadas, faz sentido ter espaços de trabalho distintos; caso contrário, a unificação é preferível para promover a colaboração. A discussão também abordou a importância de não criar silos de conhecimento entre designers e desenvolvedores, enfatizando a necessidade de espaços compartilhados para garantir a consistência e a eficiência.

A hierarquia de tipografia é um ponto crucial para a clareza e consistência do design. Embora não seja imediatamente evidente, a Wise possui regras bem definidas para o uso de suas duas tipografias: a principal e a Inter para o restante do conteúdo. O sistema define propósitos para diferentes tamanhos de texto, como 'título da tela' ou 'título da seção', orientando os designers sobre como e onde aplicar cada um. No entanto, a documentação se beneficiaria de mais exemplos demonstrativos de como esses elementos são usados em telas reais, o que ajudaria os designers a explorar novas aplicações e a evitar adivinhações. A nomeação dos tokens de design, que é conversacional, é elogiada pela sua acessibilidade, embora levante questões sobre escalabilidade em comparação com abordagens numéricas. Este é um dilema comum em sistemas de design, onde a usabilidade e a escalabilidade precisam ser equilibradas para atender às necessidades de diferentes usuários.

Ao analisar os padrões no sistema de design da Wise, surge a questão fundamental: o que exatamente diferencia um padrão de um componente? Muitas vezes, um padrão pode ser definido como um layout com documentação mais complexa, uma experiência de empréstimo com inputs, ou uma coleção de múltiplos componentes com regras específicas para cenários como erros. A complexidade reside na relação entre os componentes e em situações onde a ausência de um padrão documentado dificultaria a compreensão do designer. Por exemplo, a distinção entre quando usar um 'snackbar' e uma 'notificação' ilustra como os padrões fornecem orientação baseada em casos de uso. Embora a definição não seja sempre clara, ela é essencial para a estrutura e a eficácia da documentação do sistema de design, garantindo que as informações sejam bem organizadas e úteis para os usuários.

Um componente geralmente é holístico, ou seja, menos importa onde você o coloca; ele deve ser abstraído de tudo para ser mais atômico e reutilizável. Um padrão, por outro lado, geralmente possui algumas definições comportamentais e lógica de negócios envolvida, sendo mais específico para um caso de uso ou cobrindo uma ampla gama de casos.

Curiosamente, o site da Wise apresenta mais padrões na seção editorial do que na de produto, o que sugere que essa parte da organização pode ser a que mais utiliza esses padrões. Isso implica que a definição de padrões pode ser menos relevante para o design de produto e mais para o design editorial, onde a reutilização é mais frequente. A flexibilidade na aplicação de padrões é um ponto forte, pois permite que os designers montem soluções sem se sentirem excessivamente restringidos por regras rígidas. Essa abordagem busca equilibrar a velocidade com a qualidade, reconhecendo que os designers têm prazos e precisam de liberdade para inovar, ao invés de seguir prescrições absolutas. A Wise, nesse sentido, demonstra um bom equilíbrio entre orientação e autonomia para os designers, o que contribui para um sistema robusto e adaptável às necessidades da equipe e do produto.

Acho que esse tipo de momento de 'segurar firme, mas não tão firme', Wise fez um trabalho muito bom.

A adoção de padrões permite novas colaborações dentro do sistema de design, envolvendo gerentes de produto e equipes de garantia de qualidade (QA). A definição de padrão, neste contexto, pode ser vista como 'uma combinação ou fluxo de componentes para atingir uma intenção específica do usuário'. Isso é particularmente útil para equipes de QA, que já escrevem casos de teste e podem encontrar padrões repetíveis na forma como os usuários são informados sobre problemas ou em fluxos de ativação. Por exemplo, a Wise destaca diferentes tipos de validação e oferece padrões para validação de campos, o que simplifica a comunicação entre departamentos. Além disso, o sistema integra artigos de ajuda, conectando a estratégia de conteúdo ao suporte ao cliente, e expande padrões de gamificação para múltiplos canais, incluindo e-mails, o que empurra os limites tradicionais de um sistema de design. A ambição de usar essas diretrizes estruturadas para alimentar Large Language Models (LLMs) no futuro também é mencionada, visando automação na criação de conteúdo que siga as regras da marca. Tudo isso reforça que o sistema da Wise é um sistema de marca completo, projetado para ser usado em todos os pontos de contato da marca, fornecendo orientação abrangente para todas as audiências e consumidores.

A criação de padrões é justificada quando uma 'conglomeração de coisas' é usada repetidamente por várias pessoas, assim como a criação de componentes para botões reutilizáveis. O perigo surge quando os padrões se tornam fluxos de página inteiros, resultando em designs excessivamente padronizados e pouco espaço para a inovação. Um bom padrão resolve um problema comum sem ser a única solução possível, permitindo 'escapes' (escape hatches) para que as equipes possam adicionar e evoluir. Sistemas de design muito rígidos, que impõem abordagens binárias, podem sufocar a criatividade. A Wise, ao contrário, demonstra que a flexibilidade pode levar ao sucesso. É um desafio para marcas corporativas com muitos dados, como a Stripe, criar um sistema holístico que combine elementos editoriais e visuais com a profundidade e a precisão necessárias para um ambiente corporativo. Este será um próximo estágio emocionante para o campo dos sistemas de design.

Os padrões de estado vazio da Wise são um excelente exemplo de como o sistema oferece soluções flexíveis. Em vez de uma única opção, a Wise disponibiliza quatro tipos de estados de erro, cada um com uma ilustração e uma explicação sobre quando utilizá-lo. Essa abordagem simples, mas eficaz, garante que os designers tenham opções para comunicar erros de maneira adequada, sem precisar criar soluções do zero. A preocupação com a marca é evidente, com diretrizes claras sobre o tom e a linguagem a ser usada com os clientes. Isso evita que as equipes gastem tempo excessivo discutindo a redação de mensagens e assegura a consistência da voz da marca. Embora nem todas as situações possam ser previstas, ter um conjunto de diretrizes e exemplos pré-definidos é um grande diferencial para a produtividade e a qualidade do design.

Durante a inspeção, foram encontradas diversas variações do padrão de estado vazio dentro do produto da Wise. Por exemplo, em uma tela de 'sem transações', a ilustração é presente, mas o título está ausente, possivelmente porque já existe um título na página principal. Outra variação, menor e mais condensada, aparece na página inicial para indicar a ausência de transações. Essas implementações levantam a questão de como documentar essas diferentes nuances. Seria ideal incluir essas variações como parte do padrão de estado vazio, explicando os diferentes contextos e tamanhos (como estado vazio em linha ou de página completa), para guiar os designers de forma mais abrangente. Essa prática garantiria que as equipes soubessem exatamente como aplicar o padrão em diversas situações, mantendo a consistência e a usabilidade em todo o produto. A flexibilidade do sistema, ao mesmo tempo em que oferece estrutura, permite essas adaptações contextuais.

Tipos de Empty State da Wise

A distinção entre diferentes tipos de notificação, como 'toast', 'banner' ou alertas de página inteira, é uma analogia útil para entender as variações dos estados vazios. A escolha do tipo depende da circunstância, da gravidade e da intenção da mensagem. Por exemplo, um ícone de relógio em um estado vazio pode ser puramente informativo e não emocional, enquanto a ausência de transações pode ser um alerta mais crítico. A equipe também especula que a falta de um cabeçalho em alguns estados vazios pode ser um descuido ou uma decisão intencional para evitar sobrecarregar o usuário com informações duplicadas, especialmente se o contexto já for claro. O sistema permite essa flexibilidade, mas a consistência na comunicação e a intenção por trás de cada design são cruciais para a experiência do usuário.

Eu ainda gostaria de ver a estrutura da tabela e, de certa forma, um pouco de ambos.

Em resumo, os padrões de estado vazio da Wise estão bem documentados, mas sempre há oportunidades de melhoria. Um dos principais pontos levantados foi a necessidade de considerar a intenção e a gravidade de cada mensagem para propor variações visuais mais adequadas – seja um estado vazio em linha, de tamanho médio ou de página inteira. Foi descoberto que a Wise possui estados vazios dentro de tabelas, o que é uma nuance importante na aplicação desses padrões. A discussão também abordou a funcionalidade do botão 'Ver Todos' em um estado de 'sem transações', especulando que ele poderia levar a uma página de histórico ou a uma seção mais detalhada, mesmo sem dados visíveis no momento. Essa flexibilidade demonstra a adaptabilidade do sistema, mas a clareza sobre o propósito de cada elemento é fundamental para a experiência do usuário.

A discussão avançou para os componentes de tabela, particularmente em relação aos estados vazios. Questionou-se se o estado de 'sem transações ainda' seria uma variante de uma tabela condensada sem dados. A expectativa é que, ao clicar em 'Ver Todos', uma tabela expandida seja exibida. O ponto central é a importância de manter a estrutura da tabela visível, mesmo quando vazia. Isso sinaliza aos usuários onde os dados aparecerão e evita a sensação de que algo está faltando ou que a interface mudou drasticamente quando o conteúdo é preenchido. A ausência da estrutura da tabela em um estado vazio pode gerar confusão, e seria benéfico para a experiência do cliente ter essa previsibilidade visual, independentemente da presença de dados. Essa prática ajuda a criar um fluxo mais coerente e intuitivo na interação do usuário com a interface.

A transição para a seção de componentes da Wise revelou uma frustração comum em sites de documentação: a falta de uma navegação pegajosa (sticky nav). Os palestrantes notaram que a necessidade de rolar a página inteira para acessar a navegação consome tempo e dificulta a experiência do usuário. Em um sistema de design cujo propósito é facilitar a vida das pessoas, pequenos atritos como este se acumulam e podem dissuadir os designers de consultar o site de referência. A sugestão é que uma navegação persistente e atalhos de teclado para pesquisa e troca rápida entre componentes melhorariam significativamente a produtividade e a descoberta dos elementos. Essas pequenas melhorias são cruciais para que os designers sintam que o sistema está realmente otimizando seu fluxo de trabalho, incentivando a adoção e o uso contínuo.

O objetivo de um sistema de design é tirar as coisas do caminho das pessoas e apenas tornar suas vidas mais fáceis, e essas pequenas coisas somam.

Para otimizar a usabilidade do site de documentação, seria ideal implementar atalhos de teclado para pesquisa e uma navegação rápida entre os componentes, similar ao padrão 'command + K' de busca. A ausência de links para 'componentes relacionados' na parte inferior das páginas de componentes também foi uma surpresa, pois essa funcionalidade de 'você quis dizer' pode ser extremamente útil para a descoberta. Essa omissão pode fazer com que os designers desconheçam componentes já existentes, levando-os a recriar elementos e desperdiçar tempo e esforço. A preocupação é maior com a falta de conhecimento sobre a existência de um componente do que com o uso incorreto dele. Expor todo o raciocínio por trás do design é fundamental para empoderar os designers e garantir que eles utilizem o sistema de forma eficaz, alcançando resultados de alta qualidade.

A análise aprofundada da família de componentes 'opção de navegação' da Wise revelou que ela oferece aos usuários uma forma rica de escolher entre opções e navegar para outras telas ou etapas em um fluxo. Essas opções são apresentadas em lista ou como 'tiles', sendo os tiles exclusivos para a web. A documentação abrange seções como 'quando usar', 'melhores práticas', 'apresentação' (lista ou tiles), 'interações', 'acessibilidade' e 'conteúdo', com diretrizes detalhadas. No entanto, a principal questão para os designers não é 'quando usar', mas sim 'como eu saberia que isso existe?'.

Existem múltiplas variações dessa opção de navegação no produto, como aquelas com bordas tracejadas ou outras mais simples e até mais complexas, com subtítulos para detalhes adicionais. Na homepage, a Wise utiliza a opção de navegação como um tile para adicionar moedas, demonstrando a flexibilidade do componente. O grande desafio é a 'descoberta': um designer pode não saber que existe um componente específico, como o com borda tracejada, que resolveria vários problemas. Isso pode levar à recriação desnecessária ou à perda de oportunidades de elevar o design. A existência de diferentes raios de borda e estilos, como a espessura da linha tracejada, sugere que podem ser componentes separados ou novos elementos que ainda não foram totalmente documentados. A falta de um status (novo, antigo, atualizado) para os componentes no site público contribui para essa incerteza, reforçando a ideia de que o site pode ser mais uma 'vitrine' do que uma fonte de verdade para especificações de construção.

A discussão foi perspicaz e instigante, destacando a complexidade e a riqueza do sistema de design da Wise. A equipe concluiu que o site público da Wise, embora bem polido e informativo, pode servir mais como uma vitrine de marca do que como a fonte primária de verdade para as especificações de construção. Isso não é necessariamente um ponto negativo; pode refletir uma estratégia intencional para equilibrar a quantidade de informação e evitar sobrecarregar os usuários, deixando a documentação mais detalhada para ferramentas internas como o Figma ou outros sistemas de gerenciamento de conteúdo. Essa abordagem pode, inclusive, incentivar a exploração e a colaboração entre os designers, permitindo 'acidentes felizes' que levam à inovação, em vez de uma adesão rígida a cada regra.

Às vezes você quer ser tipo, 'o que você acha? Para onde você vai com isso?' porque é daí que às vezes vem a inovação.

A sessão reforça a ideia de que um sistema de design não precisa fornecer todas as respostas para ser bem-sucedido. O sistema da Wise, ao ser menos prescritivo em alguns pontos, pode estar impulsionando a criatividade e a adaptação por parte dos designers. Para quem busca aprofundar-se nesses temas, o convite é para as próximas sessões de 'Inspecionar e Refletir', que acontecem semanalmente às quintas-feiras. Além disso, foram disponibilizados links para um painel da comunidade onde é possível explorar exemplos de como os componentes da Wise são usados em contextos reais. Esta é uma oportunidade valiosa para a comunidade aprender e compartilhar insights, promovendo uma compreensão mais profunda das nuances e estratégias por trás de sistemas de design robustos e flexíveis.