Uma experiência de saúde mais clara

SUS — Minha Saúde é um projeto acadêmico de UX/UI desenvolvido na EBAC. A inspiração veio das dificuldades que observei em familiares que dependem da saúde pública: encontrar informações, agendar consultas e entender o que acontece depois.

A proposta explora como reunir consultas, exames e documentos de saúde em uma experiência mais clara, acolhedora e previsível, especialmente para quem tem pouca familiaridade com tecnologia.

Meu papel: pesquisa com usuários, definição do problema, análise de referências, fluxos, prototipação, testes de usabilidade, UX Writing e UI Design no Figma.

Entrega: protótipos de baixa e alta fidelidade, 35 telas e estados do aplicativo, documentação da pesquisa e um sistema visual. Contexto: projeto de conclusão da formação EBAC, em 2025.

Timeline do projeto

O percurso reúne os artefatos e as decisões que conectaram descoberta, prototipação e interface. A timeline mostra como cada etapa orientou o desenvolvimento da solução.

1. Contexto e hipóteses

2. Pesquisa com usuários e análise de referências

3. Persona, jornada e priorização

4. Fluxos e protótipos de baixa fidelidade

5. Testes de usabilidade e iterações

6. UX Writing e personalidade da voz

7. Sistema visual e fluxos completos do app

8. Aprendizados e limites da solução

9. Consolidação, proposta de valor e próximos passos

01. Contexto e hipóteses

O problema inicial envolvia a dificuldade para agendar, acompanhar e confirmar consultas e exames. A falta de informações sobre vagas e os próximos passos poderia gerar frustração, deslocamentos e insegurança.

Usei o 5W1H para organizar o contexto e a matriz CSD para separar certezas, suposições e dúvidas. Esses exercícios ajudaram a transformar a percepção inicial em questões para investigar, sem assumir que um aplicativo resolveria todos os obstáculos do serviço.

Enquadramento do problema — 5W1H

Oportunidade de design

Como oferecer mais autonomia a quem precisa cuidar da própria saúde, sem exigir que essa pessoa domine a tecnologia? O recorte foi explorar um ponto de acesso aos serviços essenciais, com instruções compreensíveis e retorno depois das ações.

Quem participa dessa experiência

Mapeei pacientes, familiares e cuidadores, profissionais de saúde, gestores, unidades de atendimento e equipes de tecnologia. O acesso ao cuidado envolve também quem fornece informações, opera o serviço ou ajuda o usuário a navegar.

Mapa de stakeholders. Material original do projeto no Figma.

A priorização por interesse e influência ajudou a pensar no relacionamento com esses agentes. Pacientes permanecem no centro da experiência, enquanto governo, gestores e unidades aparecem como partes importantes para uma possível adoção institucional.

Direção para a etapa seguinte: compreender como as pessoas vivenciam o agendamento e quais barreiras de informação e uso digital aparecem nessa jornada.

02. Pesquisa com usuários e referências

Perguntas e hipóteses

O plano de pesquisa partiu de duas perguntas: como os usuários do SUS vivenciam as dificuldades de agendamento? O que esperam de uma ferramenta que os ajude nesse processo?

Métodos e participantes

Preparei um roteiro de entrevista e um questionário. Realizei 3 entrevistas em profundidade e reuni 20 respostas ao questionário online, conforme o relatório da pesquisa. As entrevistas exploraram experiências e motivações; o formulário ajudou a observar padrões no grupo consultado.

As perguntas abordavam a rotina de acesso aos serviços, tentativas anteriores de agendamento, busca por vagas, deslocamentos, familiaridade com aplicativos e funcionalidades desejadas. A amostra foi exploratória e os achados orientaram este estudo.

Desk research e benchmark

Consultei materiais sobre digitalização da saúde, oferta de serviços online e acesso a consultas. Comparei referências como Meu SUS Digital, Dr. Consulta, Doctoralia e aplicativos de operadoras, observando agendamento, histórico, exames e canais de ajuda.

