UX Cases  

App de Alimentação Saudável

“Sorrimos com os olhos e trabalhamos com dedicação e amor, para levar até você uma alimentação equilibrada e consciente. Juntos, preparamos com muito carinho refeições práticas, saborosas e com ingredientes naturais e orgânicos”.

Estudo de caso

De dezembro de 2022 a Fevereiro de 2023

Protótipo Navegável

Visão Geral do Projeto

O produto: Aplicativo Peti Peti, apresenta receitas para crianças e adultos, estudantes e pessoas que trabalham o dia inteiro e não tem tempo para cozinhar. Ideal para quem quer uma alimentação mais saudável sem complicação.

O problema: Pessoas ocupadas que não tem muito tempo para cozinhar e se alimentar de uma forma saudável.


Responsabilidades: Pesquisa de usuários, criação de Personas, histórias de usuários, mapa da jornada do usuário, Wireframes, prototipagem de baixa e alta fidelidade, realização de estudos de usabilidade, iteração em projetos.


Duração do projeto: Outubro de 2022 a Fevereiro de 2023.

A meta: Projetar um aplicativo de alimentação saudável que seja fácil de usar, gerar receitas e fazer lista de compras focando no fluxo de cadastro.


Minha função: Estudante de UX Design do Google em parceria com a Coursera + CIEE, projetando soluções para o aplicativo Peti Peti com foco na jornada do usuário para realizar um cadastro.


História: Este projeto foi desenvolvido inicialmente em conjunto, durante o curso de UX Design da Estação hack e Facebook com o respectivo time (Andrew Araújo, Quéren Villas, Candida Vieira, Patrick Silva, Letícia Coelho, Isla Barreto e Laion Cabral) Todos estudantes de UX Designer. 


Pesquisa com usuários: Resumo

Realizei entrevistas para entender o que os usuários estão necessitando. Realizada com pessoas entre 18 e 40 anos que costumam usar aplicativos de delivery. Este grupo de usuários confirmou a suposição de que não há aplicativos práticos e fáceis de alimentação saudável, sendo atraídos para aplicativos de alimentação voltados para as fastfoods. A pesquisa também revelou que as pessoas preferem usar aplicativos de delivery porque não tem tempo para pensar receitas e cozinhar de forma prática, e por sua comodidade, causa uma dependência em alimentos processados e uma má alimentação. A pesquisa também revelou que as pessoas também se sentem frustradas por não conseguirem receitas fáceis para elas mesmas cozinharem. Na pesquisa 90% dos entrevistados mostraram que preferem cozinhar sua própria alimentação desde que seja de uma maneira prática. 

Pesquisa com usuários: As Dores

Tempo: Trabalhadores, estudantes, mães e pais solteiros estão ocupados demais e até mesmo cansados ou com problemas de saúde devido a má alimentação. A correria do dia os impedem de ter uma alimentação saudável.


Apps de alimentação saudável: A maioria dos usuários entrevistados têm preferência por fazer seu próprio alimento, o que seria melhor para sua saúde física e mental, pois alguns cozinham como forma de terapia. Os aplicativos de delivery geralmente são voltados para o fastfood, porém trazem o conforto da comida pronta.

Gerador de receitas fáceis e acessíveis: Os usuários sentem falta de cozinhar e muitas vezes não sabem o que fazer com seus ingredientes, e muitas vezes só encontram receitas complexas na internet, isso desestimula o ato de cozinhar fazendo-os optar pelo delivery.


Gerador de lista de compras funcional: As pessoas sentem dificuldade ao fazer compras on-line, e também fisicamente, por terem perdido o hábito de cozinhar muitas vezes ficam perdidas com o que comprar no supermercado. Muitas vezes compram ingredientes que serão desperdiçados.

Pesquisa com usuários: Personas

Vitória

Idade: 45

Escolaridade: Superior completo

Cidade Natal: Parnamirim

Família: Casada, tem 2 filhos.

Profissão: Esteticista, empresária.

“Cozinhar é algo que dá prazer, comer bem gera uma vida saudável.”

Vitória é dona de um salão de beleza. Ela trabalha o dia inteiro e quando chega em casa gosta de cozinha sua comida, mas nem sempre consegue. Recentemente ela teve uma experiencia ruim ao ter que jogar vários alimentos que estragaram devido a falta de uso. Vitória gostaria de ter como acessar um gerador de reitas para poder ver as possibilidades de pratos que existem com os alimentos que ela possui, para evitar o desperdício.

Metas: Evitar o desperdício de alimentos; Conhecer novas receitas saudáveis; Gerar lista de compras baseada em sua dieta.

Frustrações: Já teve problemas com a realização de pedidos em app de alimentação; Experiência ruim na tentativa de encontrar receitas fáceis com os ingredientes disponíveis em sua casa; Não consegue gerar uma lista de compras de maneira prática.

Rodrigo

Idade: 23

Escolaridade: Superior cursando

Cidade Natal: Goianinha

Família: Solteiro

Profissão: Estudante, estagiário.

“Alimentação saudável deve ser para todos, com receitas e ingredientes simples as pssoas podem viver melhor e economizar.”

