Shopclub - Electrolux

O Shopclub é um clube de vantagens fechado da Electrolux e Continental que oferece produtos direto da fábrica com descontos exclusivos, acessível apenas por convite de funcionários (Friends & Family) ou via códigos de empresas parceiras. O desafio era redesenhar toda a experiência, desde a identidade visual até a jornada de compra, para aumentar conversão e reduzir fricções.

Data:

20 de julho de 2022

Papel:

UX/UI Designer

Contexto do Projeto

Time e Colaboração

Trabalhei diretamente com:

  • Product Owner - Alinhamento de requisitos, priorização de features no backlog, roadmap e critérios de aceite
  • 2 Desenvolvedores Front/back-end - Viabilidade técnica, limitações da plataforma legada, Storybook e implementação
  • Stakeholders Electrolux - Aprovação de identidade visual, tom de comunicação e estratégia de marca
  • Time de Marketing - Alinhamento de linguagem, campanhas e materiais de divulgação
  • Costumer service - Levantamento de dúvidas frequentes e principais reclamações dos usuários
  • SEO - Acompanhamento de performance do e-commerce com melhorias em urls, palavras-chave, otimização de imagens e textos dos produtos e institucional

Problema a ser resolvido

Situação encontrada:
  • Usuários não compreendiam o que era o Shopclub nem sua diferença em relação à Electrolux.
  • Preços ocultos até o cadastro geravam desconfiança.
  • Login confuso, sem confirmação de cadastro.
  • Identidade visual inconsistente, com cores fora da paleta da marca.
  • Ausência de design system e style guide.
  • Alta fricção na busca de produtos e no checkout.

Impactos no negócio:

  • Baixa conversão e ticket médio
  • Alto volume de dúvidas para o suporte
  • Percepção negativa da marca
  • Dificuldade em escalar vendas

Desafios e barreiras enfrentadas

1. Prazo extremamente apertado

O desafio: 4 meses para entregar redesign completo + design system do zero + implementação.

Como lidei:
Decidi priorizar as páginas de maior impacto primeiro (Home, Departamento, Produto, Checkout) e deixar páginas secundárias para fase 2. Negociei com a PO entregar o design system de forma incremental: primeiro componentes atômicos (botões, inputs), depois moléculas (cards, formulários), e por último organismos completos (header, footer). Isso permitiu que o dev começasse a implementar enquanto eu ainda desenhava outras telas.

2. Resistência dos stakeholders

O desafio: Stakeholders preocupados em "mudar demais" e perder vendas durante a transição.

Como lidei:
Optei por uma estratégia de apresentação com dados: em parceria com o time de dados, consegui puxar alguns números de carrinhos abandonados, tempo dentro do checkout, ticket médio de vendas, heatmaps em pontos estratégicos onde o consumidor não estava clicando ou clicando de forma aleatória, e fiz benchmark em algumas lojas do mesmo nicho. Propus um teste A/B para validar a nova versão antes de substituir 100%. Isso reduziu a resistência porque não era "tudo ou nada", poderíamos reverter se não funcionasse.

3. Como explicar "clube fechado" sem assustar?

O desafio: Como comunicar que é exclusivo sem fazer parecer suspeito?

Como lidei:
Testei 4 abordagens diferentes de copy com usuários:

  1. "Clube exclusivo para convidados"
  2. "Acesso via convite"
  3. "Clube de vantagens Electrolux"
  4. "Descontos especiais para você"

Identifiquei que "clube de vantagens" + "você foi convidado" gerava mais confiança. Criei uma página "O que é o Shopclub?" acessível antes do login para educar o usuário sem obstáculos.

Processo

Por que escolhi o Double Diamond?

Analisando o contexto, identifiquei que o problema não estava claro inicialmente. A demanda era "redesenhar a loja", mas não sabíamos se o problema era visual, de usabilidade, de comunicação, ou técnico.

Optei pelo Double Diamond porque ele permite:

  1. Divergir primeiro (Descobrir): Abrir o leque para entender TODAS as possíveis dores antes de assumir qualquer coisa.
  2. Convergir no problema (Definir): Sintetizar descobertas e definir o problema REAL a ser resolvido.
  3. Divergir em soluções (Desenvolver): Explorar múltiplas abordagens de solução sem prender a uma ideia.
  4. Convergir na solução (Entregar): Validar e implementar a melhor solução testada.

