Dr. Vacin— um case de estudos de UX Design
Como utilizei o UX Design para auxiliar a monitoração da aplicação de vacinas e ajudar na melhoria de um serviço público
O desafio
Esse é um estudo de caso no qual um investidor do governo pretende criar uma solução que possa auxiliar o acompanhamento da saúde dos filhos pelos pais, com especial atenção à vacinação de seus pequenos.
Como auxiliar pais no acompanhamento da saúde de seus filhos de maneira mais eficiente ?
O cenário atual
Em se tratando da saúde de crianças, a vacinação é um importante passo a ser dado na prevenção de doenças infecciosas. O cronograma de vacinação implementado no Brasil, considerado exemplar, prevê a aplicação de diversas vacinas desde o nascimento do bebê, além de doses periódicas de reforço. O controle é feito pelos próprios país que guardam consigo uma caderneta na qual todas as doses aplicadas são registradas até os 10 anos de idade.
Após essa idade o registro das vacinas é feito por meio de um cartão de vacinas sem padronização nacional e que já é exigido, inclusive, na matrícula escolar da rede pública de alguns municípios.
Contudo, esse passo tão importante registra queda em todo o país. Veja a seguir dados do programa nacional de imunização publicado pela Agência Senado:
Além dessa diminuição, é importante destacar que a caderneta e o cartão de vacinação são objetos propensos a perdas e avarias e nesses casos é preciso resgatar o histórico das doses tomadas, correndo o risco da segunda via não reproduzir com fidelidade as informações do documento original.
É daí que a digitalização se apresenta como uma solução viável e facilitadora de todo esse processo.
Pandemia e Emergência
Somado ao cenário acima, não se pode esquecer da pandemia mundial provocada pelo vírus COVID-19 no início de 2020. Com o desenvolvimento de vacinas contra o virus, diversos países passaram a estudar o uso do “passaporte da vacina”, o que por si só revela a importância de projetos como esse.
Já no Brasil foi criado em abril de 2020 o Projeto de Lei 5217/20 com o objetivo de criar a carteira de vacinação digital e instituir o rastreamento de vacinas.
Objetivo do projeto
O objetivo é projetar uma solução complementar ao aplicativo Conecta SUS, da rede pública, que possa destacar as principais datas de vacinação e tornar mais simples o acompanhamento das vacinas, evitando-se assim esquecimentos ou aplicação de doses repetidas.
A solução inicial conforme demonstrado nesse artigo contempla o desenvolvimento de um aplicativo, sendo prevista também a criação de um website em momento posterior para unificação das duas plataformas.
Tratando-se de um serviço público prestado gratuitamente à população foi definido também que o resultado com a solução projetada será auferido por meio das métricas do framework do tipo H.E.A.R.T distribuidas, da seguinte forma nesse primeiro momento:
Outras métricas nesse período poderão ser adicionadas como por exemplo geolocalização dos usuários e análise cohort, conforme revisões periódicas.
5W2H (What, Why, Who, Where, When, How e How much)
A prestação de serviço públicos deve ser realizada em conjunto a um processo de gestão e a uma cultura de qualidade. Nesse sentido diversas ferramentas típicas da Admisnitração Geral podem ser transpostas e utilizadas no serviço público com as devidas adaptações.
No caso atual, optei por utilizar o plano de ação denominado 5W2H como forma de orientar as diversas ações que deverão ser implementadas. Reusmidamente, eis o plano elaborado:
Business Model Canvas
Como visto, esse projeto se enquadra no oferecimento de um serviço público no campo da saúde cujo princípio adotado no Brasil é o da universalidade.
Isso quer dizer que todo cidadão brasileiro, sem qualquer tipo de discriminação, têm direito ao acesso às ações e serviços de saúde e que é dever do Estado garanti-los.
Por esse motivo, convém destacar que a aplicaçao do processo de design thinking em design de serviços tem como objetivo o de buscar por soluções que visem uma prestação mais eficiente em colaboração com o usuário.
Com isso em mente foi criado em conjunto ao Plano de Ação o seguinte quadro, tendo como base o modelo de Business Model Canvas adaptado à Governança Publica
Usuários
Em se tratando de prestação de um serviço público, não basta meramente conhecer o usário, mas sim de buscar soluções que respondam às suas necessidade enquanto consumidor e cidadão ao mesmo tempo.
Sendo assim, foram criadas duas proto-personas: a do profissional de saúde publica e outra representativa de um segmento populacional específico, o de cidadãos que possuem filhos ou são responsáveis por um menor.
Personas Construídas e Contexto dos Usuários
A construção das personas serviu para melhor compreender suas dores, sentimentos, atitudes e oportunidades. Foi dada maior ênfase na persona Laura, a mãe preocupada.
Laura: a Mãe Preocupada
Demograficamente, as pesquisas realizadas para validação dessa persona demonstrou a existência de um perfil dominante entre os entrevistados que não é representativo de todos os usuários do SUS Brasileiro.
Contudo, por se tratar de um estudo de caso, os dados obtidos foram considerados no projeto, conscientes de que num caso real, estudos mais detalhados seriam necessários.
Renato: o técnico de enfermagem
Jornadas
Foram criadas proto-jornadas como forma de demonstrar o passo a passo envolvido no vínculo existente entre o serviço prestado e a persona-usuária, bem como do profissional da saúde em relação à vacinação.
No demonstrativo abaixo é possível observar as jornadas finais já com as informações validadas por meio de pesquisas quantitativas e qualitativas:
Pixar Storytelling
Utilizei também o método Storytelling da Pixar para compreender de forma mais clara o propósito do produto em relação à persona Laura:
Primeira etapa de validação
a) Matriz CSD
A metodologia da Matrix CSD foi utilizada para o levantamento de hipóteses e análisar eventuais suposições e dúvidas:
b) Pesquisa Quantitativa
A partir dos questionamentos distribuidos na matriz CSD foi possivel elaborar as perguntas para a realizacao da pesquisa quantitativa com posterior aprofundamento por meio da pesquisa qualitativa.
Considerando que as pesquisas foram realizadas no período de festas/férias compreendido entre os dias 30 de dezembro e 07 de janeiro e a dificuldade de recrutar participantes, a primeira pesquisa quantitativa que seria realizada apenas com os pais/responsáveis foi reelaborada e dividida em dois segmentos abarcando também pacientes de vacinação sem filhos. Nesse último caso, a pesquisa foi limitada às perguntas sobre vacinação e cartão de vacinas que não fossem exclusivamente relacionadas às crianças, mas ao processo de vacinação em si.
As pesquisas foram realizadas por meio de formulários eletrônicos, distribuídos em redes sociais. Houve 148 respostas de pacientes de vacinação, e 28 respostas de profissionais da saúde (enfermeiros e técnicos de enfermagem), dos quais apenas 10 trabalhavam com vacinação.
Aprendizados gerados
c) Pesquisa Qualitativa
A pesquisa qualitativa foi realizada com 05 pais e 02 técnicos em enfermagem, por meio de ligações telefônicas e trouxe em seus resultados as seguintes informações:
Em relação aos pais e usuários do sistema de vacinação:
- Não há uniformidade no material da caderneta e/ou cartão de vacinação entregue ao pais ou pessoas que vão se vacinar. Houve relatos de quem estava com a caderneta ou cartão se deteriorando. Em caso de adultos, foi relatado por algumas pessoas que várias vezes pegaram um novo cartão pois na hora da vacinação não estavam com seu cartão em mãos.
- As pessoas não sabem como devem proceder para solicitar uma segunda via se necessário.
- Os pais preferem utilizar a caderneta de saúde por conter mais informações sobre a saude da criança em geral do que o mero cartão de vacinas e por possuir um material de qualidade um pouco melhor.
Já em relação aos profissionais da saúde, a necessidade de uma sistema integrado que abrangesse todas as esferas da federação, bem como a pública e a privada foi algo bastante citado.
Questionados acerca do que poderia melhorar em relação à vacinação no País, dentre as respostas destaquei:
- “Ser integrado em um sistema integrado entre municípios e Estados ou com o SUS, para não ficar carregando vários cartões de vacinas”
- “Todos terem acesso a vacinação e um sistema informatizado e integrado…como um banco de dados com acesso por meio de documento pessoal assim não haveria doses extra desnecessárias…pelo fato do paciente perder o cartão de vacina”
- “Na minha opinião poderia melhorar no treinamento dos profissionais em relação ao atendimento infantil, como abordar a criança e Pais”
- “Conscientização. Informações claras para que todas as classes e pessoas possam entender.”
Alternativas de Solução:
Utilizei a Matriz Impacto x Esforço e a técnica do “Como poderíamos…” para buscar por alternativas que pudessem responder melhor às necessidades dos usuários e nortear o foco a ser dado na solução.
A partir das oportunidades identificadas nas fases anteriores e da construção da matriz verifiquei diversas possibilidades que poderiam ser desenvolvidas, conforme demonstrado na imagem abaixo:
Após o brainstorm acima e identificação das idéias com maior impacto e menor esforço, passei a agrupar as ilações semelhantes e escolhi em quais delas focaria para alcançar a solução, são elas:
- Como poderíamos auxiliar pais a não se esquecerem de vacinar seus filhos? Como poderíamos lembrar os pais qual vacina os filhos têm que tomar e quando? Como poderíamos notificar/lembrar pais das próximas doses de vacinas?
- Como poderíamos auxiliar no acesso das informações de vacinação do usuário?
- Como poderíamos informar sobre a saúde da criança?
- Como poderiamos informar sobre campanhas nacionais de vacinação?
- Como poderiamos informar as pessoas sobre a importância das vacinas e combate a doença? Como poderíamos informar aos pais sobre efeitos colaterais pós-vacinação?
A solução
Defini que nesse momento a solução focaria na criação de um aplicativo, adotando a abordagem Mobile-first de design responsivo , deixando a elaboração do website para momento posterior.
Essa abordagem também se justifica pelo fato de que no Brasil existem mais de 234 milhões de dispositivos do tipo smartphone o que permite uma maior disseminação do serviço a ser prestado por essa via.
Como essencial, a solução deverá conter:
- a caderneta de vacinação para registros;
- a opção de criação de lembretes;
- informações sobre vacinas, efeitos colaterais, contraindicações, número de doses entre outras;
- espaço para divulgação de campanhas nacionais de vacinação e notícias sobre o assunto;
- espaço para informações sobre cuidados com a saúde
Rabiscoframe
Para isso segui adotando a Metodologia Sprint com as etapas de anotações e desenho livre. Passei para a técnica do Crazy 8’s a fim de colocar no papel as ideias de modo rápido e sem questionamentos para dar maior fluidez ao processo criativo. Com isso, pude elaborar o primeiro rabiscoframe do projeto que serviu de base para o protótipo de baixa fidelidade do aplicativo.
Abaixo algumas imagens desse processo:
Protótipo de Baixa Fidelidade e Teste de Usabilidade
O primeiro protótipo da solução pode ser visto e testado no link abaixo.
https://www.figma.com/file/h7LDKO6yZxxDPNSTCIVxgt/Wireframe-Baixa-Fidelidade?node-id=0%3A1
O teste de usabilidade desse protótipo trouxe como resultado a necessidade de efetuar mudanças em relação ao menu de tarefas, disposição e configuração de perfis adicionais e de funcionalidades propostas.
Benchmarking
Após o primeiro protótipo de baixa fidelidade e o teste de usabilidade senti necessidade de conhecer mais sobre o mercado no qual a solução será colocada em funcionamento. Essa etapa foi importante não só para buscar fontes de inspiração, mas também para servir a um estudo mais aprofundado sobre as interfaces e o que nelas estaria funcionando bem, assim como o que deveria ser evitado.
Encontrei diversos aplicativos relativos à vacinação, alguns de funcionamento restrito a determinada localização. Após testar alguns, optei por aprofundar o benchmarking em relação aos apps: Minhas Vacinas, Dr. Luke e VacineMe.
Avaliei o fluxo de usuários e escolhas de design utilizadas nesses aplicativos tendo em mente as necessidades encontradas nas pesquisas que realizei.
Além disso, analisei o funcionamento do aplicativo ConectaSUS, uma vez que a solução aqui projetada tem como objetivo fazer parte do mesmo ecossistema.
Essa análise pode ser acessada por meio do seguinte link: https://medium.com/@limalarissa/benchmarking-drvaccin-770931964af2
Wireframe e Fluxo do Usuário
Com o resultado do teste de usabilidade do protótipo de baixa fidelidade em mãos e a pesquisa de benchmarking passei a redesenhar o protótipo bem como a definir o fluxo do usuário.
A organização do fluxo das tarefas foi uma etapa essencial para entender os “caminhos” dentro do aplicativo e identificar as funções e elementos que precisavam ser elaborados para cada passo. A partir desse mapeamento ficou mais fácil separar cada etapa de desenvolvimento de cada funcionalidade.
Guia de estilos
Tratando-se de um aplicativo fornecido pelo Ministério da Saúde, houve a necessidade de observação do Design System do Governo Federal Brasileiro. O referido Guia de Estilos foi utilizado como base com algumas alterações conforme será demonstrado a seguir.
Cores
A triagem das cores foi feita a partir das cores disponíveis no design system.
A escolha do preto e do branco para compor a paleta de cores se deu em razão de uma preocupação com acessibilidade existente no design system do governo. Ao utilizar essas cores na tipografia é possível trabalhar com com uma taxa de contraste alta com conformidade do tipo AA, conforme proposto pela diretriz WCAG.
Os tons de azul escolhidos fazem parte do design system e foram complementados pelos tons de verde. Azul e verde são cores normalmente associadas à medicina, assim como à tranquilidade, limpeza e saúde e por isso foram escolhidas.
Tipografia
A fonte sugerida pelo guia de estilos do governo é a Rawline, que nada mais é do que a fonte Raleway com o alinhamento de suas assimetrias. É uma fonte sem serifa de boa leiturabilidade e legibilidade.
Contudo, embora possua uma variedade grande de estilos, a fonte rawline quando utilizada sozinha gerou certo desconforto visual na tela mobile em certos segmentos, o que requer testes com usuários com baixa visão
Sendo assim utilizei a fonte Rawline apenas em seus formatos Regular e SemiBold, optando ainda por combiná-la com a fonte Source Sans Pro com o objetivo de estabelecer hierarquias e contrastes, tornando a experiência de leitura leve e fluida.
Essa questão será objeto de testes em etapa futura de desenvolvimento deste aplicativo.
A escala seguida foi a Minor Third (1,2) com peso de 400 e base 14px, a mesma sugerida no design system do governo federal.
Botões
Com as cores e a tipografia definidas passei à elaboração dos botões.
Considerando que a solução neste momento está focada apenas num produto mobile optei por criar botões em estados ativo e desativado, seguindo os tamanhos propostos no wireframe. O desenvolvimento de botões em estados do tipo hover, pressed, entre outros somente ocorrerá em etapa posterior quando da criação do website.
Formulários
A elaboração dos formulários teve como resultado os seguintes:
Iconografia
O design system sugere a utilização da fonte Awesome para escolha de ícones contudo a referida fonte não está disponível em versão gratuita. Dessa forma, foram desenvolvidos os ícones apresentados abaixo:
Ilustrações
Além disso, criei lustrações a fim de dar um tom lúdico ao aplicativo e criar um vínculo afetivo com o usuário. São elas:
Personagem Dr. Vaccin: criado com linhas arredondas para conferir sensações de proximidade, simpatia, afeto e segurança, sendo ele a face principal do produto.
Vírus, Bactéria, Escudo de Proteção e Nuvens: em estilo cartoon para quebrar a seriedade que órgãos públicos inclusive hospitais costumam passar e que podem ser exploradas de maneira divertida dentro do aplicativo com animações e mini-games.
Imagens para a caderneta de vacinas: Adultos, Idosos e Criança
As demais ilustrações utilizadas no protótipo podem ser encontradas na biblioteca de ilustrações “Hitu Illustration Components Community” no Figma.
Protótipo de Alta Fidelidade
Nesse momento, com a definição final dos wireframes e da guia de estilos foi possível a construção do protótipo de alta de fidelidade, cujo resultado pode ser acessado conforme abaixo:
Aprendizados e Próximos Passos
Considero que o maior aprendizado durante a elaboração deste projeto foi a importância de se utilizar um processo estruturado e fracionado em etapas para construção de uma solução. A cada passo realizado ficava mais claro o caminho a ser seguido e o porquê de cada etapa dentro do processo de design, dessa forma todas as etapas foram usufruídas ao máximo se que fossem desprezadas.
As pesquisas quantitativas e qualitativas também demonstraram ser um aliado de tamanha importância que não devem ser ignoradas ou mesmo desmerecidas. É a partir delas que podemos traçar estratégias para alcançar um melhor resultado nas etapas seguintes.
Por fim, devo destacar que o aplicativo Dr. Vacin continua em construção. Há muito ainda o que ser feito e alguns passos para o futuro já foram definidos:
- Organizar testes de usabilidade com usuários para que os pontos que necessitam de melhorias sejam identificados, especialmente em relação à UI.
- Elaboração de estudos de UX Writing e aplicação de testes para refinar a escrita e melhor se comunicar com os usuários
- Trabalhar a iconografia para maior concordância com o design system do governo federal
- Continuidade no desenvolvimento de funcionalidades e melhoramento da interface
- Substituição das ilustrações adquiridas por meio de Open Library (HiTU), utilizadas nas subtelas acessadas no menu “varinha mágica”, por imagens feitas sob medida a exemplo das utilizadas no caderno de vacinas.
- Elaborar estudos sobre acessibilidade e inclusão e aplicá-los na prática
- Criação de website
O projeto Dr. Vacin trata-se de um estudo de caso com vistas à conclusão da certificação em UX Design oferecida pelo curso UX Unicórnio. Esse é o primeiro curso na área do qual participei nesta minha jornada de transição de carreira do Direito para o UX. Para se conectar comigo basta me adicionar e me enviar uma mensagem no Linkedin ou no Instagram: @lariux7
Agradeço ao meu noivo e meu maior incentivador Laurent, ao amigo Rodrigo Caires, a amiga Daniela Cerveira que fiz durante este curso e ao mentor João Traini sempre disponível.