Rodrigo é estagiário em uma empresa de adiministração e durante a noite estuda adminitração na universidade. Rodrigo geralmente não tem tempo para comer algo saudável devido a sua rotina corrida, limitando-se a cozinhar no final de semana. Rodrigo acredita que no final de semana ele poderia preparar uma comida saudável e que desse para ele poder comer durante a semana. Ele acredita que com um aplicativo de fácil utilização, que gere receitas fáceis e acessiveis ele poderia se programar para ter uma alimentação mais saudável e economizar o dinheiro que gasta comendo fora ou em aplicativos de delivery.

Metas: Ter acesso a receitas simples; Conseguir preparar a refeição da semana inteira; Evitar desperdício e economizar.

Frustrações: Gastos ecessivos com app de delivery; Sente-se demotivado ao não encontrar receitas com os ingredientes disponíveis em casa; Teve dificuldade em gerar uma lista de compras com base em alimentação saudável.

Mapa de jornada do usuário

Iniciando o design/Rabiscoframe

Nessa fase foi realizada a técnica do crazy8’s para capturar ideias com esboços rápidos, para pensar em como seria feita a interface do app. Os esboços representam ideias de como seriam astelas do app para mobile e desktop.


Wireframes Mobile

Nesta parte do processo foram feitos os wireframes, com o intuito de poder entender a disposição dos elementos e das informações que até então estão esboçadas em Lorem Ipsum.

Wireframes Desktop/Tablet

Nesta etapa do processo foi seguida a mesma lógica do artefato anterior, porém adequando para o Desktop e tablet para seguir uma proposta responsiva para o app Peti Peti.

Design System

Nessa sessão apresento um registro do início do design system, que por sua vez será incorporado de componentes, botões, ícones e todas as suas variações, assim como instruções de cores e comportamento dos elementos.

Protótipo de Baixa Fidelidade - Mobile

Nesta parte do processo foram aplicadas as ideias que foram desenvolvidas no processo, para isso foi seguido um design sistem para aplicar as cores, tipografia, imagens e os demais elementos.

Protótipo de Baixa Fidelidade – Desktop/Tablet

Nesta parte do processo foi aplicada a mesma lógica para as telas de Desktop e Tablets.

Pesquisa e Usabilidade

Estudo de usabilidade: descobertas

Conduzi duas rodadas de estudo de usabilidade. As descobertas do primeiro estudo ajudaram a orientar os designs de wireframes à mockups. O segundo estudo usou um protótipo de alta fidelidade e revelou quais detalhes precisavam ser refinados.

Descobertas da primeira rodada

Descobertas da segunda rodada

Tela de Login/Cadastro Antes e depois do estudo de usabilidade

Aqui foi direcionada a atenção do usuário para o cadastro, deixando o botão em evidência (call to action) pois, um dos objetivos era captalizar novos usuários. Além disso, foram implementadas os recursos visuiais, tipografia, ícones e componentesd e acordo com o design system da Paeti Peti.

Tela de preenchimento de cadastro - Antes e depois do estudo de usabilidade

Aqui foi simplificada a tela de preenchimento de cadastro, porém, ainda será adicionado opções de cadastro por e-mail e/ou redes sociais. Além disso, o cabeçalho confundiu alguns usuários e precisa ser revisto no próximo ciclo de antes da entrega.


Telas da Lista de compras e Confirmação - Antes e Depois do estudo de usabilidade

Aqui foi ajustda a lista de compras, adicionado check box para facilitar a lista que poderá ser impressa ou gerada em pdf. Assim como usada virtualmente, esse foi um pedido recorrente os testes de usabilidade .

Considerações de usabilidade

Devemos nos atentar ao cabeçalho e ajustar as opções que devem estar nele, por exemplo alguns usuários não se atentaram ao botão de voltar, que em muitos casos não estavam presentes. Esse é um Pzero que deve ser ajustado para o funcionamento do fluxo.

Precisamos melhorar a acessibilidade, revisar as heuríticas e ajustar a UI do aplicativo. Muitos usuários tiveram dificudades em editar a lista de compras, porém ela pode ser melhorada.

Sobre o cadastro, ainda precisamos melhorar nas opções que facilitam o cadastro, como um login por outra plataforma como o gmail ou facebook.

Protótipos de Alta Fidelidade 

Aqui foram adicionados as animações e interações ao protótipo navegável de acordo com as métricas estabelecidas assim como os requisitos captados pela pesquisa com usuários. Clique aqui para navegar.

Mobile

Mockups

Próximos passos

Trabalhar nas opções de planos mensais, para noas receitas e alimentaçã saudáveis. Atrair o usuário para adquirir o cadastro pago.

Ajustar as informações da lista de compras, incluindo uma opção de marcar todos os ítens da lista, desmarcar e apagar ítens.

Ajuste da UI e melhoria das informações e botões do cabeçalho assim como o design sistem.

Considerações Finais

Acessibilidade

Aprendizados 


Próximos Desafios

Ajustar acessibilidade trabalhar cores e componentes para pessoas com deficiência. Melhorar o design system e desenhar uma versão dark mode. 

Criar a tela de perfil do usuário. e ajustes para logar com e-mail e redes sociais.

Fazer mais uma rodada de estudo de usabilidade com os usuários. 

Vamos nos conectar!

Obrigado por avaliar o meu trabalho de UX Design. Se você quiser continuar acompanhando meus trabalhos entre em contato através do E-mail: laion.o.cabral@gmail.com ou clique aqui.