H&MCompra rápida, sem perder o contexto.

Resumo

Conduzi o trabalho de UX/UI do Quick Buy da H&M com os times multidisciplinares da Quality Digital. O projeto levou a seleção de tamanho e a compra rápida para a experiência da lista de produtos, com versões mobile e desktop. No acompanhamento do projeto, foi relatado um aumento de 1,2 ponto percentual na taxa de adição ao carrinho nos 15 dias após o deploy. Esse é um resultado observado no período, sem atribuição causal isolada ao redesign.

Contexto

A lista de produtos concentra decisões de exploração e comparação. Ao incluir uma ação de compra nos cards, essa superfície também passa a lidar com uma escolha necessária para vestuário: o tamanho. A interface precisa apresentar essa possibilidade sem tratar todos os produtos e estados de disponibilidade como equivalentes.

O escopo reuniu a evolução dos cards, a seleção de tamanhos e grades, o modal de compra e o estado “coming soon”. Os protótipos mobile e desktop permitem acompanhar como esses elementos se conectam em cada formato de tela.

Meu papel

Minha responsabilidade foi conduzir UX/UI em colaboração com os times da Quality Digital, da organização da interação às interfaces e aos componentes.

O desafio

O desafio de design era acomodar a compra rápida na listagem, mantendo compreensível a relação entre produto, tamanho e disponibilidade. Um card pode apresentar o produto, mas a ação de adicionar ao carrinho depende de uma seleção que precisa estar clara para a pessoa.

Havia ainda duas condições de uso a considerar: a área mais restrita do mobile e a composição da listagem no desktop. A proposta precisava manter a mesma lógica de compra sem depender de uma única apresentação visual.

Evidências do trabalho

O arquivo de design reúne versões anteriores e posteriores dos cards, componentes, estados e protótipos das duas plataformas. Esses artefatos mostram o alcance da intervenção e permitem examinar o fluxo além de uma tela final isolada.

Para aprofundar o acompanhamento comportamental, a documentação de design propõe analisar cliques imprecisos e possíveis travas no Clarity.

Aproximar a ação do produto

A entrada para o Quick Buy foi incorporada aos cards da lista. Assim, a proposta conecta a intenção de compra ao produto que a pessoa está explorando. O ganho pretendido é oferecer uma ação contextual, sem presumir que toda visita à listagem já tenha intenção de compra.

Tratar o tamanho como parte da compra

A solução inclui a seleção de tamanho e as grades no fluxo de compra rápida. Essa organização explicita uma escolha necessária antes da adição ao carrinho. O modal de compra complementa o card, permitindo apresentar a interação sem exigir que toda a informação ocupe a listagem ao mesmo tempo.

Representar disponibilidade e exceções

O estado “coming soon” faz parte da documentação. Incluir esse cenário dá visibilidade a uma condição diferente da compra disponível e evita descrever o Quick Buy apenas pelo caminho ideal. O comportamento de um componente depende também dos momentos em que a ação de comprar não está disponível.

Especificar mobile e desktop

Os componentes e protótipos foram organizados para os dois formatos. A documentação separada permite avaliar a apresentação dos cards e da seleção de tamanho em cada contexto, preservando a lógica funcional entre as experiências.

Resultado observado e impacto esperado

O acompanhamento do projeto, com dados de Clarity e Tealium, registrou o aumento relatado de 1,2 ponto percentual na taxa de adição ao carrinho durante os 15 dias posteriores ao deploy. O recorte permite apresentar um sinal inicial associado ao período de lançamento. Não permite, por si só, afirmar que o Quick Buy causou toda a variação, que o efeito se manteve ou que houve aumento de compras e receita.

O benefício esperado da solução é tornar a compra pela listagem mais direta e compreensível. A continuidade da análise deve distinguir esse objetivo dos efeitos efetivamente medidos.

Síntese profissional

Este case evidencia como uma intervenção concentrada nos cards exige atenção ao fluxo completo: entrada, seleção, disponibilidade e resposta da interface. Também reforça um critério importante para comunicar resultados de UX: apresentar a magnitude e a janela de observação, mantendo explícitos os limites da evidência.