UX | Do discovery à UI: desenvolvendo um aplicativo de gerenciamento de remédios

Desafio em trio do programa Gama Experience 38.

Rodrigo Torres
12 min readSep 27, 2021

O segundo desafio da slack de UX/UI no programa Gama Experience 38 é o primeiro a emular um dos aspectos principais do Design de Produto: o trabalho em equipe. A turma foi dividida aleatoriamente em trios e reuniu três homens neste grupo: Gabriel Dall'Acqua Porto, Iago Mendonça e eu, Rodrigo Torres.

Organizada em duas sprints, a tarefa previa o design de um aplicativo para gerenciamento de remédios. Coube ao trio definir o nicho desse aplicativo a partir do desenvolvimento do projeto do zero, desde o discovery do produto.

A plataforma escolhida para o gerenciamento do projeto foi o Notion. Lá está detalhada cada etapa da criação desse app de remédios. A primeira foi o Kanban, organizado em trio após nossa primeira reunião e ideação do backlog do produto.

Visão geral do kanban, método de organização do projeto do nosso app de remédios.

O quadro contém todos os cards necessários para a evolução organizada do projeto. Definimos os entregáveis, o grau de prioridade de cada um deles e seus respectivos responsáveis — ora definido de acordo com a “especialidade” de cada um. Em dado momento, concordamos em deixar os responsáveis em aberto, para dinamizar as entregas, e esse método funcionou muito bem.

Partimos, em seguida, para uma primeira Desk Research sobre o público-alvo ideal do (futuro) aplicativo. Após buscas no Google e nas lojas de aplicativos, identificamos a melhor fonte de feedbacks sobre esses infoprodutos: suas caixas de avaliação no Google Play e AppStore. Medisafe, My Therapy, Clue, Medilist, Caixa de Remédios, Hora do Medicamento estão entre os mais de aplicativos analisados, assim como produtos específicos para bichos de estimação (MyPets, Pet Manager etc).

Essa gama variada de aplicativos de remédios explora diferentes nichos e funcionalidades — um deles se dedica a apenas converter as medidas dos remédios, por exemplo. E é dramático notar que esses produtos sejam tão criticados por não entregarem (ou entregarem mal) o que se propõem a fazer; desde bancos de dados com poucos remédios até alarmes que não funcionam devidamente. Fora os apps de interface paupérrima.

Certezas, suposições e dúvidas sobre o universo de aplicativos de remédios.

A partir desse levantamento inicial, pudemos tirar algumas conclusões sobre os usuários de aplicativos de remédios, além de traçar hipóteses sobre eles. Uma série de questões também nasceu dessa pesquisa inicial. Esse cenário de certezas, suposições e dúvidas está representado numa Matriz CSD. E foi usado como base para a primeira pesquisa de perfil que rodamos — uma análise quantitativa do nosso público-alvo.

Com todo cuidado do mundo para não enviesar as respostas, moldamos perguntas que nos permitissem identificar um padrão de comportamento desse público e que funcionalidades são mais úteis nesse tipo de aplicativo. Também priorizamos identificar diferentes públicos, e depois analisar o padrão de comportamento de cada um:

quem usa muito aplicativos, quem usa pouco;

quem toma muito remédio, quem toma pouco;

quem atenta para o fim de um remédio, ou não;

quem atenta para a validade de um medicamento;

quem faz uso de remédio de uso contínuo;

etc.

Outra pergunta fundamental nessa pesquisa quantitativa foi se o nosso público se preocupa somente com a própria saúde ou se seria responsável pela saúde de terceiros:

cônjuges (marido ou esposa);

familiares mais novos (filhos);

familiares mais velhos (pais);

empregadores;

animais de estimação.

A intenção aqui era esclarecer uma impressão inicial: a existência de dois públicos possíveis de serem trabalhados. O primeiro, e mais óbvio, seria de pessoas que tomam remédio frequentemente. O segundo, de pessoas que cuidam da medicação de seus pets. Para uma melhor análise, isolamos as respostas de ambos os perfis.

