Design que funciona. é bonito. é autoral. comunica. converte. resolve. impressiona. vende.

[ 01 · ux research · bot design · 2026 ]

Maré 🌊

Bot de WhatsApp de apoio gratuito à maternidade para mães de baixa renda no Brasil. Pesquisa, arquitetura de conversação e prototipagem de impacto social.

Visão geral

O problema

O Brasil tem cobertura universal de saúde no papel. Na prática, mães de baixa renda enfrentam três barreiras críticas:

• Desinformação sobre direitos: a maioria não sabe que pode ter acompanhante no parto (Lei 11.108/2005), pedir analgesia ou recusar procedimentos sem justificativa
• Saúde mental invisível: a depressão pós-parto afeta 1 em cada 4 mães brasileiras, mas o estigma impede a busca por ajuda. A palavra "frescura" aparece com alta frequência na netnografia
• Barreira de acesso digital: apps de saúde pressupõem internet rápida, smartphone de alto nível, tempo e literacia digital que esse público não tem

2,8 milhões de partos por ano ocorrem pelo SUS. Grande parte das complicações evitáveis está ligada à falta de informação precoce.

Restrição que moldou o projeto

Entrevistas diretas com o público não eram possíveis nessa fase por falta de acesso a redes de ACS ou UBS. A restrição levou à netnografia como método principal: observação sistemática de comportamento real em ambiente digital, mais ecológica do que entrevistas laboratoriais para esse perfil.

Pesquisa: Discover

Netnografia (método principal)

Análise de 12 fontes digitais onde mães de baixa renda se expressam naturalmente: grupos de WhatsApp (via prints públicos), comunidades Reddit, fóruns de gestantes, comentários em vídeos do YouTube e grupos fechados do Facebook. Critério de seleção: presença confirmada de mães de baixa renda, linguagem informal, discussões espontâneas sem mediação profissional.

Insight central: a mãe não quer um app de saúde. Ela quer alguém de confiança que fale a língua dela, no canal que ela já usa, sem julgamento.

Survey (complementar)

9 respondentes com limitação crítica reconhecida: amostra tendenciosa com escolaridade superior e acesso digital facilitado, não representativa do público-alvo. Usada apenas como dado qualitativo de suporte. 100% das respondentes usam WhatsApp como canal principal de busca informal de informação de saúde.

Base de conhecimento clínica

18 pesquisas em fontes oficiais para garantir que o bot não tivesse lacunas de conteúdo: Ministério da Saúde, FIOCRUZ, CFM, OMS e legislação (Lei 11.108/2005, Lei 14.737/2023, Lei 14.721/2023). Resultado: 9 módulos, 60 tópicos, zero estados sem resposta.

Definição: Define

Problem Statement: mães de baixa renda no Brasil precisam de acesso a informação confiável sobre saúde materna de forma acolhedora e sem barreiras, porque o sistema atual ou não chega até elas, ou chega de forma intimidante, técnica e sem empatia.

Por que WhatsApp e não app nativo

Prototipagem: Develop

Evolução iterativa

v1 Linear: fluxo único para todas as usuárias. Problema grave: pós-parto recebia "medo do parto" como opção. Erro de contexto.

v2 Contextual: introdução da variável uCtx: 'gravida' | 'pos'. Menu e opções tornam-se funções do contexto. Bug de contexto resolvido.

v3 Texto livre (rejeitado): tentativa de tornar a conversa mais fluida com input de texto. Aumentava carga cognitiva em momento vulnerável. Revertido.

v4 Expandido (versão atual): 55 estados, 8 módulos, cards de alerta visual âmbar para emergências, copy revisada por especialista.

Decisões de design notáveis

• Botões em vez de texto livre: botões não são limitação, são alívio cognitivo quando a usuária está exausta ou assustada
• Alertas visuais âmbar: estados de emergência usam cor distinta sem depender de leitura completa
• Delay progressivo nas mensagens: cada bubble aparece com 300ms de intervalo, simulando digitação humana e reduzindo "dump de texto"
• Copy validada pela netnografia: "posto" e não "UBS", "neném" e não "bebê", "tá" e não "está". Cada palavra verificada contra o vocabulário encontrado na pesquisa

