UX / E-commerce

Loucos por Pontos

2019

Cliente

Corinthians

Empresa

BPF

Programa

Loucos por Pontos

Período

2019 — 2020

Ano

2019

Serviços

UI Design, Prototipagem, Auditoria de concorrentes, Análise de dados

Ferramentas

Adobe XD, Google Analytics, Hotjar

Resumo

Diagnóstico de UX e redesenho de três frentes do programa de fidelidade do Corinthians, dentro da plataforma white-label da BPF: o catálogo, a compra de pontos e o pagamento híbrido em pontos + dinheiro.

Desafio

Um catálogo que ninguém rolava
e um pagamento que saía da página

01

Taxa de rejeição de 47,41% e permanência média de 56 segundos, medidas no Analytics antes de qualquer desenho

02

80% do tráfego era mobile, e o site vinha sendo desenvolvido desktop-first

03

Apenas um produto por vez aparecia na listagem mobile — 15 produtos custavam 10.524 px de rolagem

04

O filtro tomava boa parte da tela, principalmente em trocas e no mobile

05

O pagamento saía da página: a compra de pontos abria num lightbox do PagSeguro, por cima do site

06

Nenhuma área de ajuda, e uma notificação despadronizada para cada ação no site

O catálogo em produção, agosto de 2019: o filtro ocupa a tela inteira e cabe um produto por vez — 149 produtos em 10 páginas.

Processo

Ferrari Framework
aplicado ao projeto

01

Descoberta

Analytics e gravações de sessão (Hotjar, Mouseflow); auditoria dos fluxos de cadastro de Nubank, BTG e Easynvest

02

Definição

Cinco frentes escritas antes de desenhar: busca, espaçamento, filtro e ordenação, listagem e navegação de fim de página

03

Ideação

Compra de pontos explorada em três alternativas concorrentes — da página atual reorganizada à compra transparente em 3 cliques

04

Design

Telas de alta fidelidade em Adobe XD para desktop (1280px) e mobile (320px)

05

Entrega

Protótipos navegáveis por frente — 102 interações na compra de pontos, 122 no pagamento híbrido

As cinco frentes escritas antes de desenhar — e, embaixo, a página de compra de pontos entrando como sugestão do designer.

As três alternativas nomeadas no próprio arquivo: atual com modificações, compra transparente e compra transparente em 3 cliques.

Opção 01: a página existente reorganizada — os pacotes viram pastilhas e o preço reage embaixo.

Opção 02, etapa 2: os dados do cliente em duas colunas, dentro da própria página de compra.

Opção 02, etapa 3: o pagamento acontece na página, com o resumo da operação ao lado — é daí que vem o nome “compra transparente”.

Entrega

Três frentes redesenhadas
e um número que dá para refazer

Os números abaixo são de projeto, não de operação: contam o que foi desenhado e prototipado. O acervo não guarda medição posterior ao lançamento, então o case não afirma nenhuma — o que dá para conferir, e refazer, é a redução de rolagem.

3,6×

Menos rolagem por produto no catálogo

3

Alternativas concorrentes para a compra de pontos

4

Combinações de pontos + dinheiro, em escada discreta

122

Interações prototipadas no pagamento híbrido