Descobrir

Cenário

Para compreender o contexto da saúde no Brasil, foi realizada uma desk research que orientou uma investigação mais aprofundada. A Organização Mundial da Saúde define saúde como bem-estar físico, mental e social, destacando a importância de hábitos como boa alimentação, sono adequado e atividade física.

Apesar disso, dados indicam um cenário preocupante, com altos níveis de sedentarismo, dificuldades relacionadas ao sono e piora na saúde mental da população. Além disso, a alimentação de baixo valor nutricional, especialmente entre adolescentes, aumenta o risco de obesidade e doenças crônicas.

Questionário online

O objetivo desta pesquisa foi compreender a relação dos usuários com saúde mental, alimentação, sono e atividades físicas, e como esses fatores impactam sua vida cotidiana. Para isso, foram utilizados métodos como pesquisa exploratória, quantitativa com formulário online, qualitativa com especialista e teste de usabilidade com o protótipo.

Como muitos dados iniciais estavam desatualizados ou inconsistentes, foi criado um formulário para coletar informações mais atuais, totalizando 106 respostas. Os resultados evidenciaram um cenário preocupante, com sedentarismo, alimentação de baixo valor nutricional e presença significativa de transtornos mentais.

Hipóteses

Após analisar os relatórios gerais, investiguei as respostas individuais para ver se conseguia encontrar padrões, surgiram várias hipóteses na qual dentre elas estavam:

1. O problema não está em uma área específica, é um problema macro de desequilíbrio entre essas 4 áreas;

2. O corpo pode influenciar positivamente e/ou negativamente a mente, e vice-versa;

3. As pessoas não conseguem enxergar de forma clara como andam os diferentes fatores da sua saúde.

Depois, cautelosamente, transformei essas hipóteses em perguntas, tomando cuidado para mantê-las mais neutras o possível. A intenção era que não fosse possível o entrevistado ser enviesado e poder validar as hipóteses.

Entrevista com especialista

As pesquisas realizadas trouxeram descobertas importantes, mas também novas dúvidas. Para aprofundar o tema, foi realizada uma entrevista com uma psicóloga especialista, cuja contribuição foi essencial para o desenvolvimento do aplicativo de forma mais responsável e fundamentada.

Falas mais relevantes

“O estado emocional pode afetar a alimentação das pessoas por meio de transtornos alimentares, como bulimia e anorexia.”

“As emoções podem impactar o corpo de diversas formas, seja na pele por meio de uma inflamação, psoríase…”

“Na maior parte dos casos lido com jovens com problemas em suas relações amorosas, pais e amigos”

“A atividade física contribui na liberação das endorfinas, hormônios que estimulam o cérebro para o bem-estar”

“Existe um perfil de pessoas obsessivas e compulsivas, elas podem tentar burlar o aplicativo com o intuito de se beneficiar, pode ficar ansiosa com determinados tipos de dados disponíveis”

Definir

Personas

Após a etapa de empatia, havia um grande volume de dados sobre o tema e os usuários, mas ainda de forma abstrata. Para organizar e apresentar essas informações de maneira clara, foram desenvolvidas duas personas representando o público-alvo. Elas ajudaram a visualizar para quem o aplicativo estava sendo projetado e a orientar o desenvolvimento da solução.

Solução

Foram identificados diversos problemas nas pesquisas, mas o principal foi o desequilíbrio entre áreas essenciais da saúde: emocional, alimentação, atividades físicas e sono. Para gerar soluções, foi utilizada a técnica “Como poderíamos” e, em seguida, a Matriz de Esforço vs. Impacto para avaliar a viabilidade e o impacto das ideias.

A solução definida foi o desenvolvimento de um aplicativo que monitora e analisa a rotina do usuário por meio do Apple Watch, apresentando visualmente dados sobre saúde emocional, atividade física, alimentação e sono, ajudando o usuário a identificar desequilíbrios e entender melhor sua saúde.

Desenvolver

Mapa do site

