Todos os projetos

Balcão

Projeto Balcão, da fila no caixa ao fiado cobrado e ao estoque reposto.

Me dê um Oi!
Projeto de
UX/UI Design
Ano
2026
Conclusão
4 meses
Tipo de Projeto
Projeto Pessoal
Capa do projeto Balcão

Resumo

Redesenhei um sistema de ponto de venda para adegas e depósitos de bebidas de bairro. A primeira versão parecia um sistema genérico, cheio de números e sem próximos passos. A nova troca painéis por decisões: o caixa fica rápido no horário de pico, o fiado tem limite e cobrança pronta e o estoque avisa antes de faltar.

Meu papel
UX/UI Designer, projeto individual
Plataformas
Desktop e mobile
Para quem
Donos de adegas e depósitos de bebidas
Ferramentas
Figma

01Contexto

Quem vende no balcão não tem tempo para planilha

O Balcão nasceu de uma rotina que conheço de perto. Como representante comercial no setor de bebidas, convivo com donos de adegas e depósitos que atendem a fila, recebem o fornecedor e controlam o fiado ao mesmo tempo, muitas vezes num caderno.

A primeira versão do app já cadastrava produtos e registrava vendas, mas se comportava como um sistema genérico: onze menus no mesmo nível, painéis cheios de números e nenhum próximo passo.

  • 11menus no mesmo nível na primeira versão
  • 0próximos passos no painel
  • 1jeito de adicionar produto no caixa

“Como ajudar o dono de uma adega a vender mais rápido, perder menos mercadoria e receber o que lhe devem, sem aumentar o trabalho do dia a dia?”

Tela inicial do Balcão com vendas do dia e alertas
Números da primeira versão e a pergunta que guiou o projeto

02Persona

Carlos não pode parar a fila

Organizei o que observo no dia a dia numa persona: Carlos Souza, dono e único caixa de uma adega de bairro. Ele abre às 8h, fecha às 23h, usa o celular para tudo e o computador só no balcão, quase sempre com uma mão no produto.

“No sábado a fila dobra. Se eu parar pra procurar produto no sistema, o cliente vai embora.”

O que o Carlos precisa

  • Atender a fila rápido nos horários de pico
  • Saber no fim do dia se teve lucro
  • Cobrar o fiado sem constrangimento
  • Não ficar sem o produto que mais vende no fim de semana
Persona Carlos Souza com objetivos, frustrações e contexto de uso

03Dores e soluções

Cinco dores guiaram cada decisão

Cada dor do balcão virou uma solução concreta, e três princípios passaram a valer para todas as telas: rápido no pico, ação em vez de só número e a linguagem do próprio balcão, como “fiado”, “repor” e “troco”.

  • Fila no pico: grade de mais vendidos, leitor de código e atalhos de teclado
  • Fiado no caderno: limite por cliente e cobrança pronta no WhatsApp
  • Perda por validade: alerta com antecedência e sugestão de promoção
  • Falta no fim de semana: pedido sugerido pela média de vendas
  • Lucro no escuro: margem por produto e lucro estimado do dia
Tabela com as cinco dores do balcão e a solução de cada uma

04Arquitetura

De 11 menus para 4 grupos

Reorganizei a navegação em quatro grupos que seguem a rotina: Início, Vender, Estoque e Financeiro. A calculadora de preço virou parte do cadastro de produto, e Clientes passou a viver dentro de Fiado, onde o dono realmente precisa deles.

Antes e depois da arquitetura de informação

05Telas

Uma venda comum em 3 passos

O Caixa ganhou grade de mais vendidos, leitor de código de barras, atalhos de teclado e troco automático. Uma venda acontece em três passos, sem tirar a mão do produto.

O Fiado ganhou limite por cliente e cobrança pronta no WhatsApp. O Estoque passou a avisar antes, com pedido sugerido pela média de vendas. Todos os alertas seguem a mesma regra: contexto em uma linha e o próximo passo como botão. A versão mobile leva o caixa para o celular, com a câmera como leitor e Pix por QR code.

Tela do caixa com grade de mais vendidos e os passos da venda
Painel da primeira versão comparado com o novo Início
Telas de fiado e de estoque
Caixa no celular com câmera como leitor e Pix

06Interface

Cores que carregam significado

O projeto ganhou um sistema visual próprio, pensado para leitura rápida no balcão. A tipografia é a Inter, com números grandes e destacados, e a cor nunca aparece sozinha: sempre vem acompanhada de texto.

  • Azul#3D5AFE · Ação e navegação
  • Âmbar#FFB020 · Atenção
  • Vermelho#DC2626 · Urgência
  • Verde#16A34A · Dinheiro entrando
Cores, tipografia, componentes e fundamentos do sistema visual

07Próximos passos

Como vou saber se funcionou

O próximo passo é validar o fluxo de caixa com donos de adega reais, com testes de usabilidade e um protótipo navegável.

  • Tempo por venda, cronometrado no horário de pico
  • Percentual do fiado vencido pago até 7 dias depois da cobrança
  • Valor de produtos vencidos por mês, antes e depois dos alertas
Métricas para validar o redesign

08Aprendizados

O que levo desse case

Conhecer o negócio do usuário vale mais do que adicionar funcionalidades: o redesign tirou menus, não colocou. E um número só é útil quando vem com o próximo passo, regra que passou a valer para todas as telas.