Arquitetura da conversa

Hipóteses testadas ao longo do processo

Journey Map resumido

Aprendizados

O que funcionou: a netnografia revelou padrões comportamentais que entrevistas formais dificilmente captariam. A base de conhecimento construída antes da prototipagem garantiu que nenhum fluxo terminasse sem resposta. A restrição de botões foi testada, questionada e mantida com evidência.

O que faria diferente: recrutaria ao menos 3 mães reais via ACS antes de iniciar o protótipo, mesmo sem roteiro formal. Testaria a copy antes da arquitetura, a revisão de linguagem revelou padrões que teriam mudado os próprios estados.

Tensão não resolvida: o maior risco do design é o gap entre o que a netnografia revelou e o que uma mãe de periferia com acesso 3G realmente entende e usa. Esse gap só fecha com teste real, que é o próximo passo.

Próximos passos

• Teste de usabilidade moderado com 5 mães reais via ACS ou UBS (roteiro pronto)
• Revisão do conteúdo clínico por enfermeira obstétrica
• Publicação via Typebot com WhatsApp Business API
• Parceria com prefeituras e editais de impacto social para distribuição

[ 01 · marketplace · ux case ]

Toc Toc

Marketplace de serviços que resolve a fricção de procurar demais e de divulgar em todo lugar.

Visão geral

Introdução

O mercado de serviços informais (encanador, eletricista, diarista, pintor, jardineiro) não tem um canal único. O cliente pergunta no grupo de WhatsApp do prédio, dá uma olhada no Instagram de quem foi indicado, pergunta para o vizinho, talvez ainda abra um app genérico, e em cada lugar recomeça a busca do zero, sem saber se vai achar alguém disponível a tempo.

Do outro lado, o profissional autônomo divulga onde dá: posta antes/depois no Instagram, entra em grupos de bairro, depende de indicação boca a boca, e às vezes ainda mantém um perfil em algum app de serviços. Cada canal exige esforço separado, e nenhum alimenta o outro. Reputação construída em um lugar não vale em nenhum outro.

É o mesmo problema visto dos dois lados: o cliente gasta tempo procurando em lugares diferentes até achar alguém; o profissional gasta energia divulgando em lugares diferentes até alguém aparecer. O Toc Toc nasce desse ponto: um lugar único onde o profissional divulga o trabalho e o cliente encontra rápido, sem multiplicar canal.

O problema

"Eu quero contratar um profissional, mas não quero ficar procurando muito." · "Eu quero divulgar meu trabalho, mas não quero usar um monte de plataformas diferentes."

Do lado do cliente

• Não sabe por onde começar a procurar: grupo de WhatsApp, Instagram, indicação e apps genéricos mostram profissionais diferentes, sem padrão
• Mesmo achando alguém, precisa repetir a mesma pergunta ("você atende minha região? está disponível quando?") em cada canal
• Decidir quem chamar vira tarefa manual: comparar perfis espalhados, conversas separadas, sem histórico nem avaliação centralizada
• Quando finalmente fecha com alguém, não tem visibilidade de quando a pessoa chega nem canal de contato dentro do mesmo lugar onde pediu

Do lado do profissional

• Precisa manter presença em vários canais ao mesmo tempo (Instagram, grupos de bairro, indicação) sem conseguir medir o que de fato traz pedido
• Pedidos chegam por canais diferentes (direct, mensagem de grupo, ligação, indicação verbal), sem padrão, sem histórico, sem controle de agenda
• Boa reputação construída em um canal (avaliação no Instagram, indicação de cliente antigo) não aparece em nenhum outro: cada novo canal começa do zero

Do lado do produto

• Sem um canal único, oferta (profissionais) e demanda (clientes) ficam dispersas em lugares diferentes, reduzindo a chance de um encontrar o outro
• Quanto mais fragmentado o mercado, mais lento e manual é o processo de decisão dos dois lados, e menos motivo para qualquer um deles parar de usar os outros canais

Por que esse problema existe