Descartei outras metodologias:

  • Lean UX: Muito rápida, sem espaço para pesquisa profunda que o projeto precisava.
  • Design Sprint (5 dias): Funciona para features específicas, não para redesign completo + design system.
  • Apenas Design Thinking: As 5 etapas lineares não davam a clareza visual dos momentos de divergência/convergência que eu precisava comunicar ao time.

Descobrir (Discover)

Pesquisas

Foram realizadas pesquisas qualitativas e quantitativas com stakeholders, vendedores, gerentes de produto e clientes para mapear toda a jornada de compra.

Metodologias aplicadas:

  • Entrevistas em profundidade com vendedores e funcionários internos da Electrolux.
  • Questionários online aplicados com clientes ativos e potenciais usuários.
  • Análise heurística completa da loja existente (Jakob Nielsen).
  • Benchmark competitivo de e-commerces similares e clubes de compras.
  • Mapeamento da jornada do usuário completa, desde a descoberta até o pós-venda.
  • Análise de dados de comportamento (taxa de abandono, funil de conversão, tempo médio por página).

Dados Quantitativos

Após análise das pesquisas, foram identificados os seguintes problemas críticos:

  • 90% das pessoas não sabiam o que era o Shopclub.
  • 72% não entendiam a diferença entre Shopclub e as lojas oficiais Electrolux/Continental.
  • 46% acreditavam que a loja vendia produtos com defeito ou de segunda linha.
  • 53% achavam o design muito colorido, confuso e não profissional.
  • Apenas 34% das pessoas entrevistadas sentiram facilidade em realizar uma compra.

Principais dores identificadas:

  1. Falta total de clareza sobre a proposta de valor do Shopclub.
  2. Identidade visual prejudicava seriamente a percepção de confiança.
  3. Jornada de compra com muitas fricções e etapas desnecessárias.
  4. Necessidade urgente de educar usuários sobre o modelo de clube exclusivo.
  5. Problemas técnicos no fluxo de cadastro/login impactavam a primeira impressão.

Benchmark

Realizei benchmark em plataformas similares para entender padrões de clubes de compras, outlets online e e-commerces exclusivos: Referências analisadas:Amazon Outlet (clareza em comunicação de descontos) Privalia / Private Sales (modelo de clube fechado) Costco / Sam's Club (clube de vantagens físico/online) Netshoes Outlet (identidade visual limpa) Magazine Luiza Marketplace (UX de busca e filtros)

Análise Heurística

Alguns pontos críticos identificados na análise heurística:

  • Visibilidade do status do sistema: sem feedback claro no cadastro e login.
  • Correspondência entre sistema e mundo real: linguagem técnica demais.
  • Controle e liberdade do usuário: difícil voltar etapas no checkout.
  • Consistência e padrões: cores, fontes e componentes inconsistentes.
  • Prevenção de erros: formulários sem validação adequada.
  • Reconhecimento ao invés de memorização: menu confuso, difícil de navegar.
  • Estética e design minimalista: excesso de informações e poluição visual.

Definir (Define)

Objetivo

Criar uma experiência de e-commerce clara, confiável e eficiente que:

  • Eduque o usuário sobre o modelo de clube de vantagens.
  • Reduza fricções em toda a jornada de compra.
  • Aumente conversão, ticket médio e tempo de navegação.
  • Estabeleça identidade visual consistente e alinhada às marcas.
  • Crie um design system escalável para facilitar manutenção e evolução.

Insights Principais

  • Usuários precisam entender imediatamente o que é o Shopclub, como funciona e por que os preços são diferentes.
  • A identidade visual precisa transmitir confiança, profissionalismo e qualidade, não confusão ou amadorismo.
  • O fluxo de cadastro/login deve ser simples, transparente e com feedback claro em cada etapa.
  • A busca e navegação devem ser intuitivas, com categorização clara e filtros eficientes.
  • A interface deve ser limpa e objetiva, focando 100% no produto e na conversão.
  • É fundamental eliminar a percepção de que os produtos têm defeito ou são de segunda linha.

Personas

Fernanda - Funcionária Electrolux

Idade: 32 anos
Cargo: Analista Comercial

Fala: "Quero indicar o Shopclub para amigos e familiares, mas preciso explicar rápido o que é e como funciona, sem criar confusão com a loja oficial da Electrolux."

Objetivos:

  • Compartilhar benefícios do clube com pessoas próximas
  • Que o cadastro seja simples e direto
  • Que a loja transmita confiança e qualidade

Ricardo - Cliente Indicado

Idade: 41 anos
Profissão: Engenheiro Civil

Fala: "Recebi um código de desconto de um colega, mas não sei como usar. O site não deixa claro se os produtos têm defeito e por que os preços são tão baixos."

