Do que estamos falando?

Projeto: Desenvolver uma plataforma digital que conecte clientes e profissionais de diversas áreas, facilitando a busca e contratação de serviços. O aplicativo permitirá aos clientes encontrar e negociar com profissionais de maneira prática e segura, enquanto possibilita que os profissionais divulguem seus serviços, compartilhem informações e interajam com potenciais clientes, otimizando a experiência de ambos os lados.

Quais são os objetivos?

Criar um app que possa ser usado para otimizar tempo: encontrar profissionais e clientes, negociar de maneira segura dentro do app, ver qualidade do serviço, indicações, recomendações e mais.

Principais objetivos: facilitar o encontro de profissionais de distintas áreas e que prestam diferentes serviços com clientes que precisam de um serviço mas não tem algum profissional de confiança.

Quem são as pessoas que queremos atingir?

Todas elas.

Como muitos apps, esse também gostaria de que todos os usuários otimizassem seu tempo. A ideia desse projeto é deixar a vida mais fácil para pessoas que precisam encontrar profissionais e profissionais que precisam encontrar clientes.

Em resumo para esse projeto:

Comecemos com o design, depois o passo a passo

Você pode ver todo o projeto nesse link.

Personas:

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;