A maioria dos apps de serviço foi pensada como mais um canal: mais um lugar para cadastrar perfil, mais um lugar para publicar pedido. Isso não resolve a fragmentação: só adiciona mais um item a ela.

Na prática, o profissional autônomo usa o que já tem: WhatsApp para falar com cliente, Instagram para mostrar trabalho, indicação boca a boca para conseguir o próximo. Cada canal exige esforço separado (produzir conteúdo, responder mensagem, atualizar disponibilidade), sem que um alimente o outro.

Do lado do cliente, a busca também é espalhada: pergunta no grupo, procura no Instagram, talvez abra um app, e em cada lugar recomeça a pesquisa do zero, sem saber se vai achar alguém disponível para quando precisa.

Necessidades em conflito

O alinhamento existe: todo mundo ganha se descoberta e divulgação acontecerem no mesmo lugar. O que faltava era o desenho que tornasse esse lugar bom o suficiente para substituir os outros canais, não só se somar a eles.

Personas

Cliente: Fernanda, 34 anos, designer freelancer, Rio de Janeiro

Mora sozinha, trabalha em home office. Quando precisa de um profissional, normalmente pergunta no grupo de WhatsApp do prédio, dá uma olhada no Instagram de quem foi indicado e às vezes ainda abre um app genérico, e demora para decidir porque cada lugar mostra uma informação diferente: preço aqui, disponibilidade ali, avaliação em outro. Queria resolver isso em um lugar só, rápido.

O que pensa:

• "Eu não quero ficar pulando de grupo em grupo até alguém responder."
• "Se eu já vi que esse profissional é bem avaliado, não devia precisar checar em outro lugar de novo."
• "Eu só quero abrir um app, pedir, e já saber que alguém vai aparecer."

Profissional: Carlos Mendes, 41 anos, bombeiro hidráulico autônomo, Tijuca (RJ)

Trabalha por conta própria há 10 anos. Hoje divulga o trabalho em três lugares ao mesmo tempo: Instagram (onde posta antes/depois dos serviços), grupos de bairro no WhatsApp e indicação direta de clientes antigos. Cada canal recebe pedido de um jeito diferente (direct, mensagem, ligação) e ele não consegue centralizar nada disso. Às vezes perde pedido porque demorou para ver a mensagem em outro app.

O que pensa:

• "Eu não tenho tempo de ficar postando em três lugares diferentes para conseguir o mesmo cliente."
• "Queria que meu histórico bom contasse em qualquer lugar, não só onde eu já estou."
• "Se tivesse um lugar só onde o cliente já me encontra, eu não precisava ficar correndo atrás."

Journey Map: antes e depois

HMW: perguntas que guiaram o design

• Como podemos fazer com que o cliente encontre um profissional disponível sem precisar procurar em vários canais?
• Como podemos fazer com que o profissional divulgue seu trabalho em um lugar só, sem depender de múltiplas plataformas?
• Como podemos transformar reputação espalhada em um histórico único que vale em qualquer pedido?
• Como podemos reduzir o tempo entre "preciso de um serviço" e "pedido feito"?

A solução

1. Endereço desde o cadastro

Centraliza o dado mais usado para a busca por proximidade: em vez de cliente e profissional informarem localização toda vez, em cada conversa, o dado já existe desde o onboarding. Para o cliente, é o endereço padrão de atendimento (editável a cada pedido); para o profissional, é a base usada para identificar pedidos próximos.

2. Categorias redesenhadas

A home do cliente trocou a grade de emojis por uma lista vertical: ícone pequeno, faixa de cor de destaque à esquerda, nome da categoria e contagem de profissionais disponíveis. É o ponto de entrada único: em vez de procurar "eletricista perto de mim" em três lugares diferentes, o cliente abre uma lista com quem está disponível na hora.

3. Sistema de reputação por níveis

Bronze, Silver, Gold e Platinum, para cliente e para profissional, com critérios diferentes:

• Cliente: baseado em pedidos concluídos + nota média dada. Sobe de nível e ganha desconto progressivo (5%, 10%, 15%) em novos pedidos.
• Profissional: baseado em trabalhos concluídos + nota média recebida. Sobe de nível e ganha bônus progressivo sobre o valor do serviço (5%, 10%, 15%).