O quadro resume as referências observadas na época do projeto. A comparação ajudou a distinguir informações de histórico, descoberta de profissionais e execução do agendamento.

O que a pesquisa trouxe para o projeto

• Espera e falta de previsibilidade: participantes relataram dificuldade para conseguir horários e descobrir quando havia vagas.

• Familiaridade digital desigual: parte do grupo encontrou dificuldade com aplicativos, reforçando o cuidado com rótulos e orientação.

• Interesse em acompanhamento: disponibilidade de horários, confirmações e lembretes apareceram entre as necessidades.

• Suporte como possibilidade: chat, ajuda e integração com WhatsApp surgiram como ideias para reduzir dúvidas e apoiar o uso.

Decisão: trabalhar um fluxo de agendamento simples, status compreensíveis e orientações sobre o que fazer em seguida. As funcionalidades de suporte entraram na discussão de prioridades, sem serem tratadas como recursos já implementados.

Análise heurística

O estudo do Dr. Consulta também serviu para relacionar heurísticas de usabilidade às decisões do projeto. A análise realizada durante o projeto orientou estes cuidados para o SUS — Minha Saúde:

03. Persona, jornada e prioridades

Perfis para orientar as hipóteses

Usei personas e proto-personas para representar pessoas que dependem do SUS, conciliam trabalho e cuidado com a família e podem precisar de ajuda com tecnologia. Os perfis são fictícios e ajudam a explicitar as hipóteses do projeto.

O foco comum foi a busca por autonomia: conseguir informações claras, marcar atendimentos e acompanhar o cuidado sem depender de um deslocamento apenas para descobrir o procedimento.

Proto-persona da apresentação do projeto. Material original do projeto no Figma.

Jornada atual e necessidades

Organizei a jornada em quatro momentos: identificar a necessidade de atendimento, buscar informações, tentar agendar e chegar a uma resolução ou desistência. O mapa considera o que a pessoa faz, pensa e sente em cada etapa.

A incerteza sobre o canal correto e a disponibilidade de vagas atravessa essa experiência. Para a interface, isso se traduz em uma necessidade de orientação e retorno explícito do sistema.

O needs statement sintetizou essa necessidade em uma frase para orientar o projeto: uma forma rápida e acessível de agendar consultas, evitando depender de uma ida ao posto para iniciar o processo.

Uma forma rápida e acessível de agendar consultas, sem precisar ir ao posto apenas para iniciar o processo.

Big Ideas e priorização

Usei o grid de impacto para o usuário e viabilidade para comparar as ideias. O registro contemplou agendamento online, notificações, reagendamento, central de ajuda, chat, feedback e integração com WhatsApp.

• Prioridades centrais: agendamento compreensível, melhor usabilidade e notificações de consultas e exames.

• Apostas para aprofundar: atendimento por chat, feedback e integração com WhatsApp.

• Melhorias de menor esforço no estudo: hierarquia visual, central de ajuda e possibilidade de remarcar consultas.

Recorte do protótipo: agendar consultas, gerenciar atendimentos e confirmar ou acompanhar exames. A comparação das ideias ajudou a organizar esse escopo antes de detalhar as telas.

04. Fluxos e baixa fidelidade

Comecei com esboços e telas de baixa e média fidelidade, primeiro à mão e depois no Figma. O foco estava na ordem das ações e na navegabilidade, antes de aprofundar cores, tipografia e identidade visual.

Agendar uma consulta

O fluxo organiza a definição do atendimento, a escolha de disponibilidade, a conferência das informações e a confirmação. Cada tarefa precisava ter início, continuidade e encerramento compreensíveis.

Wireframes de agendamento — Início → Especialidade → Local do atendimento → Pessoa atendida → Unidade, data e horário → Conferência do agendamento → Agendamento confirmado.

Gerenciar consultas

