fran
QUICK MARKET · ESTUDO DE CASO
De um projeto de faculdade em 2016 a um app de compras em grupo
As compras em grupo ficam divididas em três apps, o que causa estresse, erros de conta e itens esquecidos. O Quick Market reúne a lista de compras, o chat do grupo e a divisão de custos em um só app.
Resumo
TIPO DE PROJETO
Projeto pessoal, iniciado em 2016 como desafio da faculdade e totalmente reconstruído em 2025
FERRAMENTAS
Figma
FUNÇÃO
UI/UX Designer, projeto solo
DURAÇÃO
3 meses
PLATAFORMA
Mobile Android e IOS
Contexto
O Quick Market é uma interface criada para resolver o caos das compras em grupo. Pode ser um churrasco com amigos ou uma festa surpresa: o app reúne a lista de compras, o chat e a divisão de custos em um só lugar.
O projeto começou em 2016 como um desafio da faculdade. Em 2025, eu o reconstruí do zero. O objetivo dessa atualização foi aplicar os padrões atuais de UI, mais acessibilidade e uma arquitetura da informação mais fluida.
O problema
As compras em grupo costumam ficar espalhadas em três apps: WhatsApp para a conversa, Notas para a lista e Splitwise para a divisão.
O atrito
A informação se perde entre essas plataformas. Isso gera estresse, erros nas contas e itens esquecidos.
O objetivo
Criar um único ecossistema que conecte toda a jornada, do planejamento até o acerto das contas.
Benchmarking e referências visuais
Para construir a nova interface, analisei os pontos fortes e os pontos de atrito de três produtos conhecidos:
Referência em taxonomia e categorias, mas com muito ruído visual (pop-ups e avaliações).
Ótima lógica de cálculo, mas a interface parece datada e os anúncios interrompem o fluxo.
O padrão de ouro em comunicação rápida, mas pouco eficiente para gerenciar uma lista de compras ou proteger dados financeiros.
Arquitetura e ideação
O redesign teve como foco reduzir a carga cognitiva. Organizei a jornada do usuário em quatro fluxos essenciais:
4. DIVISÃO
Uma divisão inteligente e transparente do valor final.
Mapeei esses fluxos em um diagrama de user flow que mostra cada tela e decisão, do login ao pagamento e às configurações.
1. INTEGRAÇÃO
Um cadastro simples (Google, Apple ou formulário).
2. FLUXO DE COMPRA
Escolher itens e gerenciar a lista compartilhada.
3. FINALIZAR COMPRA
Um fluxo de pagamento integrado (pagar no caixa, cartão de crédito ou débito, ou Pix).
Principais funcionalidades
COMUNICAÇÃO
CONTEXTUAL
Diferente de um chat comum, a conversa acontece dentro do evento. Os participantes veem o status da lista em tempo real ("Alguém já pegou o carvão?"), o que evita compras duplicadas.
TRANSPARÊNCIA
FINANCEIRA
Um painel limpo responde a três perguntas de relance: quem pagou o quê? Quanto eu devo? Quem me deve?
CONTROLE HÍBRIDO (ONLINE E OFFLINE)
A interface permite registrar compras feitas fora do app. O usuário fotografa o recibo, e o app lê a imagem e soma o gasto ao grupo. Esta funcionalidade é um conceito de design.
Design System
O briefing original me deu apenas um logo, então construí do zero um design system escalável.
CORES
PALETA PRIMÁRIA
Chalet Green 600
#507140
PALETA SECUNDÁRIA
Shark 200
#E6E5E6
Picton Blue 50
#F0FAFF
Buttercup 400
#F2B02E
TIPOGRAFIA · HEEBO
Título H1
Título/Botão
Botão/Menu
Corpo
Detalhe
COMPONENTES
Desenhei os componentes em torno das três funções do app: conversar, comprar e dividir. Toda área de toque tem pelo menos 44px de altura, porque as pessoas usam o app com uma mão enquanto andam pelo supermercado.
BOTÕES
Uma ação forte por tela. O verde é para o passo principal e o escuro é só para pagamento, então as pessoas sempre sabem quando há dinheiro envolvido.
MENSAGEM DE CHAT
Cada pessoa tem uma cor de nome, então um chat de grupo movimentado continua fácil de acompanhar. Minhas mensagens usam o verde suave.
SLIPT CARD
Shark 900
#1F1E20
Shark 700
#424144
Picton Blue 400
#2EC1F2
Flamingo 500
#F25B2E
Bold · 20px · line height 28px
Bold · 16px · line height 24px
Bold · 12px · line height 20px
Regular · 12px · line height 20px
Bold · 8px · line height 16px
CAMPO DE TEXTO
Rótulos claros acima do campo e mensagem de erro em palavras, não só em cor. Estados padrão, foco e erro.
ITEM DA LISTA DE COMPRAS
Itens marcados mostram quem comprou, o que evita compras duplicadas. O seletor torna rápida a mudança de quantidade.
Shark 50
#FAF9F9
Fuchsia Pink 600
#D12FBE
Chalet Green 100
#E2EBDC
Mexican Red 800
#9C2323
Responde às perguntas "quem pagou, quem deve" num relance. Os chips de status associam uma cor a uma palavra, sendo assim também úteis para utilizadores daltónicos.
Prototipagem
Dividi a prototipagem em duas etapas para que a lógica de negócios (compras e divisão) não ficasse oculta pelo estilo visual.
Lojas: Escolha o supermercado para o evento.
Nova conversa: Inicie um novo evento ou contato, com os contatos frequentes no topo.
Conversas: Veja todos os seus grupos em um só lugar.
Adicionar membros: Selecione pessoas da sua lista de contatos para participar do grupo.
Bate-papo em grupo: Converse com o grupo dentro do evento.
Compras: Confira os itens e suas quantidades antes de pagar.
BAIXA FIDELIDADE (WIREFRAMES)
Meu foco foi a hierarquia das informações nas listas de compras e o fluxo das telas de pagamento.
Decisão de design: Optei por uma barra de abas na parte inferior para facilitar o uso do aplicativo com uma só mão, o que é comum quando as pessoas fazem compras em um supermercado.
Gestão de membros: Veja quem está presente no evento, com um contador de membros.
Divisão: Veja como o total é dividido entre os membros.
Lista de itens: Selecione os produtos para a lista compartilhada.
Pagamento: Veja o total e confirme o pagamento.
Quantidade de itens: Defina a quantidade de cada item selecionado.
Alta fidelidade
Na versão final, apliquei o sistema de design a todas as telas.
CONVERSAS
COMPRAS
Cada evento exibe uma contagem de progresso (por exemplo, "9/20 itens comprados"), para que os usuários saibam o status da lista sem precisar abrir o chat.
Os itens são agrupados por categoria, com o resumo do carrinho e o total sempre visíveis.
PAGAMENTO
CONFIGURAÇÕES
O usuário escolhe um método de pagamento e revisa a compra antes de confirmar com um botão verde transparente.
Uma lista simples com opções de conta, privacidade, notificações, pagamento e ajuda.