Foi criado um mapa do site para organizar a estrutura do aplicativo. Devido às limitações e ao uso rápido do Apple Watch, o app foi dividido: o relógio ficou responsável pela coleta de dados e visualização simples, enquanto relatórios mais completos ficaram disponíveis no iOS, simplificando a arquitetura no Apple Watch.

Por meio dos Fluxos de usuário mapeei a navegação do app, definindo o que virá depois de cada interação do usuário. Analisando dessa forma macro e simplificada, é possível definir uma jornada clara para que o usuário chegue ao que está procurando do jeito mais rápido e simples possível.

Brainstorm

Antes de criar as telas digitais, começamos um brainstorming com base no que definimos até essa etapa usando rabiscoframes de baixa fidelidade, dessa forma, podemos criar o máximo de ideias possíveis e assim, conseguir abrir mão delas, pois não demandam tanto tempo. Depois analisamos as ideias de cada um e priorizamos as que faziam mais sentido para o nosso objetivo.

Prototipar

Essa é uma fase dividida em várias etapas, pois, se logo de início for feito um protótipo inteiro fielmente ao que será o aplicativo quando implementado, caso seja identificado algum problema, qualquer alteração fará com que haja um grande retrabalho. Nesse sentido, fiz um protótipo de baixa fidelidade com as principais funcionalidades, e logo em seguida fiz testes com usuários, assim, o protótipo final estará validado, concentrando os esforços no que de fato funciona.

Navegue pelo protótipo de baixa fidelidade: Ir para Figma

Testar

Para validar se as funcionalidades do aplicativo estavam intuitivas e navegáveis, criei um teste de usabilidade remoto não moderado pela plataforma Maze. No qual foram recrutadas 22 pessoas do público geral, ainda não focado nas personas pois estavam sendo validadas funcionalidades básicas que não exigiam esse nível de precisão.

Métricas de sucesso do teste

• Taxa de sucesso das tarefas

• Taxa de erro de clique

• Tempo para completar cada tarefa

• Satisfação dos testadores

Resultados

As duas primeiras tarefas validaram a clareza da tela principal e, mesmo sendo um protótipo de baixa fidelidade, os resultados foram satisfatórios: 71 pontos no Maze, 100% de sucesso e média de 11 segundos por tarefa. Porém, a alta taxa de erros de clique (52%) mostrou uma inconsistência, exigindo análise mais aprofundada dos dados.

O fluxo que pedia a intensidade da emoção que o usuário sentiu naquele dia ficou com o resultado mais baixo, era um componente de arrastar o seletor para o local desejado. Porém, grande parte dos participantes estava clicando nos nomes, o que gerou uma confusão entre a interface e o modelo mental deles.

Feedbacks mais relevantes

"Gostei de não ter que digitar nada no diário, da pra resolver tudo só clicando."

"Na tela dos alimentos fiquei meio perdida, e se eu não tiver comido maçã? como faço para inserir no aplicativo?"

"Achei meio brusca a mudança entre o que eu estou sentindo para a minha alimentação, pra mim uma coisa não tem relação com a outra."

Biblioteca de componentes

Na criação da biblioteca de componentes usei a metodologia do Atomic Design, que basicamente divide os componentes em alguns níveis. Sendo eles: átomos, moléculas e organismos, nessa framework, os átomos podem fazer parte de uma molécula, e a molécula, por sua vez, fazer parte de um organismo. Assim, é possível reaproveitar componentes menores em outros mais complexos, reduzindo o tempo gasto nessa etapa.

Protótipo Baixa fidelidade

O primeiro protótipo em escala de cinza feito na ferramenta Figma conta com 18 telas, dentre elas a de onboarding, a tela principal e um diário para que o usuário possa inserir seus dados de alimentação e emocional, visto que, os dados de atividades físicas e sono (com a permissão dos usuários) já poderiam ser obtidos pelos sensores do dispositivo.

Entregar

A partir de certo ponto, foi necessário documentar o projeto para facilitar a manutenção e a escalabilidade do design por meio de componentes. A documentação foi organizada em guia de estilos, design tokens e biblioteca de componentes.

