Atlético de Madrid
UI Design ⋅ E-commerce ⋅ Documentação ⋅ Futebol
Desafio
Desafio
Levar a loja virtual do Atlético de Madrid para dentro do app e conectar diferentes momentos da jornada do torcedor. A proposta envolvia integrar a compra de produtos oficiais à experiência já existente de ingressos, comida e bebida, além de tornar a navegação mais consistente entre essas experiências.
Levar a loja virtual do Atlético de Madrid para dentro do app e conectar diferentes momentos da jornada do torcedor. A proposta envolvia integrar a compra de produtos oficiais à experiência já existente de ingressos, comida e bebida, além de tornar a navegação mais consistente entre essas experiências.
Meu papel
Meu papel
Atuei na análise de usabilidade do aplicativo, utilizando as Heurísticas de Nielsen e Leis de UX para identificar oportunidades de melhoria na jornada de compra. Também participei do desenho da nova experiência da loja virtual, desde a definição dos fluxos e interfaces até os ajustes realizados a partir dos feedbacks do cliente. Além disso, contribuí nos alinhamentos com o time e na adaptação dos conteúdos e idioma, e organizei o guia de estilo com base em Atomic Design para apoiar o desenvolvimento.
Atuei na análise de usabilidade do aplicativo, utilizando as Heurísticas de Nielsen e Leis de UX para identificar oportunidades de melhoria na jornada de compra. Também participei do desenho da nova experiência da loja virtual, desde a definição dos fluxos e interfaces até os ajustes realizados a partir dos feedbacks do cliente. Além disso, contribuí nos alinhamentos com o time e na adaptação dos conteúdos e idioma, e organizei o guia de estilo com base em Atomic Design para apoiar o desenvolvimento.
Time
Time
Design e Produto. 2023
Design e Produto. 2023
Ferramentas
Ferramentas
Figma, Microsoft Teams, Google Slides
Figma, Microsoft Teams, Google Slides
Alinhamento inicial
Alinhamento inicial
Um ecossistema, vários fornecedores
Um ecossistema, vários fornecedores
O aplicativo do Atlético havia sido desenvolvido por diferentes fornecedores. Nosso time já atuava na experiência de compra de comida e bebida durante os jogos, quando surgiu o desafio de levar também a loja virtual para dentro do app.
O aplicativo do Atlético havia sido desenvolvido por diferentes fornecedores. Nosso time já atuava na experiência de compra de comida e bebida durante os jogos, quando surgiu o desafio de levar também a loja virtual para dentro do app.
A oportunidade era redesenhar essa experiência mantendo o fornecedor existente, mas criando uma jornada mais consistente com o restante do aplicativo.
A oportunidade era redesenhar essa experiência mantendo o fornecedor existente, mas criando uma jornada mais consistente com o restante do aplicativo.
Análise de usabilidade
Análise de usabilidade
Antes de desenhar, investigamos onde a experiência travava
Antes de desenhar, investigamos onde a experiência travava
Realizamos uma análise de usabilidade do app atual utilizando um Diário de Uso Continuado, as Heurísticas de Nielsen e as Leis de UX como referências. A análise percorreu a jornada de compra e identificou padrões de fricção que poderiam orientar o redesign.
Realizamos uma análise de usabilidade do app atual utilizando um Diário de Uso Continuado, as Heurísticas de Nielsen e as Leis de UX como referências. A análise percorreu a jornada de compra e identificou padrões de fricção que poderiam orientar o redesign.
Algumas descobertas
Consistência era o principal ponto de atenção
Consistência era o principal ponto de atenção
Headers, botões, tipografia, espaçamentos e loaders variavam ao longo da experiência, dificultando a criação de padrões reconhecíveis. A consistência foi o ponto mais recorrente na análise: 94% dos pontos avaliados nessa heurística apresentaram oportunidades de melhoria.
Headers, botões, tipografia, espaçamentos e loaders variavam ao longo da experiência, dificultando a criação de padrões reconhecíveis. A consistência foi o ponto mais recorrente na análise: 94% dos pontos avaliados nessa heurística apresentaram oportunidades de melhoria.
A informação precisava de mais hierarquia
A informação precisava de mais hierarquia
Informações importantes para a tomada de decisão, como partidas, horários, produtos e ações principais, nem sempre tinham o destaque necessário. Textos pequenos, excesso de informações agrupadas e pouco espaçamento tornavam a leitura menos clara — especialmente em contextos como o estádio.
Informações importantes para a tomada de decisão, como partidas, horários, produtos e ações principais, nem sempre tinham o destaque necessário. Textos pequenos, excesso de informações agrupadas e pouco espaçamento tornavam a leitura menos clara — especialmente em contextos como o estádio.
O sistema precisava comunicar melhor o que estava acontecendo
O sistema precisava comunicar melhor o que estava acontecendo
Tempos de carregamento e diferentes padrões de loaders geravam incerteza sobre o andamento das ações. A análise apontou a necessidade de melhorar a performance e, quando a espera fosse inevitável, oferecer feedbacks claros e consistentes sobre o estado do sistema.
Tempos de carregamento e diferentes padrões de loaders geravam incerteza sobre o andamento das ações. A análise apontou a necessidade de melhorar a performance e, quando a espera fosse inevitável, oferecer feedbacks claros e consistentes sobre o estado do sistema.
O contexto precisava
acompanharo usuário
O contexto precisava
acompanharo usuário
Em alguns momentos, informações importantes de uma etapa anterior não eram mantidas na etapa seguinte. Isso fazia com que o usuário precisasse lembrar escolhas e contextos anteriores, contrariando o princípio de reconhecimento em vez de memorização.
Em alguns momentos, informações importantes de uma etapa anterior não eram mantidas na etapa seguinte. Isso fazia com que o usuário precisasse lembrar escolhas e contextos anteriores, contrariando o princípio de reconhecimento em vez de memorização.
💡
O diagnóstico apontou cinco prioridades
O diagnóstico apontou cinco prioridades
Consistência · Hierarquia · Performance · Reconhecimento · Prevenção de erros
Consistência · Hierarquia · Performance · Reconhecimento · Prevenção de erros
Esses pontos orientaram as decisões de design da nova experiência, buscando uma loja mais clara, previsível e integrada à jornada do torcedor.
Esses pontos orientaram as decisões de design da nova experiência, buscando uma loja mais clara, previsível e integrada à jornada do torcedor.
Nossa solução ⋅
Uma loja pensada para a jornada do torcedor
Uma experiência mais clara e integrada, do primeiro contato com os produtos até a finalização da compra.
Uma navegação mais clara para encontrar o que importa
Reorganizamos categorias, subcategorias e filtros para facilitar a descoberta.
Melhoramos hierarquia, espaçamento e apresentação dos produtos.
Simplificamos a interface para reduzir ruído e facilitar a leitura.
Mais clareza para decidir e personalizar
Reestruturamos as informações do produto para destacar o que importa na decisão.
Organizamos tamanho, jogador, personalização, competição e patches em uma sequência mais clara.
Mantivemos o valor da seleção visível durante as escolhas.
Uma finalização mais simples e transparente
Reorganizamos o carrinho para facilitar a revisão do pedido.
Demos mais destaque a cupom, pagamento, subtotal e valor final.
Estruturamos entrega, retirada e estados do pedido para deixar os próximos passos mais claros.
Desenvolvimento ⋅
Layout final
Layout final
Uma nova experiência, do início ao fim
Uma nova experiência, do início ao fim
Com o prazo reduzido, fomos diretamente para o design de alta fidelidade, utilizando os aprendizados da análise como direcionamento.
Com o prazo reduzido, fomos diretamente para o design de alta fidelidade, utilizando os aprendizados da análise como direcionamento.
Exploramos a identidade visual do Atlético, referências de e-commerce e os padrões já existentes no app para construir uma experiência visualmente integrada.
Exploramos a identidade visual do Atlético, referências de e-commerce e os padrões já existentes no app para construir uma experiência visualmente integrada.
O principal desafio foi trabalhar dentro das limitações técnicas de um produto construído por diferentes fornecedores, considerando que algumas partes da experiência estavam fora do nosso escopo de alteração.
O principal desafio foi trabalhar dentro das limitações técnicas de um produto construído por diferentes fornecedores, considerando que algumas partes da experiência estavam fora do nosso escopo de alteração.
Explorar
Explorar
Explorar
Uma loja mais consistente e integrada à experiência do torcedor.
Uma loja mais consistente e integrada à experiência do torcedor.
Escolher e Comprar
Escolher e Comprar
Escolher e Comprar
Interação com melhor hierarquia de informação e feedbacks.
Guia de estilo
Guia de estilo
Criamos os padrões para levar a experiência adiante
Criamos os padrões para levar a experiência adiante
Depois da aprovação do cliente, criamos as variações necessárias, organizamos os componentes e documentamos o projeto seguindo princípios de Atomic Design. O guia de estilo serviu como referência para o desenvolvimento e ajudou a manter consistência entre as diferentes telas e estados da experiência.
Depois da aprovação do cliente, criamos as variações necessárias, organizamos os componentes e documentamos o projeto seguindo princípios de Atomic Design. O guia de estilo serviu como referência para o desenvolvimento e ajudou a manter consistência entre as diferentes telas e estados da experiência.
Momento atual
Momento atual
Ainda era preciso resolver algumas interações
Ainda era preciso resolver algumas interações
Quando deixei o projeto para priorizar outro cliente, eu ainda estava fazendo alguns estudos para alguns problemas que tínhamos no produto, como o botão de carrinho que precisava ser repensado, uma vez que ele estava no header geral do aplicativo, que era gerido por outro parceiro.
Quando deixei o projeto para priorizar outro cliente, eu ainda estava fazendo alguns estudos para alguns problemas que tínhamos no produto, como o botão de carrinho que precisava ser repensado, uma vez que ele estava no header geral do aplicativo, que era gerido por outro parceiro.
Aprendizados ⋅
Equilibrando design e viabilidade técnica
Equilibrando design e viabilidade técnica
Trabalhar com diferentes fornecedores nos levou a equilibrar consistência, identidade do Atlético e viabilidade técnica, encontrando soluções dentro dos limites do produto e do que poderia ser alterado.
Trabalhar com diferentes fornecedores nos levou a equilibrar consistência, identidade do Atlético e viabilidade técnica, encontrando soluções dentro dos limites do produto e do que poderia ser alterado.
Arquitetura de informação faz parte da experiência
Arquitetura de informação faz parte da experiência
Em um e-commerce, organizar categorias, filtros e informações dos produtos é essencial para ajudar as pessoas a encontrar o que procuram, comparar opções e avançar na compra com mais clareza.
Em um e-commerce, organizar categorias, filtros e informações dos produtos é essencial para ajudar as pessoas a encontrar o que procuram, comparar opções e avançar na compra com mais clareza.