Como ninguém quer ficar comparando avaliação espalhada entre Instagram, grupo de bairro e indicação, o selo de reputação centraliza esse histórico em um lugar só, e aparece em todo lugar onde a pessoa é mostrada: card de pedido, perfil, resultado de busca, chat.

Cada perfil tem um quadro de desempenho: nível atual, benefício associado, estatísticas e barra de progresso até o próximo nível, com a meta numérica explícita ("faltam X pedidos e nota média ≥ Y").

4. Chat pré-contratação: dos dois lados

Substitui as conversas soltas em WhatsApp e Instagram por um canal único dentro do app, com contexto e continuidade, sem cliente e profissional precisarem sair do Toc Toc para se falar.

• Cliente → no perfil do profissional, o botão "Tirar dúvidas antes de contratar" abre um chat real com o profissional. Depois da conversa, um atalho leva direto para o formulário de solicitação de serviço.
• Profissional → ao receber um pedido, antes de aceitar ou recusar, vê o perfil completo do cliente (reputação, histórico, taxa de cancelamento) e pode trocar mensagens para esclarecer o escopo, com opção de abrir o chat em tela cheia.

O chat usa o mesmo componente dos dois lados, adaptando contexto (quem é a outra pessoa, qual o serviço em questão) e oferecendo uma ação de continuidade (solicitar serviço / aceitar pedido) sem forçar.

5. Solicitação de serviço

Pedido formal e registrado dentro do app, em vez de mensagem solta que se perde em conversa de grupo. Modal com descrição do problema, endereço (pré-preenchido, editável) e seletor de data/horário via calendário, com validação inline em cada campo.

6. Acompanhamento em tempo real

Reduz a ansiedade de "não sei se a pessoa está vindo" sem precisar trocar mensagem fora do app para confirmar. Quando o profissional aceita e está a caminho, o cliente vê uma tela com mapa (trajeto até o endereço) e chat, modelo familiar de apps de entrega, aplicado a serviços. Do lado do profissional, a tela espelha isso: rota até o cliente + chat.

7. Histórico de pedidos (cliente)

Cliente não precisa lembrar em qual grupo ou conversa pediu determinado serviço da última vez: fica registrado. Lista de pedidos com filtros (Todos / Ativos / Concluídos / Cancelados); concluídos mostram duração do serviço, valor pago e permitem avaliação por estrelas; cancelados mostram o motivo. Pedidos ativos têm atalho direto para a tela de acompanhamento.

8. Perfis com gamificação

Para o profissional, é o substituto de manter posts e stories em vários canais só para mostrar que é bom no que faz: o histórico dentro do app já mostra isso. Tanto o perfil do cliente quanto o do profissional reúnem identidade, estatísticas e o quadro de desempenho (reputação); o profissional adicionalmente vê o bônus financeiro acumulado pelo nível atual.

Priorização: Matriz MoSCoW

Wireframes

Wireframes em baixa fidelidade (escala de cinza), derivados diretamente do protótipo funcional. Arquivo no Figma: Toc Toc, Wireframes (Case UX) ↗

1. Cadastro: Endereço

Campos Nome completo, E-mail, Senha; seção "Endereço de atendimento" com CEP, Número, Rua, Bairro, Cidade; botão primário "Criar conta"; atalhos de login social. Formulário único para cliente e profissional, o papel é definido em etapa anterior. O endereço deixa de ser perguntado a cada pedido: vira dado de perfil, reaproveitado e editável.

2. Home Cliente: Categorias

Saudação personalizada, busca, lista vertical de categorias com ícone, faixa de cor de destaque à esquerda, nome e contagem de profissionais disponíveis. Substitui a grade de ícones por uma lista: é o ponto de entrada único da busca, sem precisar abrir outro app ou grupo para ver quem está disponível.

3. Perfil do Profissional