Style guide

Para manter a consistência do aplicativo elaborei um guia de estilo com especificações das cores, fontes, grids e ícones a serem usados em toda a interface. Além de ter desenvolvido os emojis personalizados com base nos atributos da marca pela ferramenta Blender, que é específica para 3d.

Os design tokens tornam os elementos visuais mais organizados e flexíveis ao padronizar propriedades básicas como cores, tipografia, tamanhos, espaçamentos e sombras. Dessa forma, é possível criar diversas combinações mantendo consistência e controle sobre a interface.

Oportunidades de melhoria

1. Trocar o componente de definir a intensidade para um que use "-" e "+" como cliques para definir o valor desejado;

2. Inserir uma descrição indicando a categoria de cada alimento, pois na categoria "frutas" as pessoas estavam achando que representava apenas uma maçã que era o ícone de representação da categoria;

3. Usar uma linguagem neutra na escrita, pois muitas indicações estavam no masculino, o que poderia gerar um atrito entre outros gêneros;

4. Trocar a barra de progresso para um indicador de página, porque, do jeito que estava, dava a impressão de ser uma barra de carregamento.

Protótipo de alta fidelidade

Desde a versão de baixa fidelidade foram encontrados problemas a serem resolvidos na interface. Além disso, um novo padrão visual foi criado, sendo necessário aplicar todo o guia de estilo, os tokens e a biblioteca de componentes a um protótipo de alta-fidelidade, levando em consideração as diretrizes do HIG (Human interface Guidelines), para que a interface fosse consistente com o sistema e familiar aos usuários das plataformas WatchOS e IOS.

Navegue pelo protótipo de alta fidelidade: Ir para o Figma

Como foi comentado na arquitetura, algumas telas de gráficos de desempenho foram feitas para o iPhone, então fiz vários testes de acessibilidade de acordo com as normas da WCAG, seguindo as boas práticas de gráficos.

Gamificação

Implementei um sistema de gamificação para incentivar o uso frequente do app, já que ele depende do preenchimento diário de dados pelo usuário. O sistema concede pontos por atividades como preencher o diário, atingir metas, melhorar o desempenho e manter sequências de bons resultados.

Existem 6 tipos de jogadores, que basicamente são perfis comportamentais. Utilizei o framework Hexad como padrão de tipos de jogadores, com isso em mente foram implementadas 4 mecânicas de gamificação, cada uma com um objetivo diferente:

Níveis: os usuários sobem de nível ao acumular pontos, com uma progressão balanceada para não ser nem fácil e entediante nem difícil e frustrante. Esse sistema reforça o senso de progresso e evolução contínua.

Desafios: pensados para o perfil realizador, os desafios incentivam a superação e o desenvolvimento pessoal, sendo essenciais para manter esses usuários engajados.

Conclusão

Time

O time era composto por quatro integrantes: três programadores — Vitor Gledson, Douglas Figueiroa e Lucas Alexandre — e eu responsável pela área de design. Como único designer, participei ou conduzi todas as etapas do projeto, realizando reuniões frequentes de handoff com os programadores para apresentar atualizações e alinhar a viabilidade técnica.

Após a publicação do app na App Store, coletamos resultados e feedbacks e percebemos que o aplicativo realmente ajudava as pessoas a terem uma vida mais equilibrada. Identificamos oportunidades de melhoria, principalmente em UX Writing, para tornar os textos mais claros e inclusivos, e também no processo de desenvolvimento, já que a documentação ficou pronta apenas no final, deixando pouco tempo para ajustes pelos desenvolvedores.

Um dos maiores desafios foi desenvolver para o Apple Watch, o que trouxe aprendizados sobre experiência do usuário em telas pequenas, exigindo mais atenção à organização dos elementos, quantidade de informação na tela, acessibilidade, usabilidade e simplicidade da interface, mantendo apenas o essencial para o usuário realizar suas tarefas.

Anexos

Baixe o aplicativo Genika direto da App Store: Download

Projeto desenvolvido durante a capacitação profissional Apple Developer Academy UCB.