Mar 25, 2021
MedicOn — Identidade Visual e Interface de Produto
Esse artigo é sobre a Identidade visual e a Interface do Produto baseado no Guia de Estilos do Protótipo MedicOn e é parte de um trabalho de UX Design desenvolvido dentro do Programa UX Unicórnio.
Esse case de UI é parte integrante do case de UX sobre Telemedicina, onde ajudei a conectar médicos e pacientes durante a pandemia de Covid-19.
Para ver o case completo, clique no link abaixo.
Product Naming e Geração de Logotipo
A geração do nome para o aplicativo ( Product Naming) surgiu da contração, ou aglutinação, de duas palavras Medic + Online, devido a natureza do produto ser um aplicativo voltado para a Telemedicina. A partir da definição do nome, surgiram alternativas para o desenvolvimento do logotipo e do imagotipo para o aplicativo e foram feitos vários rabiscos até chegar na ideia final. O imagotipo ( imagem + logotipo) foi concebido mesclando um estetoscópio com um monitor de computador, dando a ideia de consulta virtual. Já o logotipo foi gerado a partir da família tipográfica Ubuntu, a qual também faz parte da tipografia utilizada no produto e foi escolhida por causa do nome. Segundo Dirk Louw, doutor em Filosofia Africana pela Universidade de Stellenbosch (África do Sul):
“Uma sociedade sustentada pelos pilares do respeito e da solidariedade faz parte da essência de ubuntu, filosofia africana que trata da importância das alianças e do relacionamento das pessoas, umas com as outras. Na tentativa da tradução para o português, ubuntu seria “humanidade para com os outros”. Uma pessoa com ubuntu tem consciência de que é afetada quando seus semelhantes são diminuídos, oprimidos.” Fonte: Por Dentro da África
Por causa dessa filosofia de fazer o bem ao outro, a tipografia serviu de base para o logotipo do aplicativo de medicina online e, para destacar que a consulta é de maneira virtual, foi adicionado o símbolo de Wi-fi ao logotipo.
Escolha de cores
A escolha de cores não foi feita de maneira aleatória. Foi utilizada uma forma de pesquisa através da Psicologia das Cores e o que cada uma representa ou transmite a quem a observa. Foi utilizada a ferramenta Picular para a escolha de cores através de palavras chave como: medicine, doctor, health, calm, tranquility e tudo o que remetesse à saúde e bem estar. Depois de definidas as duas primeiras cores, o azul como cor primária e o verde como cor secundária, utilizei o Coolors para criar uma paleta de cores onde houvesse uma terceira cor complementar, utilizando o circulo cromático para fazer uma paleta meio-complementar inserindo a cor roxa como cor terciária. Contudo a cor foi retirada após o reajuste do aplicativo.
Com as cores bases definidas, utilizei a matriz HSB (Hue, Saturation, Brightness — Matiz, Saturação e Brilho) para gerar as cores auxiliares . Para as cores mais claras reduzi a saturação e aumentei o brilho e para as cores mais escuras, mantive a saturação ou aumentei e reduzi o brilho em todas. O mesmo processo foi utilizado para os as cores neutras, ou tons de cinza.
Tipografia Desktop e Mobile
Desde o processo de Naming e Construção de Logotipo a família tipográfica Ubuntu esteve presente e devido a filosofia por trás do nome, era imprescindível que ela se mantivesse presente no produto. Na versão anterior havia uma terceira família tipográfica, a Poppins, por causa dos headers da Landing Page, tanto na versão Desktop quanto Mobile, porém, juntamente com a cor terciária, ela foi retirada da versão final do produto. Para fazer uma combinação de fontes adequada, utilizei o Google Fonts e, através da ferramenta do próprio site, escolhi a família tipográfica Roboto para parágrafos.
Botões
Os botões foram divididos por tamanhos e, apesar de nem todos terem sido utilizados no protótipo, foram pensados tanto para a versão desktop quanto a mobile. Também foram desenvolvidos os botões de redes sociais, fintechs, sistemas operacionais, toggle switch (para alterar estados) e rating button (para avaliação).
Ícones
Os ícones foram escolhidos pelo Material Design, em sua maioria, mas outros foram criados a partir de vetores em SVG, como os logotipos das marcas e redes sociais.
Para a seção “Benefícios” no Desktop, foram utilizadas ilustrações em vetor para cada benefício oferecido pelo produto.
Formulários e Planilhas
Os formulários têm como propósito captar e repassar informações valiosas para ambas as partes, no caso, os dois usuários principais do produto: médicos e pacientes. Através dos formulários o paciente conversa com os médicos, que analisam esses dados oferecidos pelo paciente através do preenchimento destes. Outra forma que o aplicativo tem de conversar com os usuários é através de gráficos e planilhas, onde esses usuários, nesse caso os médicos, conseguem avaliar e organizar seus atendimentos de maneira fácil e descomplicada.
- Planilha “Tipos de Atendimento” — utilizado o gráfico Pie/ Pizza para separar os tipos de atendimento: particular ou por plano de saúde;
- Planilha “Tipos de Pacientes” — também utilizado o gráfico pie ou pizza para determinar a quantidade de pacientes que retornam ou novos pacientes;
- Planilha “Números de Atendimentos” — avalia a quantidade de atendimentos mensais através do aplicativo;
- Planilha “Relação de Pacientes” — determina se o paciente se enquadra no gênero feminino ou masculino.
Wireframes
O Wireframe, ou Protótipo de Média Fidelidade, serve para testar a usabilidade do produto e verificar qual o caminho que os usuários mais utilizam, ou acham mais fácil, para chegar ao final de sua jornada dentro do aplicativo e conseguir realizar sua tarefa com sucesso, nesse caso, marcar a consulta com o médico. Várias alterações foram feitas desde o wireframe até o produto final, mas é possível ver com clareza todo o processo desde a entrada no aplicativo até o final da consulta.
Na imagem abaixo é possível também mapear o fluxo de cada usuário, médico ou paciente, dentro do aplicativo.
Você também pode acessar o Protótipo de Média Fidelidade no link disponível AQUI.
Protótipo de Alta Fidelidade
Depois de definido o wireframe, parti para a construção do aplicativo, seguindo a mesma linha de design do wireframe e com o Style Guide antigo (que incluía a família tipográfica Poppins e a cor terciária roxa). Contudo, depois de orientações do Beto Lima, atualmente Product Designer da Luiza Labs e do Leandro Rezende, professor do curso UX Unicórnio, com relação ao visual e aos elementos da interface, comecei a rever todas as telas e cheguei no resultado atual. Muita coisa foi alterada no visual e também no fluxo de telas, onde foram incluídas:
- mensagens de permissões entregues aos poucos, como mandam as boas práticas em design de experiência do usuário;
- telas com Empty States (ou estados vazios) para usuários de primeira viagem;
- Mensagem do sistema, toda vez que o usuário entrar no aplicativo, informando algo importante;
- Menu flutuante para acesso aos dados do usuário;
- Footer com cada seção do aplicativo podendo ser acessada de qualquer tela;
- e um botão principal para agendamento, facilitando a jornada do usuário e definindo o Golden Path (que irei mostrar em seguida).
Para acessar ao Protótipo de Alta Fidelidade de MedicOn — clique AQUI.
Golden Path
O Golden Path, ou caminho dourado, é o percurso que o usuário realiza desde o momento em que entra em seu aplicativo, até a conclusão da tarefa a qual ele se propôs a fazer. É o caminho que merece mais atenção, não que as demais telas não precisem estar com a mesma qualidade, mas a função principal, o caminho dourado, tem de ser, de fato, de ouro! Sendo assim, pedindo que pessoas utilizassem o produto e gravando suas telas, descobriu-se que o Golden Path é o caminho que está representado na imagem abaixo. Claro que os médicos também são usuários, mas o end-user do produto é o paciente, que precisa de uma alternativa para suas consultas.
VERSÃO ANTIGA
Quem quiser conferir o Protótipo antigo, para fins de comparação, clique AQUI.
Conclusões
Depois das considerações do Leandro Rezende e do Beto Lima acerca da primeira versão, aprendi, ao refazer o protótipo, que um produto sempre pode melhorar, seja nas suas funcionalidades ou no visual. No caso do MedicOn, produto que desenvolvi dentro do curso do UX Unicórnio, era preciso melhorar nas duas áreas: a interface e a funcionalidade. Também concluí que, apesar de saber que UX não é sobre telas bonitas, uma interface agradável faz parte de uma boa experiência ao usar um produto, portanto, refazer o aplicativo tendo em mente o princípio da lei de usabilidade estética foi importante para obter um melhor resultado.
Sobre mim
Meu nome é Mario Koller, sou UI/UX Designer e você pode entrar em contato comigo pelo LinkedIn, Instagram ou pelo meu Portfolio.
