Adding fun and entertainment to
food decision-making
A food discovery app in a Tarot Reading format to help people decide what to eat.
End-to-end product design | UX Research | UI Design
Overview
End-to-end product aimed to change the decision of what to eat into an enjoyable experience. Foodie Fortune is presented in a Tarot Reading format to add fun to the experience of food decision-making. Four (4) months was spent on this project which included user research, multiple user testings and countless iterations, with the end goal of providing a product that will help people overcome decision-making fatigue and turn the question of "what to eat?" an activity people will look forward to answering.
My Role
Concept
User Research
Graphic Design
User Interface
User Experience
Prototyping
Testing
Tools
Background
It all started with a question-- "what should I eat?" This question, like hunger in itself, is universal and remains a question relevant to this day. It may sound like an easy problem to solve but the fact that it is still a problem people face to this day, made me believe that it is a space worth exploring.
Problem
A study showed that people make over 220 food-related decisions per day. This leads to decision fatigue and provides the main cause of why people have a hard time deciding what to eat. This problem occurs on a daily basis and can bring about feelings of frustration, helplessness and even cause conflict within households.
Solution
Foodie Fortune is a tool that provides people with food inspiration in the form of Tarot Readings to help them decide what to eat. It caters to people who are experiencing decision-fatigue and provides them food options in a fun and entertaining way.
THE SOLUTION
PRODUCT FEATURES
RESTAURANT AND RECIPE RECOMMENDATIONS
Get recommendations for both what to order and what to cook
Easily toggle between what to order and what to cook based on the Tarot Reading. You can also open the website of your restaurant or recipe of choice right on the app itself!
DIFFERENT TAROT CATEGORIES FOR DIFFERENT NEEDS
Select from three types of Tarot Readings that cater to specific needs
Whether you're looking for a meal that's fast and easy, or a dish that's new and exciting, or inspiration for when you're meal prepping, Foodie Fortune has a type of Tarot Reading for you!
CUSTOM TAROT READINGS BASED ON MEAL TYPE
Customize your Readings to get inspiration for a specific meal
Ask the universe for a nudge in the right direction by specifying what meal you need inspiration for. Choose from a wide variety of options -- from breakfast, lunch, dinner, drinks or desserts!
TAROT READING HISTORY
Easily find all your previous Tarot Readings
Received a particularly interesting Tarot Reading last week? Don't fret, because the app automatically saves your previous Tarot Readings so you can refer to it again and easily find the restaurant or recipe linked to your Reading. An added bonus: you also share your reading on social media for all your friends to see!
FOODIE FORTUNE WAS INSPIRED BY A SINGLE QUESTION:
What should I eat?
NON-LINEAR DESIGN THINKING:
DESIGN PROCESS
To guide my research, I followed a non-linear design thinking framework that allowed me to keep refining and defining my problem space to come up with a solution that truly reflects the needs and wants of the users.
EMPATHIZE:
SECONDARY RESEARCH
To begin understanding this problem, I started reading academic articles on human psychology and sociology explaining human consumption.
I discovered that choosing what to eat is a complex and multi-faceted decision. The question, “what should I eat” is actually very hard to answer.
​
What really stood out to me from my desk research is the fact that people make 220 food related decisions everyday and that there is a hedonic aspect (desire for pleasure) to human consumption.
​
Human consumption is based on utilitarian (need) and hedonic (pleasure) motivations
*According to Bharath & Henry
Discovering that people make over 220 food-related decisions everyday, and that, there is a hedonic aspect to eating, I moved forward with this hypothesis:
If there was a product that could add fun to food decision-making, people will experience less decision fatigue
EMPATHIZE:
USER INTERVIEWS
Six user interviews provided valuable insights to help me understand my problem space and see what affects food decision-making from a more personal perspective.
Leveraging my student and professional network, I sent out a screener survey. From a pool of 29 survey respondents, I recruited six (6) people to interview. The interviews were done online through video conference.
DEFINE:
INTERVIEW SYNTHESIS
After the interviews, I started synthesizing the data by pulling out interviewees' quotes, feelings and behaviours and grouping them through an affinity map and empathy map
Click to view all
DEFINE:
RESEARCH INSIGHTS
Five key insights emerged from my primary research.
UNDERSTANDING THE USER:
PERSONAS
From the key insights, I was able to come up with several possible personas. But I realized that all those key insights can stand up on their own, as opportunities, and each of my personas can also do the same. So I decided to trim it back and focus on just one persona: Yana the Yogi.
Other possible Personas: (click to enlarge)
UNDERSTANDING THE USER:
HOW MIGHT WE?
With Yana the Yogi in mind, I came up with several "How Might We" statements
IDEATE:
SOLUTION IDEATION
Taking the insights I got from my research, I focused on three main insights to serve as the backbone for my product solution. For each insight, I proposed a solution.
With Yana the yogi as my main inspiration, and the insights as the backbone for my solution, I decided to design an app that provides users with suggestions on what to eat in a Tarot Reading format.
Why Tarot Reading?
From the insights from my user interviews, I knew that the solution I was going to develop will have to have a fortune telling aspect to it as users said that they desire a tool that makes the decision for them. With several ways to approach this, I studied my options and with Yana the Yogi in mind, concluded that the Tarot Reading format was the best format to use for my product solution.
​*Most insights were taken from this article by the Washington Post published in December 2021.
IDEATE:
MINIMUM VIABLE PRODUCT
In order to identify the Minimum Viable Product (MVP), I first laid down user stories to serve as my baseline. From the user stories, I zoomed in on the MVP to give focus to my design solution.
INTRODUCTION OF CATEGORIES
To keep my user flow simple and stick to my MVP, I created Tarot Reading Categories to allow me to add a lot of features on the app, without overwhelming the users. I decided to introduce three tarot reading categories to achieve this:
ONE MEAL MARVEL
-
For those looking for a quick decision
-
Gives one card as one meal suggestion
-
72 possible cards (traditional deck) but limitless since cards are fictional
TRIPLE DECKER
-
Provides element of fun
-
Encourages the discovery of new food
-
Keeps the app exciting with 59,640 possible food combinations
WEEKLY SPREAD
-
Provides solution for those who meal prep; “plan ahead” feature
-
More than 1,000,000 possible weekly food combinations
3
1
2
USER FLOWS
User flows laid out the navigation for the key tasks I have identified. The two critical routes I identified are: 1) Get a Tarot Reading and 2) Review Saved Readings
Click to view all images
PROTOTYPE:
SKETCHES
I sketched out my initial design and organized the screens based on the red routes.
GUERRILLA TESTING
Using my initial sketches, I built a quick prototype and conducted a guerrilla test. The guerrilla testing provided great initial feedback and identified some pain points and features that users felt needed improvement.
I conducted a guerrilla test with five (5) users through video conference. I tested my red routes and also asked users for general feedback on what features they wanted to see.
Although all the users were able to successfully accomplish their tasks, I identified several pain points particularly on the Tarot Reading Categories which caused confusion.
The testing also revealed that some features of the app such as the filters, social sharing function and saved reading library also needed refinement.
I was also able to get general feedback on what features the users were looking for in the app and what was important to them.
View Prototype on Pop by Marvel
PROTOTYPE:
WIREFRAMES & WIREFLOWS
With the feedback from the guerrilla testing, I started creating my wireframes to better visualize the navigation for my red routes.
Click to view all images
DESIGN:
MOOD BOARD & STYLE GUIDE
I created a mood board & subsequent style guide so I can identify the color palette and overall feel I wanted the app to have. I also made sure that the colors I chose passed Accessibility standards by using the WebAim Contrast checker.
Mood Board
Style Guide
Click to view all images
**Design combines a mix of paid and free assets. Free vector images were taken from vecteezy.com and flaticon.com. Due credit is given to the original vector designers. Thank you very much!
Since my my app had a unique and specific function, I decided to create my own graphic elements so they can stay on brand and also convey the full idea of the app and its functionality to the users. I wanted to create an app that is ready to ship so that users would not need to imagine what it could be but really be able to experience what the finished app is like.
DESIGN:
HIGH FIDELITY DESIGNS & PROTOYPE
I started fleshing out my screens and creating my High Fidelity mock ups. However, during the process, I felt like the app's interface could be improved in terms of user engagement and motivating users to use the product. So, I decided to go back to the drawing board, do more competitor research, and rethink my design direction.
That exercise made me realize that what my app needed was more elements of gamification.
GAMIFICATION STRATEGY:
FULL IMMERSION EXPERIENCE
Click to view all
Happy with the new design direction, I went ahead and designed the rest of the screens.
GAMIFICATION COMPLETE
HIGH FIDELITY SCREENS
TEST:
USER TESTING ROUND ONE
I conducted five moderated testing sessions that focused on testing the two red routes I have identified: get a reading and review saved readings. I gave users several scenarios that they would use the app for and observed the steps they took. I also tested the following features of the app: filters and social sharing.
Only 80% of the participants were able to accomplish their tasks without assistance and all participants showed some confusion on several features of the app.
​SUMMARY OF USABILITY ISSUES
​
-
Landing page visual hierarchy is not clear
-
Triple Decker category is confusing
-
Saved Readings feature unclear
-
Hamburger menu vs. bottom navigation
-
Add 'auto-draw' feature
DESIGN ITERATION
Taking the findings from the Usability Testing, I iterated on my design to improve clarity and efficiency.
01
REVISION
Improve Landing Page Visual Hierarchy
Original
Landing Page Screen
ISSUE
Users reported that the visual hierarchy is not clearly established on this page. Some would click on the tarot card themselves instead of the text.
Revised
Landing Page Screen
REVISION
Switch the copy in the landing page to improve visual hierarchy and make the CTA clearer.
02
REVISION
Address confusion on the Triple Decker Reading Category
Original
Triple Decker Info
ISSUE
Users were confused on the Triple Decker Category in general. Although they were able to accomplish their tasks, they missed out on what this category is truly about
Revised
Triple Decker Info
REVISION
Added a pop up hint upon opening the Triple Decker category so that users can read about it first.
Original
Triple Decker 2-card Feature
ISSUE
Although users were able to find restaurants/recipes based on their 'Triple Decker' readings, they missed out on one of the main features of the 'Triple Decker' which is the ability to select. two cards at once and get results that combine what's on the two cards, thus creating a food fusion.
Revised
Triple Decker 2-card Feature
REVISION
Added the option to select two cards in the main copy so that users will always be reminded of this feature.
03
REVISION
Rename Saved Readings Section
Original
Menu & 'Saved Readings'
ISSUE
Users did not realize that the app was auto-saving their readings so when asked to review their saved readings, they did not know where to go.
Revised
Menu and 'Saved Readings'
REVISION
Changed the icon and name for 'saved readings' to 'previous readings' and made the function automatic instead of voluntary. Also moved the menu section to the right since the hamburger menu is located on the right side as well.
04
REVISION
Improve Previous Readings Section
Original
Previous Readings Page
ISSUE
Users wondered how far back the app saves readings and what happens if they choose to get multiple readings in a day, which is the case if they use the app for all their meals.
Revised
Previous Readings Page
REVISION
Added a history filter so that users get the idea that the app saves their previous readings for a long time. Also added a timestamp to the Readings to account for the case of Multiple Readings in a Day.
TEST:
USER TESTING ROUND TWO
The second round of User Testing revealed that the pain points present during the first round of testing were no longer present.
After iterating on the main pain points from my first round of testing, I conducted another round of testing with five (5) new participants, all of which were female. All of the tests were done remotely through video conferencing.
For this round, I gave the participants more freedom and allowed them to use the app freely without a lot of prompts. I paid particular attention to how users navigated through the main red routes and paid particular attention to the critical areas of improvement I identified during the first round.
​
NEXT STEPS
If given more time to work on this project, I would iterate on the feedback I got from the second round of testing to further refine the app and get it ready to ship.
The second round of testing was very successful and all the users were able to successfully accomplish their tasks easily. However, there were still some pain points that could be improved. If I had more time to fully develop this product, I would make the following changes based on findings from the User Tests:
Add Onboarding/Tutorial screens
Although users learned the app quickly, some sort of onboarding or short tutorial at the beginning to get an overview of the app was desired by some.
More Pop up hints
For areas where the concept is relatively new to users, adding more pop ups might be useful. This is particularly true for the Triple Decker Reading
Preview of proposed iteration/
Next Steps
​
REFLECTION
This is my first end-to-end product design project and this experience made me understand and truly value all the work and research that goes into product design. This experience was very humbling for me as a designer because it made me value user feedback and embrace the whole journey from understanding and discovering; to designing; to continuously iterating; constantly testing-- all with the end goal of coming up with a product that truly caters to the needs of the users.
So functional! The "cook this" option was such a nice surprise!
I'd love to help you make this app happen!
