Prototipação
•
Design System
•
Documentação
Como transformei tabelas que antes eram usadas sem componentes em um componente de alto desempenho.
Equipe
Equipe de UX Design e eu
Papel
UI/UX Designer
Ferramentas
Figma
Quais eram os problemas?
Anteriormente, usávamos uma abordagem aleatória para criar tabelas com uma coleção desatualizada de itens usando layout automático, mas não tínhamos padronização, pois não havia nenhum componente de tabela disponível no sistema de design.
Processo lento de construção de tabelas
Inconsistência entre páginas
Incapacidade de atualizações
projetando os componentes
Os componentes foram criados usando princípios de design atômico para garantir uma função abrangente, construindo um layout bem projetado a partir dos menores átomos da tabela. Eu referenciei o artigo do NN Group para orientação e baseei meu trabalho na documentação do Vuetify , que os desenvolvedores usam para criar os componentes.
Componente Th
Configuração e variantes do componente Th.
Componente Td
Configuração e variantes do componente Td.
Como aplicar?
Vários exemplos de uso foram criados para facilitar o uso do componente pela equipe de design. Aqui estão dois exemplos.
Exemplo de uso de uma tabela com largura total e algumas colunas típicas.
Exemplo de uso de uma tabela onde vários itens podem ser selecionados usando caixas de seleção.
Resultados
O componente de tabela padrão (td) foi inserido 2.664 vezes nos layouts de equipe nos últimos 30 dias, tornando-se o componente mais utilizado no Design System.
"Construir tabelas agora é prático, rápido e estruturado." Esse foi o feedback que recebi da equipe após publicar o componente.
Figma library analytics: metrics of table component usage in the last 30 days.
Tranformação em componentes
Praticidade em usar e atualizar
Princípios de design atômico
Obrigado pelo seu tempo
Veja outros cases
Redesign da pós-premium
Prototipação
•
Style Guide
•
Teste de usabilidade
Automatização da rematrícula
Prototipação
•
Análise do comportamento do usuário
•
Teste de usabilidade
Componente de tabela
Prototipação
•
Design System
•
Documentação
E-commerce health courses
Prototipação
•
Entrevista com usuários
•
Teste de usabilidade