Explorei como encontrar uma consulta, conferir detalhes e acessar reagendamento ou cancelamento. A pessoa deveria entender qual atendimento está alterando e o resultado esperado da ação.

Wireframes de gerenciamento — Meus agendamentos → Detalhes da consulta → Reagendamento → Conferência do reagendamento → Reagendamento confirmado → Consulta cancelada.

Confirmar exames solicitados

O terceiro fluxo aborda os exames: localizar uma solicitação, compreender os detalhes, confirmar o comparecimento ou aguardar uma nova data.

Wireframes de exames — Início e exames solicitados → Detalhes do exame → Exame confirmado → Exames e seus status → Solicitar nova data → Entrada na fila → Acompanhamento da fila → Detalhes da nova data pendente.

Objetivo da etapa: testar a lógica das telas, os caminhos entre elas e a compreensão das tarefas antes do acabamento visual.

05. Testes de usabilidade e iterações

Teste do protótipo · 21 de novembro de 2025

Conduzi testes com 3 pessoas entre 49 e 62 anos, com níveis diferentes de familiaridade digital. O roteiro avaliou seis tarefas: agendar, reagendar, acessar e cancelar uma consulta, localizar exames solicitados, confirmar um exame e aguardar uma nova data.

O que aconteceu durante as tarefas

Como os achados orientaram o refinamento

• Rótulos distintos: “Agendar Consulta” para iniciar uma tarefa e “Meus Agendamentos” para consultar o histórico e gerenciar atendimentos.

• Avisos e ações visíveis: mais atenção à hierarquia de exames que exigem resposta, reagendamento e cancelamento.

• Confirmações: diálogos para verificar a intenção antes de concluir ações importantes.

• Feedback de conclusão: mensagens de sucesso acompanhadas dos dados do atendimento e de um caminho para continuar.

• Estados explícitos: agendado, concluído, cancelado, confirmado e aguardando nova data aparecem no acompanhamento.

Os testes orientaram as iterações mostradas a seguir. Uma nova rodada após os ajustes seria necessária para medir seus efeitos; os tempos registrados pertencem à avaliação do protótipo daquela etapa.

06. UX Writing e personalidade da voz

Trabalhei uma comunicação paciente, respeitosa e próxima. No estudo de personalidade da voz, Dona Rosa, uma agente comunitária de saúde, representa alguém que explica sem pressa, evita termos técnicos e ajuda a pessoa a entender o próximo passo.

Referências para a personalidade

O estudo reuniu referências como Dona Lurdes, Dona Benta, Tia Má e Rebecca Welton para explorar acolhimento, clareza, comunicação direta e postura profissional. Essas características serviram como direção para o tom do aplicativo.

Princípios aplicados à escrita

• Frases curtas: apresentar a informação necessária para a ação em curso.

• Orientação: antecipar o que acontece ao clicar e explicar como continuar.

• Acolhimento: tratar dúvidas e erros sem culpabilizar a pessoa.

• Consistência: manter o mesmo significado para rótulos e estados ao longo dos fluxos.

• Segurança: confirmar o resultado e permitir conferir os dados do atendimento.

Nas telas finais, mensagens como “Consulta agendada com sucesso”, “Reagendamento realizado com sucesso” e “Você entrou na fila de espera” tornam visível a conclusão de uma ação. Os diálogos de confirmação oferecem uma pausa antes de agendar, alterar ou cancelar.

07. Sistema visual e aplicativo completo

Atributos e posicionamento

Defini os atributos confiável, acessível, acolhedor, prático e eficiente. O arquétipo do Cuidador orientou a intenção de apoiar e explicar, com uma proposta de valor centrada em tornar o acesso à informação de saúde mais simples.

Style guide

O guia visual organiza tipografia Rawline, cores, ícones e referências do Material Design 3 e de serviços digitais públicos. O azul conduz as ações principais; as cores de apoio diferenciam confirmações, avisos e cancelamentos.

