top of page

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

01

image.png

02

image.png

03

image.png

04

image.png
image.png

05

image.png

06

image.png
image.png

07

image.png

08

09

image.png
image.png

10

image.png

11

12

image.png

13

image.png
image.png

14

15

image.png
image.png

16

image.png

17

image.png

18

image.png
image.png

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)

image.png

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:

  1. 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.

  2. 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.

  3. 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)

1st.jpg

Meus pensamentos ao criar este esboço foram:

  1. Simplicidade: O usuário precisa saber exatamente como performar cada tarefa.

  2. Reconhecimento e Memorização: As informações visuais devem ser familiares com outros apps.

  3. 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.

  4. 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)

Start.png
User & pass.png
Informations2.png
Homepage1.png

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):

image.png

Blue

#077ABB

image.png

Light Blue

#D6EEFF

image.png

Gray

#62636C

image.png

#FDFDFE  #F7F9FF #EDF2FE  #DFEAFF  #D0DFFF #BDD1FF  #A6BFF9  #87A5EF  #3D63DD  #3657C3  #395BC7 #1D2E5C

image.png

#FCFCFD  #F9F9FB  #EFF0F3  #E7E8EC  #E0E1E6 #D8D9E0 #CDCED7 #B9BBC6 #8B8D98 #80828D #62636C #1E1F24

image.png
image.png

Tipografia e Estilo de texto:

Group 2.png

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

image.png

8px     16px    24px   32px    40px      48px

image.png

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

maze_screenshot_interaction.jpg
maze_screenshot_interaction (2).jpg
maze_screenshot_interaction (3).jpg
maze_screenshot_interaction (4).jpg

2º desafio

maze_screenshot_interaction.jpg
maze_screenshot_interaction (1).jpg
maze_screenshot_interaction (2).jpg
maze_screenshot_interaction (3).jpg
maze_screenshot_interaction (4).jpg
maze_screenshot_interaction (5).jpg
maze_screenshot_interaction (6).jpg

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;

Frame 21.png
bottom of page