Do que estamos falando?
Projeto: Projetar um aplicativo responsivo que permita aos pacientes fazer check-in no consultório do médico de família, responder perguntas iniciais de exames de saúde, importar informações e salvar dados.
Quais são os objetivos?
Criar um app que possa ser usado para otimizar tempo: agendar consultas, fazer check-in para confirmar comparecimento na consulta, tirar dúvidas iniciais que o médico tenha, além de importar dados médicos médicos relevantes, como resultado de exames, consultas de retorno, etc.
Principais objetivos: reduzir o tempo de ligações telefônicas para agendamento de consultas, reduzir o tempo de consulta com perguntas padrão pré-estabelecidas, criar um relacionamento com os pacientes para que sintam vontade de voltar - dar a sensação de estar em casa.
Quem são as pessoas que queremos atingir?
Todas elas.
Como muitos apps, esse também gostariam de que todos os usuários otimizassem seu tempo. A ideia desse projeto é deixar a vida mais fácil para pessoas com rotinas que são diferentes das "usuais", que tenham dificuldades em qualquer área.
Em resumo para esse projeto:
Comecemos com o design, depois o passo a passo
Personas:
Anna
48 anos, foi para uma faculdade simples, tem 4 filhos e é mãe solteira. Trabalha como gerente de uma pousada.
"Queria que fosse possível fazer coisas de longe, sem deixar meus filhos sem irem ao médico"
Metas: Frustrações:
Conseguir salvar informações médicas Explicar o mesmo Agendar consultas, exames, etc., online várias vezes
Não conseguir que outras pessoas levem os filhos ao médico
Anna é uma mãe solteira de 4 filhos que tem idade de 4 a 12 anos. Ela vive longe de sua família e cuida de uma pousada na pequena cidade onde vive. Alguns de seus filhos tem problemas respiratórios que pioram em certas estações - que são as altas estações do hotel. Anna comumente não consegue levar seus filhos ao médico ou falta o trabalho por ter que explicar os problemas para diferentes médicos, mesmo quando seus amigos se oferecem para levá-los.
Douglas
26 anos, fez curso técnico, não tem filhos. Trabalha como desenvolvedor de software.
"Odeio ter que ficar falando e explicando coisas para pessoa que não conheço, especialmente em português. Só não consigo"
Metas: Frustrações:
Passar por processos que não Não conseguir falar demandem falar com uma pessoa em público com estranhos
Dificuldade de se expli
car em português
Douglas é um imigrante que tem outra língua como sua língua materna. Ele é naturalmente muito tímido e isso piora quando ele precisa falar em português - o que o impede de fazer muitas atividades importante, como cuidar de sua saúde. Ele já tentou ir em algumas consultas, mas foi embora quando seu nome foi chamado e a recepcionista o fez muitas perguntas.
Kimberly
36 anos, foi para universidade, tem como família apenas o pai. Trabalha como SDR em uma startup.
"Isso é muito importante para a invidualidade dele, eu só queria deixar o caminho pronto na parte burocrática, assim ele pode continuar se sentindo independente"
Metas: Frustrações:
facilitar antecipadamente e Não conseguir deixar reduzir o tempo de espera por que o pai seja mais
atendimento médico independente
Kimberly é a única cuidadora do pai, um idoso com começo de demência. Ela precisa viajar esporadicamente por conta do trabalho - às vezes ficando uma semana fora - e, nessas situações, contrata uma cuidadora de idosos, mas seu pai acaba tomando decisões sozinho, como ir ao médico. Kimberly ama seu pai e respeita suas vontades de ainda ser independente apesar de tudo. Seu maior problema é que seu pai acaba esquecendo seus próprios problemas de saúde e alergias, o que já causou problemas antes.
Apps parecidos
→ Doctor Anytime
→ Doctoralia
→ Saúde Vianet
→ Doctorsa
→ Nav Dasa
→ Docway
Os aplicativos mencionados acima competem, direta ou indiretamente, com o aplicativo desenvolvido neste exemplo. Eles oferecem recursos como agendamento de consultas e buscas por especialidades, entre outros. Porém, não abrangem a ideia principal deste projeto, que é ser uma plataforma que armazene informações médicas e as envie para consultas agendadas dentro do aplicativo.
Todas as plataformas foram utilizadas para comparação, inspiração e outras referências.
Mapa do usuário no App (Ideias iniciais)
O mapa do usuário foi feita de maneira embrionária.
O objetivo principal foi criar um guia básico de utilização do app - que pode vir a, e provavelmente irá, mudar no decorrer do projeto. Destaco as principais funcionalidades: agendamento de consultas, confirmação de consultas e envio de dados médicos.
Outras funcionalidades são consideradas complementares e seriam desenvolvidas em um projeto futuro que necessite destas ferramentas adicionais.
Existem três opções para o fluxo do usuário:
-
Já é usuário do aplicativo com consulta agendada:
O usuário acessa o aplicativo e encontra informações sobre o agendamento agendado na página inicial. Eles podem confirmar o agendamento através do check-in ou reagendá-lo. Nesse cenário, o usuário já forneceu suas informações ao aplicativo. -
Acesso ao aplicativo pela primeira vez, sem fornecer informações médicas inicialmente:
O usuário é direcionado para uma página inicial onde pode agendar compromissos e visualizar outras informações. Ao agendar uma consulta médica, eles deverão fornecer seus dados médicos e confirmar o agendamento. -
Acesso ao aplicativo pela primeira vez, com informações médicas já fornecidas ao banco de dados:
A página inicial será diferente da anterior, pois não mostrará nenhum compromisso agendado. O usuário pode agendar consultas a qualquer momento, utilizando as informações médicas já fornecidas.
Rabiscos (Ideias iniciais)
Meus pensamentos ao criar este esboço foram:
-
Simplicidade: O usuário precisa saber exatamente como performar cada tarefa.
-
Reconhecimento e Memorização: As informações visuais devem ser familiares com outros apps.
-
Estética formal e suave: Evitar cores e animações brilhantes, pois as situações médicas costumam ser delicadas. O design deve ser agradável mas formal, com informações claras e organizadas por prioridade.
-
Uso de botões: Ususários devem digitar apenas quando necessário, como em perguntas abertas e informacionais, como email e senha.
O questionário deve ser claro e conciso, mantendo um tom acolhedor tanto na escrita quanto visualmente. Todas as informações podem ser relevantes, pois diferentes usuários utilizarão o aplicativo, mas é importante evitar sobrecarregá-los com detalhes excessivos, garantindo clareza e priorização.
Este é apenas um esboço inicial, que provavelmente será refinado várias vezes, mas já transmite a impressão geral que desejo alcançar.
Wireframe (Ideias iniciais)
Como é possível compara entre o esboço e o wireframe, houve mudanças - o que já era absolutamente previsível e já conhecido na área de design.
Além dessas mudanças, novas telas foram pensadas para cumprir uma finalidade: enviar as informações médicas pessoais para serem armazenadas e marcar uma consulta simples.
É importante destacar também que existem lacunas a serem preenchidas neste projeto – lacunas de negócio. Uma vez que houvesse uma demanda mais bem elaborada, detalhada e construída, eles deixariam de existir.
Design System
Com o objetivo de poupar tempo, desenvolvi um Design System que inclui os principais componentes e informações essenciais para aplicação. O projeto envolveu a criação de wireframes, planejamento de interface e desenvolvimento de conceito gráfico, tudo de acordo com as heurísticas de Nielsen.
As seguintes decisões foram:
Cores:
Pode conter no decorrer do projeto (por paleta de cores):
Blue
#077ABB
Light Blue
#D6EEFF
Gray
#62636C
#FDFDFE #F7F9FF #EDF2FE #DFEAFF #D0DFFF #BDD1FF #A6BFF9 #87A5EF #3D63DD #3657C3 #395BC7 #1D2E5C
#FCFCFD #F9F9FB #EFF0F3 #E7E8EC #E0E1E6 #D8D9E0 #CDCED7 #B9BBC6 #8B8D98 #80828D #62636C #1E1F24
Tipografia e Estilo de texto:
Aa 123
Headline 1
Bold, 17
Headline 2
Semibold, 15
Body 1
Body 2
Medium, 13
Semibold, 14
Body 3
Medium, 12
“Os antigos cartazes e placas do tradicional bairro de Montserrat, em Buenos Aires, inspiraram Julieta Ulanovsky a desenhar esta fonte e resgatar a beleza da tipografia urbana que surgiu na primeira metade do século XX. à sua forma original e perde para sempre os desenhos tão especiais e únicos. As letras que inspiraram este projeto têm trabalho, dedicação, cuidado, cor, contraste, luz e vida, dia e noite. tão bonito."
Informações, espaçamento & ícones:
Foi usado:
Grid Layout
Columns
Type Stretch
Gutter width 20px
Margem 24px
8px 16px 24px 32px 40px 48px
Functionalities:
Geolocalização:
Facilidade de encontrar médicos por perto
Calendário:
Todas as consultas de todas as especialidades no mesmo lugar
Base de dados:
Todas as suas informações salvas e facilmente acessíveis
Lembrete
Lembrete de compromissos e exames
The project itself
Usability Test
O teste de usabilidade foi feito com um público desconhecido – apenas foi para um grupo de pessoas, sem saber quais delas responderam e quais respostas eram de quem.
Dois "desafios" foram criados nesse teste.
O primeiro era que o usuário precisava adicionar um membro da família dentro do aplicativo, o que incluía adicioná-lo com suas informações pessoais. O início desse processo começou na página inicial e continuou nas demais telas.
71% dos que participaram neste processo escolheram que o processo foi “muito fácil”, seguido das duas opções – em quantidades iguais entre elas – de “mais ou menos” e “poderia ser mais fácil”.
Nessa opção “poderia ser mais fácil”, a sugestão foi deixar um botão na página inicial apenas para adicionar o familiar ao invés de ir para “minha família”
O segundo desafio foi agendar uma consulta para o familiar que acabou de ser adicionado. Este processo também começou na página inicial e teve como objetivo verificar se era visualmente fácil indicar onde deveria estar e a quantidade de telas necessárias para esse processo.
Nesse caso, a opção que os usuários mais selecionaram quanto ao grau de facilidade foi “mais ou menos”, seguida de “poderia ser mais fácil” e, por fim, “muito fácil”.
Mapa de calor/Heatmaps
1º desafio
2º desafio
Para mim houve um impasse quanto à troca dos botões devido a dúvidas por parte da família, mas como a opinião geral era de que era fácil realizar esta tarefa tal como está, a impressão que fiquei foi que abrir o leque para mais botões criaria um oceano de botões com opções, o que deixaria muitas informações na tela - uma tela pequena de telefone.
Isso vai contra a ideia da economia comportamental, já que o usuário gastaria muito tempo buscando todas as informações que precisa, ao invés de tudo ficar organizado no mesmo espaço.
Nesta fase trabalhamos com:
- Protótipo navegável Figma;
- Criação de um roadmap para a jornada do usuário;
- Aplicação de teste pela Maze;
- Teste piloto para verificar se o protótipo estava seguindo o fluxo correto;