A hierarquia tipográfica usa Rawline para organizar níveis de leitura e ações. O objetivo foi manter padrões reconhecíveis, com consistência entre conteúdo e componentes.

Hierarquia Tipográfica — Rawline Family

• Nível

  Tamanho

  Peso

  Uso

• H1

  32px

  Bold

  Destaques

• H2

  28px

  Bold

  Título da tela

• H3

  24px

  Bold

  Seções

• H4

  20px

  Medium

  Cards / subtítulos

• H5

  18px

  SemiBold

  Destaques menores

• H5

  18px

  Bold

  Destaques menores

• Body 1

  17px

  Regular

  Texto principal

• Body 2

  15px

  Regular

  Apoio / instruções

• Microcopy

  14px

  Regular

  Destaques menores

• Botões

  17px

  Bold

  Ações

Paleta principal

• Azul principal#3E87C9

  Botões primários, ações e destaques.

• Amarelo#FFD415

  Destaques e avisos.

• Verde#009688

  Sucesso e confirmações.

• Vermelho#E33838

  Cancelamentos e alertas críticos.

Cores neutras

• Texto principal#161616

  Títulos e textos primários.

• Texto de apoio#3C3C3C

  Subtítulos.

• Cinza médio#9E9E9E

  Texto secundário.

• Cinza claro#EEEEEE

  Cards, caixas e contornos.

• Branco#FFFFFF

  Fundo geral do aplicativo.

Gradientes

• Azul

• Amarelo

• Verde

• Brasil Canarinho

Iconografia

Os ícones originais do aplicativo seguem referências do Material Design 3. Navegação, agendamentos, exames e retornos do sistema compartilham uma linguagem visual consistente.

• Atualizar

• Microfone

• Voltar

• Avançar

• Menu

• Notificações

• Buscar

• Calendário

• Consulta cancelada

• Consulta confirmada

• Reagendar

• Data e horário

• Saúde

• Exames

• Prontuário

• Medicamentos

• Sucesso

• Cancelar

• Atendimento

• Perfil

• Localização

• Pendências

• Início

• Sair

• Ajuda

• Avaliação

• Permissões

• QR Code

• Instituição

• Cartão

• Nuvem

• Identificação

• E-mail confirmado

Fluxos em alta fidelidade

As 35 telas e estados abaixo seguem a sequência das tarefas, incluindo preenchimento, escolhas, diálogos de confirmação e retorno do sistema. As imagens preservam as telas originais do Figma.

Acesso e identificação

A proposta de entrada apresenta o aplicativo e conduz à identificação com a conta Gov.br. As telas representam a experiência desenhada no protótipo acadêmico.

Entrada do app → Identificação Gov.br → Senha e acesso

Recuperação e acesso concluído

Os retornos indicam o envio de instruções e a conclusão do acesso, evitando deixar o usuário sem resposta sobre o resultado.

Instruções enviadas → Acesso concluído

Home e alertas de exames

A Home reúne atalhos para as tarefas principais. Quando há exame aguardando resposta, o aviso muda o destaque visual da entrada.

Home com atalhos → Aviso de exames pendentes

Agendamento: preenchimento

A sequência mostra a busca por especialidade, seleção de unidade e identificação de quem será atendido. O estado preenchido permite conferir os dados antes de buscar disponibilidade.

Escolher especialidade → Selecionar unidade → Selecionar paciente → Conferir o preenchimento

Agendamento: escolha e confirmação

Depois de escolher a data e o horário, a pessoa confere local e profissional, confirma a intenção e recebe o resultado com acesso aos seus agendamentos.

Data e horário → Dados do atendimento → Confirmar a intenção → Consulta agendada

Consultas: detalhes e reagendamento

O acompanhamento reúne status e detalhes do atendimento. A partir daí, a pessoa pode escolher uma nova disponibilidade e revisar a mudança antes de concluir.