O resultado da pesquisa, realizada com 38 pessoas, foi bem interessante e nos mostrou uma enorme coincidência:

81,8% dos entrevistados espera o remédio acabar para comprar outro (o que revela a importância de um app de lembrete para tomar remédios);

81,8% não encontra dificuldade para reprogramar que remédios precisa tomar;

81,8% dos entrevistados não toma muitos remédios.

Por fim, constatamos que mais de 50% dos entrevistados não se importa com a validade dos remédios, em guardar receitas, dentre outros cuidados importantes para que um tratamento seja efetivo.

Impasse? Não. A pesquisa quantitativa mostrou outro dado interessante:

52,6% das pessoas não cuidam da saúde de outros entes da família

42,1% das pessoas cuidam da saúde de seus animais de estimação

A primeira desk research feita já nos mostrara que o mercado de pets é riquíssimo, bilionário, e um nicho que poderia trazer um diferencial para o nosso aplicativo de gerenciamento de remédios.

Eureka!

Uma nova pesquisa foi realizada. Essa desk research #2 (que serviu de benchmarking preliminar) revelou que as pessoas têm cada vez menos filhos e mais pets. Também notamos que muitos competidores importantes no mercado de apps para pet não realizam um bom trabalho de experiência do usuário. Assim definimos quem seriam os nossos stakeholders — mas não sem antes validarmos nossas impressões em entrevistas individuais.

Para nossa pesquisa qualitativa, entrevistamos cinco “pães e mães de pet” de três estados do Brasil. E os resultados foram incríveis! Tivemos entrevistas divertidas, surpreendentes, didáticas, críticas e repletas de insights (confira as cinco, na íntegra, em nosso quadro organizador no Notion). As principais contribuições desses encontros foram:

confirmamos a existência de um público-alvo carente de conteúdo;

confirmamos a existência de um público-alvo carente de suporte;

elucidamos como são as rotinas das pessoas com seus bichinhos;

montamos um amploa mosaico de características desse público-alvo.

Assim, reunimos tudo que precisávamos para começar a definição do nosso produto. A primeira etapa foi elaborar a Persona do nosso aplicativo de gerenciamento de remédios:

Elaborada a persona e com um entendimento melhor de para quem projetamos o app, precisávamos entender melhor o que essa pessoa sente, quais são as suas dores e o que a deixaria satisfeita. Com esse objetivo em mente, elaboramos também o Mapa de Empatia da pessoa usuária Aline Dias, a nossa persona:

Compreendido em mais detalhes com quem estamos sendo empáticos, montamos um dicionário, uma linguagem adequada a Aline. A partir disso, definimos o Tom de Voz a ser adotado no aplicativo.

Para desenvolver um aplicativo para essa pessoa, buscamos entender o que os aplicativos que já estão no mercado oferecem. Foi feito um Benchmark com 9 aplicativos para pets. Um deles foi eliminado após teste de uso — percebermos que ele só funciona se um veterinário preencher as informações e enviá-los para o app cliente. Depois que todos os aplicativos foram testados, seus respectivos fluxos foram registrados.

Uma boa referência visual

Assim, selecionamos 5 apps para o gerenciamento de remédios e outras necessidades de pets, assim como selecionamos 2 aplicativos de gerenciamento de remédios para os próprios usuários e sua família. Esses produtos serviram como Referência Visual e de parâmetro para preenchermos a tabela de Competitive Audit — na qual listamos funcionalidades importantes nesse nicho de infoprodutos.

Com os dados sobre a persona e os aplicativos concorrentes (diretos e indiretos), chegamos na etapa em que propomos a Jornada do Usuário de nosso aplicativo. O cenário da jornada analisada foi da nossa persona que acabou de adotar um bichinho e vai baixar um app de controle das medicações para não esquecer de quando dar o remédio para o seu melhor pequeno amigo.

