Loja de resgate de pontos

Contexto

A loja é o terceiro produto do Reconhece. O painel distribui os pontos, o aplicativo mostra o saldo, e é aqui que o colaborador resgata: produtos das lojas parceiras, gift cards e recarga de contas digitais, tudo pago em pontos.

Quem compra aqui compra pela internet toda semana, mas não trabalha com isso. Foi esse leitor que definiu o texto do produto: frase curta, palavra do dia a dia e a regra dita antes da escolha — nunca no último passo.

Desafio

O teste com a loja antiga apontou dois problemas, e eles eram de naturezas diferentes:

• Faltava uma saída quando os pontos não cobriam o valor. Não havia como pagar a diferença, e o resgate parava ali. O painel já tinha ganhado o controle de quanto de um resgate pode ser pago com cartão, e faltava a loja usar esse limite.
• A loja antiga não conversava com o design system. Cada tela resolvia o mesmo componente do seu jeito, e a manutenção pagava a conta duas vezes: uma no desenho, outra no código.

Meu papel

Como nos outros produtos do Reconhece, conduzi a loja de ponta a ponta — do teste com o produto legado à documentação para o desenvolvimento:

• Teste de usabilidade do produto legado
• Mapeamento das jornadas de resgate
• Inventário e auditoria de conteúdo
• Arquitetura da informação e fluxos
• Wireframe, interface e protótipo navegável
• Aplicação e extensão do design system
• UX writing das regras de pagamento
• Teste de usabilidade do protótipo e handoff

Pesquisa

Testei a loja antiga com 15 participantes, no mesmo formato usado nos outros produtos do Reconhece. O objetivo era duplo: ver o que já corria bem na jornada e onde ela emperrava.

Dois caminhos de compra foram percorridos por todos:

• Resgate com saldo suficiente — o caminho comum, do produto ao comprovante.
• Resgate com saldo insuficiente, completando a diferença com cartão de crédito.

O segundo caminho é o que definiu o projeto. Na loja antiga ele não existia: sem pontos suficientes, o carrinho barrava a compra e não oferecia alternativa.

Pontos mais cartão

O cartão entra como complemento, não como substituto. A empresa define no painel quanto de um resgate pode ser pago em dinheiro, e a loja lê esse limite — no protótipo, 20%. Acima disso o resgate não avança, e a tela diz por quê.

A regra aparece antes da decisão, não no fim. O aviso nunca diz só “saldo insuficiente”: diz quanto falta e o que fazer — “Faltam 320 c$”, com a opção de completar no pagamento. Número concreto, caminho de saída, nenhuma culpa em quem lê.

O mesmo vale para o resto das regras difíceis: o gift card avisa que não volta para o saldo antes de você escolher o valor, o boleto avisa que não aceita pagamento parcial, e o frete aparece no resumo antes de qualquer botão de avançar. Esconder a regra até o último passo aumenta a conversão de um jeito que não se sustenta.

Design system aplicado

A loja foi a primeira integração completa ao novo ambiente do sys.vc, o design system do Reconhece. A versão anterior não tinha essa ligação: cada tela resolvia o mesmo componente do seu jeito, e o que mudava no sistema não chegava à loja.

Agora nenhuma tela redefine token. A loja compõe o que o sistema publica, e por isso muda de tema e de plataforma junto com o aplicativo e o painel — a mesma troca de atributo repinta os três produtos.

A loja também devolveu peça nova ao sistema: o Cartão de pedido e o esqueleto de carregamento nasceram aqui e passaram a estar disponíveis para os outros produtos.

Protótipo navegável

Abaixo não é print: é a loja rodando dentro desta página. Navegue pelas categorias, coloque um produto no carrinho e siga até o pagamento — é ali que o limite do cartão aparece. A chave na barra troca entre a versão de telefone e a de tablet.

É o mesmo protótipo nas duas larguras — o que muda é a composição de cada tela, decidida pelos mesmos pontos de corte do produto. Em telas estreitas a versão de tablet aparece reduzida, como uma maquete, para continuar sendo a de tablet. Para a versão de tela larga, use o botão da barra.

Resultados

Os números vêm do teste de usabilidade com o protótipo, feito com 15 participantes. O grupo foi diferente do que testou a loja antiga, para que ninguém avaliasse o desenho novo com a lembrança do antigo — e para tirar do resultado o viés de confirmação.

O carrinho misto era a aposta mais arriscada do projeto: um item que vira código e outro que chega em casa, na mesma compra. 67% dos participantes percorreram esse fluxo sem ajuda — e o gift card, que na loja antiga não convivia com produto físico, passou a funcionar sozinho e acompanhado. É o menor dos três números porque é o caso mais difícil, e mesmo assim ele se sustentou no teste. O que fica para a próxima rodada é clareza de texto, não outro fluxo.

Stack e ferramentas

Pesquisa

Teste de usabilidade · Mapeamento de jornada · Google Meet

Design

Figma · Miro · Octopus

Entrega

Design System · Design Tokens · Documentação de componentes

Método

Protótipo navegável em HTML e CSS · UX writing das regras de pagamento · Acessibilidade WCAG 2.1 AA