Boba App

Visão geral

O Boba é um app de Sarajevo, na Bósnia e Herzegovina, que ajuda negócios a criar os próprios programas de fidelidade. Os clientes ganham e trocam pontos, os bobas, nos lugares que frequentam. Os donos definem as recompensas, e os funcionários confirmam cada compra lendo o QR code do cliente.

Papel

Redesign de app: fluxos e interface

Escopo

Redesign do app com protótipo de alta fidelidade

Setor

Varejo

O desafio

O time do Boba queria redesenhar o app multiplataforma antes do desenvolvimento. Um produto só tinha de servir a três pessoas com objetivos diferentes. O cliente junta recompensas, o dono gerencia as ofertas e o funcionário confirma as compras no balcão. Fui contratado para desenhar as telas principais e os padrões e para ajudar no fluxo do usuário.

Pesquisa e direção

O projeto começou com uma reunião de kickoff com o cliente e o desenvolvedor. Antes das telas principais, compartilhei no Figma uma página de referências e um guia de estilo. O time escolheu o que fazia sentido para o produto, como a barra inferior com o botão de QR em destaque, uma tela de QR clara, a navegação por categoria, uma home para os donos e gráficos de estatísticas. Essas escolhas definiram a navegação e o sistema visual.

Decisões principais

• iOS primeiro. O app é multiplataforma, então perguntei para qual sistema desenhar primeiro. Escolhemos o iOS e combinamos de apontar qualquer tela que precisasse de outro padrão no Android.
• O item antes do código. Propus uma página do item com fotos e descrição completa antes do QR code, para o cliente saber o que vai receber antes de mostrar o código no balcão. O cliente concordou.
• Vários itens numa visita só. O cliente trouxe um caso real. Quem pede um bife e uma cerveja ganha recompensa pelos dois, mas um QR code por item podia dar a impressão de que só uma recompensa conta. Mudei o fluxo para o funcionário ler o cliente uma vez e somar todos os itens da visita na mesma transação.
• Uma conferência antes dos pontos. Antes de os bobas irem para o cliente, o funcionário confere as recompensas e os dados do cliente numa tela de confirmação, e o erro se resolve ali mesmo, no balcão.
• Regras definidas pelo dono. Do lado do dono, o editor de itens define quantos bobas cada item rende, e as recompensas que o cliente vê saem do próprio negócio.

Decisões de design

Arraste a barra em cada quadro para comparar a primeira versão, à esquerda, com o redesign, à direita.

A home ajuda o cliente a escolher um local.

A primeira versão tinha categorias e cards com imagens provisórias. A nova home ganhou busca de lojas, ordenação e favoritos, e cada card mostra a foto, a nota e a categoria do local.

Antes Depois

A página do local mostra quanto vale cada item.

A primeira versão listava recompensas e ofertas em blocos simples. A nova página divide o local em itens, visão geral e ranking, e cada item mostra a foto, o preço e os bobas que rende ou custa.

Antes Depois

O funcionário escaneia o cliente uma vez só.

Na primeira versão, o funcionário procurava as recompensas num campo de busca. Na nova tela, ele escaneia o cliente uma vez e põe todos os itens da visita, com a quantidade de cada um, na mesma transação.

Antes Depois

O dono vê o negócio na primeira tela.

A primeira versão abria num único banner de estatísticas. A nova home mostra clientes, fidelidade e bobas emitidos e resgatados no local e no período escolhidos, com a próxima cobrança e um gráfico de vendas.

Antes Depois

O cliente recebe um recibo.

Esta tela não existia. Depois do escaneamento, o cliente recebe um recibo com o local, cada item e os bobas ganhos, como o time do Boba pediu durante o projeto.

Novo

Handoff

O cliente e o desenvolvedor revisaram as telas nos comentários do Figma, nos detalhes que importam no código. Eles trataram do tamanho dos botões, das descrições longas, do nome da loja em cada item e de ícones iguais aos da biblioteca que o app usa.

Resultado

Entreguei todas as telas e a animação de abertura com o logo. O cliente deu nota 5.0 ao projeto no Upwork.