E não poderíamos desenvolver um aplicativo, ou o produto digital que seja, sem pensar nos requisitos de Acessibilidade. Segue a nossa tabela:

As cores também foram analisadas pelos padrões de contraste da acessibilidade, e então definidas pensando em algumas combinações. Também nos baseamos em nossa persona e seu tom de voz (amigável, afetuoso e entusiasmado) e cruzamos essas informações com os significados e sentimentos que as cores carregam e transmitem. Essa foi a base de definição para a nossa Paleta de Cores e Tipografia — que acreditamos ser uma combinação agradável e acolhedora.

Com todos os dados e etapas anteriores concluídos, era chegada a hora de desenvolver e definir a última etapa dessa Sprint 1 do nosso desafio: um Fluxograma de telas e uso para o nosso aplicativo.

O tempo foi curto, o trabalho foi corrido, mas ficamos um bocado satisfeitos com o resultado alcançado. Porém, ainda não acabou. Seguiremos atualizando o nosso Kanban com os entregáveis definidos na sprint final do desafio, que prevê a criação de um wireframe, seu protótipo navegável, testes com usuários, style guide, entre outros. Estamos preparados!

Prototipagem, validação e style guide: estruturando um app de cuidados para pet

C omo vocês viram acima, as pesquisas do nosso infoproduto (um app de remédios) desenharam uma persona que, em sua maioria, cuida de sua saúde (52%) e não de outros parentes, mas que precisa cuidar de seus bichinhos de estimação (42%) — assim revelando um nicho imenso, bilionário, e com poucos concorrentes que oferecem um produto digital concorrente de excelência.

Diante disso, decidimos “pivotar” a proposta inicial de um app de gerenciamento de remédios para um aplicativo que se dedica a armazenar dados e alertar para eventos essenciais para uma pessoa cuidar de seu pet. Ou seja: uma plataforma que não se limita à administração de remédios, e pensada especificamente para o cadastro, cuidados e acompanhamento de animais domésticos.

Nessa espécie de versão beta do app, a ideia é apresentar um produto conciso, porém suficiente e intuitivo, de modo a cativar esse público-alvo carente de uma plataforma para pets que seja de fato útil e fácil de usar.

Sobre a tipografia

Para atingir esse objetivo, pensamos cada aspecto do app (como tom de voz e paleta de cores) de acordo com a nossa persona — os “pais e mães de pet”, digamos. Porém, somente após a data-limite de entrega do trabalho nós percebemos que faltou justificar a tipografia escolhida para o aplicativo.

A fonte Comfortaa foi escolhida para os títulos e subtítulos do app por ser um tipo de letra minimalista, sem serifas em suas extremidades, portanto, de leitura clara, ideal para o uso comercial em tamanhos maiores ou áreas de destaque de um aplicativo.

Além disso, a Comfortaa possui uma forma arredondada que combina com a proposta lúdica da fonte escolhida para o corpo de texto: a Arvo, uma fonte serifada ideal para telas e, pensamos, condizente também com a leveza que desejamos transmitir pela comunicação escrita e pelas cores do app para pets.

Do wireframe ao style guide

Curioso como, após tantos desafios e nessa segunda semana de trabalho em grupo, a dinâmica das entregas nos proporciona experiências difíceis que nos ensinam a partir do erro.

Por exemplo, um primeiro aprendizado foi que, em vez de dividir as tarefas entre os membros, deveríamos ter feito parte do trabalho coletivamente mesmo e sequencialmente, uma coisa depois da outra.

Caso do wireframe e do style guide, que tentamos fazer ao mesmo tempo, com pessoas diferentes cuidando de cada tarefa, e, obviamente, o desenvolvimento desses itens do design system — que possui, essencialmente, o propósito de gerar consistência e evitar retrabalho — acabou sendo marcado por inconsistência e retrabalho.

