TROCAFY: E-COMMERCE DE RECERTIFICADOS

Redesenhando a primeira experiência de quem chega a um e-commerce de eletrônicos recertificados

Como tornar uma proposta de compra diferente (produtos recertificados) mais clara e confiável para quem chega ao site pela primeira vez?

Trocafy · 2022 · Product Designer (UX/UI)
Setor: E-commerce · Produtos usados e recertificados · B2C
Time: Liderei time de 4 designers
Duração: ~12 meses
Ferramentas: Figma · Analytics · Testes de usabilidade
resultado:

Redesign da experiência de navegação e compra reduziu a taxa de rejeição em ~26%: resultado direto de uma intervenção focada em confiança e clareza de proposta de valor.

01 · Contexto e desafio

Vender um produto usado exige uma coisa que vender um produto novo não exige: confiança.

A Trocafy atua no mercado de eletrônicos usados e recertificados. Nesse contexto, o usuário chega à loja com uma dúvida que não existe da mesma forma em um e-commerce tradicional:

“Por que eu deveria confiar neste produto?”

A experiência precisava responder essa pergunta antes de pedir que o usuário avançasse na jornada de compra.

O principal sintoma era uma taxa de rejeição elevada: usuários chegavam ao site e saíam sem interagir.

A investigação apontou que o problema não estava apenas na interface.

A proposta de valor não deixava suficientemente claro o que diferenciava a Trocafy de um classificado comum, enquanto a navegação adicionava atrito à descoberta dos produtos.

O problema não era fazer o usuário comprar, essencialmente. Mas sim fazer o usuário chegar à decisão de continuar.

A análise revelou dois problemas principais:

1 — Confiança

Os critérios de recertificação, garantias e diferenciais não tinham destaque suficiente.

O usuário precisava procurar evidências para responder:

“Esse produto é confiável?”

2 — Clareza de navegação

Filtros e categorias dificultavam a exploração dos produtos.

O usuário precisava fazer esforço demais para responder:

“Esse é o produto que estou procurando?”

Hipótese

Se a experiência conseguisse reduzir a incerteza sobre o produto e facilitar sua descoberta, poderíamos reduzir o abandono antes mesmo do usuário chegar ao checkout.

02 · Meu papel

Meu trabalho não foi apenas redesenhar telas.

Atuei como Product Designer responsável pelo diagnóstico e redesign da experiência de navegação e das principais páginas de conversão.

Research

·

Diagnóstico

·

Análise de dados

·

Benchmarking

·

Arquitetura da Informação

·

Redesign

·

Teste de usabilidade

03 · Investigação

Antes de redesenhar, procurei entender onde o abandono acontecia, e por quê.

04 · Diagnóstico

A rejeição não era um problema de checkout. Era um problema de confiança + descoberta.

Usuário chega

A primeira impressão não comunica de forma clara o diferencial da Trocafy nem reduz as inseguranças sobre comprar um produto recertificado.

Não entende imediatamente por que deveria confiar

Informações como condição do produto, recertificação e garantia não têm destaque suficiente para sustentar a decisão de compra.

Não encontra facilmente o produto que procura

Categorias, filtros e organização das informações aumentam o esforço necessário para explorar e comparar os produtos.

Não tem motivo suficiente para continuar

Sem confiança na proposta e sem encontrar rapidamente algo relevante, o usuário não percebe valor suficiente para avançar na jornada.

Abandona

O resultado é uma experiência com maior fricção e uma parcela dos usuários deixa o site antes de avançar para a compra.

Isso mudou a prioridade do projeto. Em vez de otimizar o final do funil, precisávamos corrigir a entrada.

05 · Decisões

Confiança precisava ser parte da interface, não apenas da copy.

Uma solução óbvia seria adicionar mais informações explicando o processo de recertificação. Mas isso aumentaria a quantidade de conteúdo sem necessariamente aumentar sua compreensão.

Decisão #1

Transformar os principais indicadores de confiança em elementos visuais prioritários da página de produto.

  • condição do produto
  • garantia
  • recertificação

DECISÃO #2

Otimizar onde o usuário estava abandonando, não onde o funil terminava.

A análise mostrou que o problema acontecia antes do checkout, principalmente nas páginas de entrada e descoberta.

Portanto, investir primeiro no checkout não atacaria a principal causa do abandono.

DECISÃO #3

Outro problema identificado e tratado em paralelo foi a acessibilidade e a estrutura de SEO do e-commerce.

A revisão não ficou restrita à interface. Trabalhamos também a copy das páginas considerando intenção de busca e hierarquia de conteúdo, garantindo que títulos, textos e informações relevantes fossem estruturados de forma mais clara para usuários e mecanismos de busca.

A arquitetura da informação também foi revisada para estabelecer relações mais claras entre categorias, conteúdos e produtos.

No handoff, as decisões de design foram documentadas para reduzir interpretações durante o desenvolvimento. Além das telas finais, foram explicitadas boas práticas de usabilidade, incluindo hierarquia, espaçamentos, comportamento dos componentes e critérios de implementação.

Handoff com descrição minuciosa:

06 · A solução