Objetivos:

  • Entender rapidamente o que é o clube
  • Ter certeza de que os produtos são novos e originais
  • Comprar com facilidade usando o código recebido

Juliana - Vendedora Parceira

Idade: 28 anos
Cargo: Consultora de Vendas

Fala: "Quero que meus clientes comprem com facilidade usando meu código de vendedor, mas o processo é confuso e gera muitas dúvidas que eu preciso ficar explicando."

Objetivos:

  • Que o site seja autoexplicativo
  • Que seus clientes finalizem a compra sem precisar de ajuda
  • Aumentar suas comissões com mais vendas

Definindo o problema real

Depois de todo o processo de descoberta, defini o problema assim:

"O Shopclub possui produtos de qualidade com preços atrativos, mas falha em comunicar sua proposta de valor e transmitir confiança através da interface. Isso resulta em baixa conversão, abandono de carrinho e percepção negativa da marca."

Não era: "O site está feio"
Era: "O site não transmite confiança nem explica seu próprio modelo de negócio"

Essa clareza foi fundamental para todas as decisões de design que vieram depois.

Desenvolver (Develop)

Brainstorm

Propostas pensadas para solucionar os problemas identificados:

  • Criar seção dedicada "O que é o Shopclub?" na home, explicando claramente o modelo de negócio.
  • Redesenhar completamente o fluxo de cadastro/login com confirmação visual e feedback claro em cada etapa.
  • Desenvolver design system completo do zero (paleta de cores, tipografia, componentes, grids, iconografia).
  • Simplificar arquitetura de informação do menu (categorias claras, hierarquia lógica).
  • Aplicar identidade visual profissional alinhada às marcas Electrolux e Continental.
  • Adicionar badges de desconto e selos de qualidade nos produtos para reforçar confiança.
  • Implementar busca inteligente com autocomplete e filtros avançados por categoria, preço e marca.
  • Melhorar checkout reduzindo de 5 para 3 etapas, com progresso visual claro.
  • Criar sistema de notificação de confirmação de pedido e acompanhamento.

Por onde começar?

Tinha várias opções:

  • Começar pelo design system
  • Começar pelas páginas principais
  • Fazer tudo ao mesmo tempo

Decidi começar pela Arquitetura da Informação porque descobri que metade dos problemas vinham de estrutura confusa, não de visual.

Arquitetura da Informação

Menu anterior:

8 categorias misturadas, submenus confusos, nomes técnicos

Decisão 1: Reduzir categorias de 8 para 4

(mais opções = mais tempo de decisão = mais abandono)

Nova estrutura:

  1. Eletrodomésticos (Linha Branca)
  2. Eletroportáteis (Pequenos aparelhos)
  3. Utilidades Domésticas
  4. Peças e Acessórios

Validei essa estrutura com card sorting: pedi para 12 usuários agruparem produtos como eles achariam natural. A estrutura que emergiu foi exatamente essa.

Wireframes

Foram criados wireframes de baixa fidelidade para:

  • Validação técnica rápida com stakeholders
  • Teste de fluxos e navegação
  • Aprovação da nova estrutura antes de investir em alta fidelidade

Telas:

  • Home
  • Listagem de produtos
  • Página de produto
  • Carrinho
  • Checkout (3 etapas)
  • Login/Cadastro
  • Página "O que é o Shopclub?"

Prototipação

Evolução para protótipos de alta fidelidade aplicando o novo design system criado do zero:

Design System desenvolvido:

  • Paleta de cores alinhada à marca Shopclub.
  • Tipografia hierárquica com contraste adequado (WCAG 2.1 AA) para acessibilidade.
  • Componentes reutilizáveis documentados:
    • Botões (primário, secundário, terciário, estados hover/active/disabled)
    • Cards de produto (com badges, selo de desconto, favoritar)
    • Formulários (inputs, selects, checkboxes, validações)
    • Badges de status e desconto
    • Breadcrumbs
    • Paginação
    • Modais
    • Toasts de confirmação
  • Grid responsivo 12 colunas para desktop, tablet e mobile.
  • Sistema de ícones consistente (line icons para ações, solid para destaque).
  • Espaçamento padronizado (8px base system).

Implementação no Storybook:

  • Todos os componentes foram documentados no Storybook para facilitar a implementação pelo front-end.