Foto, nome, selo de reputação (🥇 Gold), nota e nº de avaliações, descrição/bio, estatísticas (pedidos concluídos, taxa de conclusão, tempo de resposta), avaliações recentes, botões fixos "Tirar dúvidas antes de contratar" e "Solicitar serviço". O selo de reputação aparece no topo do perfil, primeira informação visível, antes mesmo da bio.

4. Chat pré-contratação

Header com avatar, nome e selo do profissional; banner de contexto (categoria + localização); bolhas de mensagem (cliente à direita, profissional à esquerda); CTA "Solicitar serviço agora →"; campo de mensagem com envio. Estado vazio ("Inicie a conversa") → conversa em andamento → CTA de continuidade aparece após a primeira troca de mensagens. Mesmo componente é usado pelo profissional (modo espelhado) ao revisar um pedido pendente.

5. Solicitar serviço (modal)

Modal com descrição do problema (textarea), endereço de atendimento pré-preenchido e editável, seletor de Data e Horário. Validação inline por campo; endereço vem preenchido a partir do cadastro, mas pode ser alterado por pedido. Acessível tanto a partir do perfil do profissional quanto como atalho ao final do chat pré-contratação.

6. Acompanhamento (Tracking)

Mapa com trajeto, card de status ("Carlos está a caminho" + tempo estimado + barra de progresso), card do profissional com selo e atalho de chat, stepper de status (Aceito → A caminho → Em atendimento → Concluído), botão "Conversar com o profissional". Stepper avança conforme o profissional atualiza o status do serviço, modelo inspirado em apps de entrega, aplicado a um contexto de prestação de serviço doméstico.

7. Pedido: Visão do Profissional

Card do cliente (avatar, nome, selo de reputação) com estatísticas (pedidos feitos, nota média dada, taxa de cancelamento); card do serviço solicitado (descrição, data, endereço); seção de chat pré-aceite com atalho "Tela cheia ↗"; footer fixo com "Recusar" e "✓ Aceitar pedido". Esta é a tela que resolve a dor central do profissional: decidir com informação, não às cegas.

8. Histórico de Pedidos

Filtros (Todos, Ativos, Concluídos, Cancelados); cards de pedido com profissional/serviço, status, data, valor e avaliação por estrelas; pedidos cancelados mostram o motivo. Filtro "Todos" ativo por padrão; pedidos concluídos exibem nota dada; cancelados não exibem estrelas. Histórico alimenta diretamente o sistema de reputação: não é só um registro passivo.

9. Perfil: Gamificação

Identidade (avatar, nome, "cliente desde"), selo de nível atual, bloco "Desempenho" com estatísticas (pedidos concluídos, nota média, desconto atual), barra de progresso até o próximo nível com meta explícita, card de benefício atual. Barra de progresso reflete distância numérica até o próximo nível (ex.: "Faltam 3 pedidos e nota média ≥ 4.8 para Gold"). Versão equivalente existe para o profissional, com bônus financeiro no lugar do desconto.

Protótipo

O protótipo foi construído em React Native (Expo), navegável via export web, cobrindo o fluxo completo dos dois perfis (cliente e profissional), incluindo todas as telas descritas na seção "A solução".

Aprendizados

O que foi difícil

Resolver dois lados de um mesmo problema de fragmentação ao mesmo tempo, sem que a solução para um lado virasse mais um canal para o outro gerenciar. Cada decisão (busca por categoria, chat, reputação, histórico) precisava reduzir o "ficar procurando" do cliente e o "ficar divulgando" do profissional, na mesma tela.

O que esse projeto ensinou

O problema central não era falta de confiança: era falta de um lugar único. Cliente já confia em indicação, em avaliação de Instagram, em boca a boca; o que falta é não precisar pular entre esses lugares para decidir. Profissional já sabe divulgar o próprio trabalho; o que falta é não precisar fazer isso em três plataformas diferentes.

Isso muda o critério de prioridade: uma funcionalidade só entra se ela reduzir tempo de busca (lado cliente) ou consolidar divulgação (lado profissional). Reputação, chat e histórico só fazem sentido porque centralizam informação que hoje está espalhada: funcionalidade que não reduz fragmentação é só mais um canal disfarçado de solução.

Falar sobre um projeto →