top of page
logo black.png
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
logo_figmaIcon.png
Logo_Adobe Illustrator.png
logo_Adobe Photoshop.png
mirologo-freelogovectors.net_.png
ma746m3ff-marvel-app-logo-marvel-reviews-220-user-reviews-and-ratings-in-2021-g2_edited.jp
Foodie mock up_no shadow_edited.png
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.

Cap1_Design Process.png
Icon_Empathize.png

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.

People make

over 220

food related

decisions everyday

 

*According to Wansink, et al.

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.

UX Research interview.png
Icon_define.png

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. 

key insights_2.png

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.

Persona_description_NoBG.png

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

HOW MIGHT WE STATEMENTS.png
Icon_ideate.png

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.

Insights-Solution_V2.png

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.

early mockup.png

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.

Why Tarot Reading.png

*Most insights were taken from this article by the Washington Post published in December 2021.

Icon_ideate.png

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. 

User-Story Map.jpeg

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.png

PROTOTYPE:

SKETCHES

I sketched out my initial design and organized the screens based on the red routes.

Route 1_ Get a reading.png
Route 2_ Review saved readings.png

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.png

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 

Icon_Design.png

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

Case_Moodboard.png

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.

Icon_Design.png

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

Mock up_HiFi.png
Icon_testing.png

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_landing page.png

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_landing page.png

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_triple decker info.png

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_triple decker hint.png

REVISION

Added a pop up hint upon opening the Triple Decker category so that users can read about it first.

Circle arrow_edited.png

Original 
Triple Decker 2-card Feature

Issue_triple decker 2 cards.png

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_triple 2 card feature.png

REVISION

Added the option to select two cards in the main copy so that users will always be reminded of this feature.

Circle arrow_edited.png

03

REVISION

Rename Saved Readings Section

Original 
Menu & 'Saved Readings'

Issue_saved readings.png

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_saved readings.png

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.

Circle arrow_edited.png

04

REVISION

Improve Previous Readings Section

Original 
Previous Readings Page

Issue_Page_savedreadings.png

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_Page_saved readings.png

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.

Circle arrow_edited.png
Icon_testing.png

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.

100% of the participants were able to accomplish their tasks without assistance.

 The pain points that were present during the first round of testing were no longer pain points during this next round of testing.

Icon_Design.png

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

Icon_reflect.png

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.

Layer 5.png

So functional! The "cook this" option was such a nice surprise!

quote 5

I'd love to help you make this app happen!

quote 5

I love this app! I need to see this on the app store

It has been an amazing and enjoyable journey of Design and I am excited to apply all that I've learned to real-life projects that have wider reach and bigger impact. 

Thank you for reading!

bottom of page