Diferenciais da Nova Solução:

  • Interface 80% mais leve visualmente (redução de elementos desnecessários).
  • 90% menos poluição visual (cores excessivas, inconsistências, elementos competindo por atenção).
  • Design system completo criado do zero (style guide + componentes no Storybook).
  • Fluxo de login/cadastro com feedback imediato e confirmação clara de cada etapa.
  • Seção educativa "O que é o Shopclub?" diretamente na home e página dedicada.
  • Busca e filtros otimizados para reduzir tempo de decisão de compra.
  • Checkout em 3 etapas simples (antes eram 5) com barra de progresso visual.
  • Badges de qualidade e selos de desconto para reforçar confiança nos produtos.
  • Responsividade completa para mobile, tablet e desktop.

Navegação Interativa

Criei fluxos interativos completos no Miro mapeando toda a jornada do usuário:

Jornadas mapeadas:

  • Descoberta > Cadastro > Navegação > Busca > Produto > Carrinho > Checkout > Confirmação
  • Acesso com código Friends & Family
  • Acesso com código de empresa parceira
  • Recuperação de senha
  • Aplicação de cupom de desconto

Entregar (Delivery)

Testes

Teste A/B
Foi realizado teste A/B com usuários reais de diferentes regiões do Brasil, comparando simultaneamente a versão antiga com a nova versão durante 30 dias.

Metodologia:

  • 50% do tráfego direcionado para versão antiga
  • 50% do tráfego direcionado para nova versão
  • Monitoramento de métricas-chave em tempo real
  • Segmentação por perfil de usuário (novo vs recorrente)

Resultados quantitativos:

Performance técnica:

  • 80% mais leve em termos de peso da página (tempo de carregamento reduzido)
  • 90% menos poluição visual (cores excessivas, inconsistências, elementos desnecessários removidos)

Conversão e vendas:

  • +60% de aumento nas vendas totais em relação ao site antigo
  • +43% de aumento no ticket médio por pedido

Eficiência da equipe:

  • +40% de otimização na velocidade de entrega do time de design e front-end (graças ao design system + Storybook)
  • Redução de 65% em retrabalho de componentes
  • Tempo de implementação de novas features reduzido em 50%

Teste de Usabilidade

Testes qualitativos de usabilidade mostraram:

Compreensão:

  • Redução drástica em dúvidas sobre "o que é o Shopclub" e como funciona
  • Usuários entenderam imediatamente a diferença para as lojas oficiais

Confiança:

  • Maior percepção de confiança dos usuários ao navegar pela loja
  • Eliminação da crença de que produtos tinham defeito

Facilidade:

  • Facilidade significativa em encontrar produtos e categorias
  • Busca inteligente reduziu tempo de localização de produtos em 45%
  • Checkout simplificado reduziu abandono de carrinho

Fluxo de cadastro:

  • Menos abandono no fluxo de cadastro (de 68% para 23%)
  • Feedback claro reduziu dúvidas sobre conclusão do cadastro

Métricas Consolidadas

Conversão e vendas:

  • +60% de aumento nas vendas gerais
  • +43% de aumento no ticket médio
  • -45% de taxa de abandono de carrinho
  • -62% de taxa de abandono no cadastro

Performance técnica:

  • 80% de redução no peso da página
  • 90% de redução em poluição visual e inconsistências
  • 3.2s → 0.8s tempo médio de carregamento

Eficiência operacional:

  • +40% de otimização na velocidade de entrega do time
  • -65% de retrabalho em componentes
  • -50% de tempo para implementar novas features

Satisfação:

  • NPS aumentou de 32 para 71
  • -70% nas dúvidas de suporte relacionadas ao funcionamento da loja

Resultado Final

Antes: Loja confusa, identidade visual desalinhada, baixa conversão e desconfiança dos usuários.

Depois: Loja limpa, design system consistente, alta conversão, escalabilidade e confiança estabelecida.
  • Home redesenhada
  • Página de produto
  • Checkout simplificado
  • Página "O que é o Shopclub?"
  • Design system/componentes

Reflexão e Aprendizado

O redesign completo do Shopclub provou que clareza na comunicação e consistência visual são fundamentais para conversão em e-commerces de nicho.

Principais aprendizados:

  1. Educação do usuário é tão importante quanto a interface - a seção "O que é o Shopclub?" foi determinante para reduzir desconfiança.
  2. Design system escalável acelera entregas e garante consistência - a criação do sistema de componentes no Storybook reduziu em 40% o tempo de trabalho da equipe.
  3. Simplicidade visual aumenta confiança e reduz fricções - remover 90% da poluição visual foi crucial para melhorar a percepção de qualidade.
  4. Teste A/B com dados reais valida decisões de design com precisão - os números provaram que as decisões tomadas estavam corretas.