UX Research UI Design Front-end

Otimizando o agendamento de barbearias via Interface Conversacional

Como transformei um processo manual e demorado no WhatsApp em uma experiência autônoma de 45 segundos.

O Contexto

Barbearias Locais & Agendamento Manual

Pequenas barbearias dependem quase 100% do WhatsApp. O problema? O barbeiro não pode cortar cabelo e responder mensagens ao mesmo tempo. Isso gerava uma lacuna de resposta de até 2 horas.

O Problema Real

Perda de Receita por Fricção

"Clientes desistem do agendamento se a resposta demora mais de 10 minutos ou se o processo exige baixar um app novo (login/senha)."

O Desafio (HMW)

"Como podemos automatizar o agendamento mantendo a familiaridade do chat, sem exigir cadastro ou login complexo?"

Ficha Técnica

Meu Papel

Product Designer (End-to-End)

Liderei desde a descoberta até o código final.

Duração

3 semanas

O Que Fiz
  • UX Research & Benchmarking
  • User Flows & Wireframing
  • UI Design & Prototipagem
  • Front-end (HTML/CSS/JavaScript) e Back-end (PHP)

Pesquisa & Insights

Antes de desenhar telas, analisei concorrentes e conversei com usuários para entender as barreiras reais.

Insight Chave

Benchmarking: A Prova dos Dados

Analisei que 90% dos agendamentos ocorriam via texto (WhatsApp).

Por isso, decidi não criar um app tradicional (com menus complexos), mas sim uma Web App Conversacional.

Canais de Agendamento
Texto / Chat 90%
Telefone / Outros 10%

Concorrência

Apps concorrentes (ex: Booksy) exigem download e cadastro.

Ponto de Dor: Barreiras de entrada altas causam abandono.

Entrevistas

Falei com 5 clientes recorrentes de barbearias.

Voz do Usuário: "Eu só quero marcar o horário, não quero criar conta."

Decisão Estratégica

Eliminar login e usar o número de telefone como ID único.

Ação: Interface 100% web, sem download.

User Flow: O Caminho Feliz

Home/Link
Escolher Serviço Design Conversacional
Selecionar Horário
Confirmação

Reduzimos o fluxo de 6 etapas (padrão de mercado) para apenas 3 interações principais.

Wireframes & Estrutura

Foco na hierarquia da interface do cliente (Chat). A estrutura foi desenhada para mimetizar uma conversa natural.

1. Boas-vindas

2. Serviços

3. Horários

4. Ticket Final

Agendar Novo Horário

Interface Final & Decisões de Design

Interface Mobile (Interativa)

1

Familiaridade Cognitiva

Ao invés de formulários tradicionais, usei bolhas de conversa. Isso reduz a ansiedade do usuário, pois o modelo mental é idêntico ao WhatsApp, ferramenta que ele já domina.

2

Lei de Fitts & Thumb Zone

Os botões de seleção de serviço têm altura de 56px e ocupam a largura total. Isso facilita o toque com o polegar (thumb zone) e evita erros de clique (misclicks).

3

Feedback Imediato

Diferente de sistemas que enviam e-mail de confirmação, o app dá feedback visual instantâneo na tela e permite download direto do lembrete, fechando o loop de confirmação em segundos.

Design System Simplificado
Primary
Surface
Aa Inter

O Lado do Profissional: Dashboard de Gestão

Enquanto o cliente conversa com o "Bot", o barbeiro recebe tudo estruturado em um painel administrativo. O objetivo aqui foi eliminar o ruído e focar no que importa: o próximo corte.

Sincronização em Tempo Real

Assim que o cliente confirma o horário no chat, o slot é bloqueado na agenda do barbeiro instantaneamente.

Funcionalidades Chave

  • Agenda Visual: Cards grandes e legíveis para consulta rápida entre atendimentos.
  • Controle de Receita: Métricas financeiras simplificadas (Diário/Mensal) sem complexidade de ERP.
  • Relatórios Rápidos: Visão clara de quais serviços são mais rentáveis.

Toque nas setas para navegar. Zoom aplicado para melhor leitura.

Resultados & Impacto

Tempo de Agendamento

Telefone/WhatsApp ~4 min
Nova Solução 45s
81% mais rápido

Fricção de Entrada

Login Obrigatório
Apps
0
Este App

A remoção da barreira de login/senha aumentou a taxa de conversão no primeiro acesso.

Nível de Autonomia

100%

Gestão Automatizada

Barbeiro foca apenas no corte.

Aprendizados do Projeto

O que funcionou, o que foi difícil e como esse projeto moldou minha visão de produto.

Login é Barreira

Confirmar a hipótese de que "usuários desistem no cadastro" mudou o rumo do projeto. Às vezes, a melhor autenticação é a que não existe (usando apenas o número de telefone).

Interfaces Familiares

Não tente reinver a roda. Ao mimetizar a interface do WhatsApp, reduzi drasticamente a curva de aprendizado, permitindo que usuários de qualquer idade usassem o app sem manual.

Visão Full-Stack

Desenvolver o backend (PHP) me fez um designer melhor. Entender como os dados trafegam me ajudou a criar fluxos mais lógicos e evitar "becos sem saída" na interface.

Gostou da solução?

Além do design, desenvolvi a aplicação completa para validar a viabilidade técnica. O código é aberto e está disponível para análise.

JavaScript HTML PHP CSS Figma