Click the image to view
high fidelity prototype.
Read further for case study.
Instead of another macro counting app, FulFIll allows users to connect their eating habits to their emotions.
UX Research
UX Design
User Testing
Branding
UI Design
FulFill is for anyone of various ages or genders, who is ready to look into the patterns behind their eating habits. It's an inclusive space, created to empower users to speak to themselves in their own voice.
Today's marketplace is filled with food journal apps with macro counters embedded. people start strong but often fail because they're not built to constantly analyse charts & graphs.
FulFill is a mobile app that allows users to not only log what they eat in a casual manner, but how they feel before & after they eat. Over time the user gets to see any emotional patterns that may be unhealthy, and now has the tools to stop themselves from repeating those patterns.
Google Survey
Competitive Analysis
Personas
User Stories
Task Flows
Wireframes
Mockups
Google Forms
Figma
maze.com
Zoom video
I used 4 apps with the highest download numbers. The following is a breakdown of screenshots from FatSecret, Food Diary, Loose It!, and iEatBetter.
This survey was posted in a Facebook group dedicated to healthy living. While not completely definitive, the results were a good basis to continue.
Corina is the lead lab tech at a research hospital vying for a new funding grant. She spends long hours in the lab, which takes away from her daily life with her partner. She eats whatever's at the lab, whether it's healthy or not.
Age: 36 Female Lab Tech
"As someone who deals with standards & procedures all day, sometimes i need to escape numbers so that I can understand context."
Curtis is a retired Captain in the U.S. Army working as a V.A. Advocate. He often travels for meetings without scheduling time to eat. He usually only eats when there's nothing left to do & self reflection isn't a high priority.
Age: 42 Male Veteran Advocate
"As someone used to handling situations analytically, I need prompting to deal with emotions in order for me to change old habits."
Connor is a high school teacher who left his small town in Texas to teach in Houston. His larger class sizes create extra work. Between the heavier course load & him not yet quite fitting in, he's often bored & isolated.
Age: 29 Male High School Teacher
"As someone who constantly has kids looking to me for answers, I need to be able to not be the authority so I can grow in other areas."
After constructing the 3 personas, I walked through 3 user tasks that illustrate how the app would help each persona satisfy their unique user story.
After a deeply analytical day, this task flow satisfies her story by allowing her to input a meal with a casual amount (e.g. a plate full, 1/3 of a bag), and urging her to explore her emotions.
Curtis needs to process emotions in a way that makes sense to him. This task flow uses an analytical approach that's familiar to Curtis in order to show him patterns of emotions & unhealthy eating habits.
Despite his loneliness, Connor needs some outside help to change his new habits. This task flow allows Connor to utilize his own authority to tell himself how to make a healthy food choice.
From these basic sketches I was able to theorize basic concepts of Iconography, Hierarchy, & proximity.
My main concerns were two fold. Was I cramming too much on a page, and how close was I with the icon selection. After feedback from fellow designers I created the wireframes for each user flow. Afterwards, I began the color application & visual design.
After browsing Dribble & Pinterest two mood boards came to fruition. The first is based on emotions, while the second is based on words. They both influence the color palette used for the app.
We've all seen the most prominent logos in the marketspace. I decided to keep the current model of one letter in a branded color scheme.
The main questions here were: what icon to pair the letter with? And what shape should the outline be?
I sent these option pages out to other designers via Slack & LinkedIn. The response was overwhelming: #11 is the best received!
Once the over-all visual & color themes were set, it was time to apply them to the first iteration. This is the round when the first unmonitored user testing via maze.com happened.
The testing consisted of 3 tasks based on these user tasks:
Even though many testers liked the initial layout overall, some didn't & let me know there was room for improvement. Having a forum for direct feedback was critical to the direction of the next iteration.
One issue I didn't foresee was the desire for testers to simply click throughout the app without staying on task. This tended to skew the success rate noticeably.
Although the success rates were decent on the tasks of Add Entry & Find Pattern, they were well below acceptable for the main task of Create Pep Talk. Even accounting for mavericks, there was no way to ignore the need to improve user experience.
Yeah. That's bad.
1st Round of
User Testing
2nd Round of
User Testing
3rd Round of
User Testing
2nd round of user testing
3rd round of user testing
The last numbers from unmonitored testing aren't perfect, but they do show great growth. There's still some hiccup in the Pep Talk task, but its combined success rate is encouraging as a MVP.
After wrapping up the unmonitored maze.com testing, it was time to see how users reacted to the app live.
After several rounds of user testing I focused on the end result of the app, the Pep Talk Alert. These were the 3 options created.
After presenting the options at the end of live interviews, as well as to fellow designers via Slack, the favorite emerged. Overwhelmingly, people felt the option that included the user's picture carried far more weight than the options with a logo.
Having the user's profile pic would enable the user to hear the Pep Talk alert in their own voice, as opposed to feeling like someone else is telling them what to do. This leaves them feeling empowered to enact change instead of blindly following anonymous orders.
This is the final user flow of the Pep Talk Feature in high fidelity screens.
Efforts Taken:
Although I thought I was fairly close with the 1st iteration, the internet is undefeated. I learned quickly that the green trim was too much for many users to digest visually. I also was made aware of how my icon alignment simply didn't work in a practical manner for left handed people.
Creating the MVP for this app was an experience in patience & detachment. I had to come to grips with people not caring about how they complete a task during testing, or even if they completed the task at all. Users gave up, and didn't understand directions & phrasing I personally thought were plain. This truly taught me to understand that perspectives, experiences, and even vocabularies are wildly different.
Going forward, I know that unmonitored testing is great for bulk results and pointing out glaring systemic issues. However, quantitative data proved to spark some of the most important changes from iteration to iteration. It is this balance that has lead to the creation of the FulFill mobile app.
Thank You.