Lista de consultas → Detalhes e ações → Escolher nova data → Conferir novo atendimento

Reagendamento: confirmação e retorno

A confirmação explicita que o atendimento está sendo alterado. O retorno apresenta os novos dados e permite voltar à lista.

Confirmar o reagendamento → Reagendamento concluído

Cancelamento: controle e confirmação

O diálogo pede a confirmação da intenção antes de cancelar. O estado de sucesso informa a conclusão e oferece um caminho de retorno.

Confirmar o cancelamento → Consulta cancelada

Exames: detalhes e confirmação

O fluxo apresenta a solicitação, data, unidade e profissional. A confirmação e o estado de sucesso se conectam ao acompanhamento dos exames.

Detalhes e opções → Confirmar o exame → Exame confirmado → Acompanhar exames

Exames: aguardar uma nova data

Quando a data não atende à necessidade da pessoa, a proposta permite solicitar outra disponibilidade. A mensagem de fila de espera explica o próximo passo previsto pelo serviço.

Solicitar nova data → Confirmar a solicitação → Entrada na fila de espera

Exames: acompanhamento da espera

A lista e os detalhes mantêm o estado de espera visível, para que a pessoa consiga entender o que está aguardando após a solicitação.

Lista com status aguardando → Detalhes da nova data pendente

Perfil, documentos e saída

O perfil concentra dados e atalhos para informações pessoais. A visualização do cartão do SUS e o retorno ao sair complementam a experiência representada no protótipo.

Perfil e opções → Documento de saúde → Saída concluída

08. Aprendizados e limites da solução

A principal aprendizagem foi que clareza depende da combinação entre organização da informação, linguagem e retorno do sistema. Um botão pode estar visível e ainda assim gerar insegurança se seu nome ou consequência não forem compreendidos.

Justificar escolhas, acolher o que aparece nos testes e revisar uma ideia fez parte do desenvolvimento. O processo ajudou a reconhecer que os problemas de uso nem sempre estão onde o designer espera encontrá-los.

O estudo também mostrou a diferença entre propor uma interface e operar um serviço. Disponibilidade de vagas, critérios de encaminhamento, proteção de dados e integração com unidades de saúde exigiriam definições com as instituições envolvidas.

O protótipo permite explorar a experiência e comunicar decisões. Não houve operação real do serviço ou medição de redução de filas, economia de recursos ou desempenho após lançamento.

09. Consolidação e evolução

Proposta de valor

A proposta reúne agendamentos, exames e documentos em uma experiência que procura reduzir incertezas e ampliar a autonomia digital. O público priorizado inclui pessoas com pouca familiaridade com aplicativos, cuidadores e usuários com uma rotina sobrecarregada.

Possível adoção institucional

No modelo de solução explorado no projeto, órgãos públicos e unidades de saúde seriam potenciais parceiros. Benefícios como menor demanda presencial por informação e melhor acompanhamento dos atendimentos são hipóteses de impacto a validar, dependentes da operação e das integrações do serviço.

Próximos passos

• Nova rodada de testes: avaliar os fluxos refinados com outros perfis, aparelhos e condições de uso.

• Acessibilidade: verificar contraste, ampliação de texto, leitores de tela, navegação assistida e alternativas de orientação por voz.

• Regras e integrações: aprofundar disponibilidade de vagas, confirmação de atendimentos e comunicação com UBS, clínicas e hospitais.

• Notificações: explorar lembretes e avisos sobre consultas, exames e documentos.

• Continuidade do cuidado: estudar receituários, resultados de exames e acompanhamento de tratamentos.

• Métricas e feedback: definir indicadores de conclusão de tarefas, dúvidas recorrentes e satisfação para orientar novas iterações.

A entrega final conecta pesquisa, hipóteses, testes e decisões de interface em um case de UX/UI. O aprendizado de cada etapa orienta o que ainda precisa ser validado.