A experiência passou a responder duas perguntas antes de pedir qualquer compromisso:

“Posso confiar nesse produto?” e “É o produto que estou procurando?”

HOME

Objetivo: Comunicar rapidamente a proposta de valor da Trocafy.

Decisão: Reduzir a ambiguidade sobre o que significa comprar um produto recertificado.

  • Hero com proposta de valor mais direta;
  • Categorias, filtros e produtos em destaque foram reorganizados para facilitar a busca e comparação;
  • Conteúdos e elementos visuais foram reorganizados para que o usuário compreendesse a proposta sem precisar interpretar muitos blocos independentes;
  • A nova composição utiliza mais áreas livres para separar grupos de informação e permitir que cada seção seja percebida individualmente;
  • O roxo continua como cor proprietária da marca, mas passa a estruturar a interface e destacar elementos estratégicos. O branco cria áreas de respiro, enquanto o rosa é usado pontualmente para chamar atenção para CTAs e elementos de interação;
  • Áreas de maior contraste foram reservadas para informações e ações prioritárias. Isso evita que todos os elementos tenham o mesmo peso visual e ajuda o usuário a identificar rapidamente onde olhar e o que fazer;
  • Os CTAs foram simplificados visualmente e ganharam maior destaque dentro dos cards. A mudança de “Adicionar ao carrinho” para “Eu quero” também aproxima a linguagem da intenção do usuário e reduz a distância entre interesse e ação.

* Seção explicativa sobre condições dos produtos na home. Na Home, o primeiro objetivo não era vender um aparelho específico. Era responder rapidamente às dúvidas que poderiam impedir o usuário de continuar:

Menos esforço para entender, comparar e encontrar produtos.

A confiança entrou antes do preço.

PÁGINA DE PRODUTO

Um mesmo aparelho podia apresentar diferentes capacidades, cores e condições de conservação, e cada variação podia ter disponibilidade própria.

O desafio de UX era permitir que o usuário entendesse essas opções e escolhesse o produto desejado sem confundir atributos, preços, condições ou disponibilidade.

A solução foi estruturar a PDP para separar claramente: o que é o produto, quais são suas variações, qual opção está selecionada, quais condições se aplicam àquela escolha.

Cada atributo recebeu um tratamento visual próprio.

  • Cor foi apresentada por meio de miniaturas do produto, permitindo reconhecer visualmente a variação.
  • Capacidade foi organizada em opções selecionáveis, tornando explícita a escolha entre 32GB, 64GB, 128GB e 256GB.
  • Condição do produto recebeu maior contexto porque não representa apenas uma característica estética: ela altera a expectativa do usuário sobre o estado do aparelho, seus acessórios e seu histórico de uso.

A interface diferencia visualmente opções disponíveis, opção selecionada e opções indisponíveis, evitando que o usuário precise descobrir uma restrição somente depois de interagir.

Visualmente, a interface utiliza:

  • Agrupamento para separar atributos diferentes;
  • Estados selecionados para tornar evidente a configuração atual;
  • Hierarquia tipográfica para diferenciar produto, preço, atributos e informações auxiliares;
  • Proximidade para associar cada informação à escolha correspondente;
  • Feedback visual para indicar o estado das opções;
  • Texto contextual para explicar condições que não podem ser compreendidas apenas visualmente.

* Criação de ícones exclusivos, que ajudem a assimilação. Os ícones foram criados a partir de consultas a usuários reais e validados semanticamente.

* Seção explicativa sobre condições na página de produto. A interface deixa de pedir que o usuário simplesmente confie na classificação e passa a dar evidências para que ele próprio avalie a condição do aparelho.

A classificação dos aparelhos envolve diferentes critérios de condição. Apresentá-los em blocos separados exigiria que o usuário memorizasse informações e alternasse entre conteúdos para entender as diferenças.

Por isso, transformamos essas informações em uma tabela comparativa, permitindo visualizar as categorias lado a lado e identificar rapidamente o que muda entre elas.

A estrutura utiliza linhas para os critérios de avaliação e colunas para as categorias de produto, criando uma leitura cruzada que facilita a comparação.

07 · VALIDAÇÃO

Antes de considerar o redesign concluído, colocamos a experiência diante de compradores potenciais.

Os testes buscaram validar principalmente:

  • clareza da proposta de valor
  • percepção de confiança
  • facilidade de navegação
  • descoberta dos produtos

08 · RESULTADOS

Impacto quantitativo: −26% Taxa de rejeição após o redesign

Impacto na experiência:

  • Confiança: critérios de recertificação e garantias passaram a ter maior destaque na experiência.
  • Descoberta: navegação e os filtros foram reorganizados para reduzir o esforço na busca.
  • Engajamento: aumento do tempo médio de sessão após a intervenção.

09 · O QUE EU APRENDI

Em produtos em que a confiança é parte da decisão de compra, UX não serve apenas para reduzir fricção. Ela precisa reduzir incerteza.

No Trocafy, isso significou entender que o problema de conversão começava antes do checkout: na primeira impressão, na descoberta do produto e na capacidade de responder rapidamente.

Rolar para cima