Feita essa constatação, montamos juntos o wireframe no Figma, seguindo a indicação proposta no desafio de nos familiarizarmos com o software (Iago já domina bem a ferramenta, Gabriel aprendeu bem ao longo das últimas semanas e Rodrigo, que precisa melhorar, mas avançou um tanto em seu domínio, ficou responsável pela revisão das telas — e alguns pitacos), e assim ficou o nosso protótipo:

Essas imagens estão organizadas em sequência, conforme a usabilidade do aplicativo (à exceção da aba menu acima). Essa primeira versão do app é simples, suas funções se resumem a cadastrar o pet, agendar lembretes de medicação, vacina e consultas no veterinário, acessar calendário e uma tela resumida de acompanhamento da saúde do pet.

As telas abaixo se referem ao alarme, cadastro do pet e dos medicamentos (telas iguais) e dos diferentes eventos que o usuário poderá relacionar ao seu bichinho de estimação e agendar no aplicativo.

Esse wireframe foi desenvolvido a partir de um modelo encontrado na Comunidade do Figma e sendo adaptado conforme as nossas necessidades, a partir do fluxograma desenvolvido na primeira etapa do desafio.

Protótipo navegável

Após a elaboração do wireframe, aí, sim, fomos criando o nosso style guide simultaneamente ao protótipo navegável do aplicativo. Afinal, conforme aplicávamos as cores, tipografia etc em nosso produto digital, tomávamos nota e fazíamos os devidos acréscimos no Style Guide. Assim ficou o protótipo do aplicativo para pet, já batizado como MeLoo:

Um aspecto que tentamos aplicar ao máximo em cada função foram os atalhos — ou seja, outras formas, mais fáceis e dinâmicas, de acessar determinada funcionalidade. Por exemplo, como você pode ver acessando o protótipo navegável, é possível acessar o calendário tanto clicando na data, como arrastando pro lado.

Nesse ponto, portanto, já temos um Style Guide sólido, com informações de tipografia, cores, gradiante, avatares, banner, botões, chips, cards, modelo do calendário etc. A imagem abaixo é uma breve demonstração do Style Guide completo, que você encontra completo aqui, no Figma.

Testes de usabilidade

Com o protótipo navegável pronto, elaboramos um questionário conciso para os testes de usabilidade do aplicativo. Organizamos esse roteiro com uma tabulação que observa, em cada etapa de usabilidade do MeLoo, os pontos positivos, os pontos negativos e comentários do usuário durante a interação com o app. Além disso, no rodapé, é possível também observar, um mapa de emoção do usuário durante sua jornada.

Os testes foram realizados com 4 usuários, e foram bastante importantes para constatarmos a necessidade de melhorar a usabilidade do aplicativo, como atalhos. Porém, a recepção geral ao produto foi boa, tendo gerado sugestões de adaptá-lo para uso pessoal (como para o uso de anticoncepcional, nicho que cogitamos e escolhemos não explorar durante as pesquisas da fase anterior).

A interação com o MeLoo apresentou também algumas observações que fugiram ao roteiro e foram, em sua maioria, positivas (como elogios à estética do aplicativo). A jornada de emoção dos usuários demonstrou uma experiência satisfatória, apesar da necessidade de alguns ajustes. A tabulação completa dos testes realizados está disponível no Notion.

Aliás, esta foi a nossa plataforma de organização das tarefas e reúne todos os dados completos de desenvolvimento do app MeLoo — como o Kanban atualizado das tarefas realizadas e o checklist de entrega dos itens. Nossa conclusão é de que, com mais tempo, poderemos aprimorar o aplicativo e fazer mais testes para torná-lo cada vez mais intuitivo e útil para os pais e mães de pet.

Curtiu? Larga o dedo na palminha ali embaixo! Se tiver reclamação, elogio ou sugestão, seja muito bem-vindo, comente.

Falo mais sobre UX Writing e Product Design em geral no meu LinkedIn.

--

--

Rodrigo Torres

Críticas de cinema e TV. Pitacos eventuais sobre esportes, política e o que mais der na telha.