Moodie Foodie
A food delivery app which can be used to browse restaurants and order food which is user friendly and aims to solve the deviation from the happy path users face when they are unable to choose where and what to eat.
My role
Independent Project
Competitive Analysis | Persona Creation | Journey Mapping | User Flow Design | Wireframing | Prototyping | Usability Testing | Design System Creation
Target Audience
18 to 30-year-olds, millennials or, low-income students in India.
Tools and Duration
Figma, Photoshop, Miro, Procreate | 2.5 months
Problem
-
Users face indecisiveness when ordering food from any app.
-
A scarcity of accessibility features in food ordering apps.
Solution
I created this app for a course but I have always faced the problem of being unable to decide where and what to eat. This project reflects on my personal experiences and the troubles I faced each time while ordering food.
The concept of the mood wheel aims to solve this problem and aims to provide a good user experience for the indecisive crowd.
Research
Research Overview
"Supposing is good but finding out is better." ~ Mark Twain.
​
A study conducted by secondary research showed that since 2020 there was a sudden surge in the usage of food delivery apps all over the world. Statistics on various apps were studied and analyzed. It was concluded that there were many opportunities to build upon in this sector.
​
Users spend a lot of time deciding on what and where to eat which leads to frustrations and makes the browsing experience bad. This app aims to target that problem along with it being an incentive to use the app.
Interviews were conducted during the foundational research phase as well as for the usability studies.
Competitive Audit
Competitors were studied and ideas were brainstormed accordingly.
Pain Points
Accessibility
​
None of the apps studied during the competitive audit had any accessibility features.
Decision Making
​
A lot of users have trouble deciding what and where to eat. To link the user and their mood with food choices is the brand thinking behind this product.
Incorrect Orders
​
Users place an order incorrectly or to the wrong location. There is usually no option but to cancel the whole order and redo the process.
Solutions :
-
A mood wheel which makes the choice for the user. Different types of wheels for more variety with an option to customize.
-
Translate and read-out options.
-
An option to cancel or modify the order within 60 seconds of placing it.
Ideate
Brainstorming session
I like to have a post-its session during the brainstorming phase or a design sprint. Throwing ideas & figuring out which ones are worth exploring. I used Miro to make my thought board digitally this time.
Personas
​
Aashna Gupta
45 years old
Pediatrician
Married, two kids.
Chennai, India.
​
Goals
-
To find the right work - life balance.
-
"Give back to the community and do my part."
-
Spend minimal time on the phone once they are home with their family.
Aashna is a Doctor at Apollo Hospital and loves to play tennis on the weekends. They have a busy and demanding schedule and end up ordering food atleast twice a week. They love to explore different cuisines and frequently use food ordering apps. They often have trouble deciding on a place to eat from as a family and would like a solution that ends the bickering that ensues everytime the family sits to order food.
Frustrations
-
Demanding and inconsistent work hours.
-
“Although I have domestic help, I love eating from and exploring new restaurants.”
Chidi Kimathi
22 years old
Exchange student pursuing engineering in India
Lives alone.
Nairobi, Kenya.
​
Goals
-
Be a successful Mechanical engineer.
-
"To pay off my student loan debts and find a job when I graduate."
Chidi is a student at Manipal University who lives alone in an appartment off campus. They are a highly introverted individual with severe social anxiety. They face communication barriers being from Kenya and studying in India. They often need to eat out and prefer ordering food over dining in.
Frustrations
-
“I don’t like going to restaurants to eat as I still feel uncomfortable in a foreign country”
-
Being an exchange student can prove challenging and often communication can be a problem.
Journey Map
User Flow Diagram
A user flow diagram was made before the design phase to get a rough idea of the navigation of the app. It helps me simplyfy the process and get an idea about which pages to create.
Design
Paper Wireframes
Five different versions of the home page...
​
I like to quickly hash out ideas for a rough screen on paper before making a wireframe. This process helps me visualize, assess every idea possible & determine the harmony between elements.
Digital wireframes
Digital wireframes were made on Figma. This helps conceptualize the layout and the rough positions of the elements.
Low Fidelity Prototype
All the screens and buttons were connected to test the navigation and page transitions at this stage. The wireframes were made for the main screens and this just served as an avenue to analyze the skeleton of the app.
The low-fi prototype was an excellent working yet simple model to conduct the usability study.
​
​
Usability Study
A usability study was conducted at this stage to refine the designs and proceed to the next stage to make the final designs.
​
Research study plan - View
Research presentation - View
​
This was an unmoderated usability study, conducted online. 5 participants were asked to test the low fidelity prototype and answer a series of questions. To view a summary of the study and participants responses, click here.
​
After the study was administered, a list of insights were compiled. Some of them were as follows:
​
​
Mood Wheel
The wheel needs to be redesigned and the prompt on the homepage needs to be more prominent.
Instructions
The mood wheel page needs to have instructions or a prompt which defines it’s purpose.
Images
The images for the restaurants on the homepage need to be more prominent.
Colors & UI elements
Primary Colors
Purple
#6C5B7B
Bright Pink
#F67280
Secondary Colors
Grey Blue
#355C7D
Pink
#C06C84
Light Orange
#F8B195
Supporting Colors
White
#FFFFFF
Grey
#999999
Black
#000000
Background
Linear gradient of primary and secondary colors
Colors
A mix of Primary and Secondary colors used as gradients was used to design the initial backgrounds and the mood wheel. The transition from the dull purple to the light orange gave a sunset like feel and a fun aspect to the application. The primary colors were used as buttons and incorporated into the UI elements to keep the theme through the negative space and the clean design concept.
UI Elements
This app uses supporting colors for most of the UI elements with Primary colors as highlights or for important buttons.
For example, Filters and items in cart are highlighted with primary colors.
​
Buttons and some other elements have a drop shadow. Regular, hover and clicked buttons have different designs too.
​
The small wheel icon central to the navigation bar was designed to take the user directly to the wheel menu page to highlight this feature.
​
​
Mockups
The homepage was slightly redesigned, keeping the main theme intact while implementing the changes according to the feedback gained from the usability study. The mood wheel prompt was modified.
Instructions needed to be added. The goal was to define the use of the wheels with a short eye-catching prompt. The use of color for a single word “spin” was to highlight it’s significance while maintaining the aesthetic.
High Fidelity Prototype
Moodie Foodie is an interactive food ordering app and I wanted it to be an experience, not just a task. Screen transitions were made as fun as possible, same with the colors. The site's colors were used as linear and radial gradients for backgrounds and the mood wheel itself.
A feature which I found fascinating during research was the separate donation button. The checkout page has clean designs for adding tips, payment, promo codes etc.
As the mood wheel is the main feature, it appears prominently on the navigation bar.
​
​
Evaluation
-
The button to insert voice instructions in the check menu was added.
-
Considering that users may prefer a translate button, the option was added to the top bar itself so as to be easily accessible and prominent.
Accessibility Considerations
Takeaways
Impact:​
​The users who tested the app after the high fidelity designs were happy with the concept of the mood wheel and gave positive feedback.
​
What I learned:
This case study helped me discover the actual impact of user experience design. It helped me gain a real world experience of user research, usability studies and documenting my work. I learned how to use Figma while designing this app too.
​
Next Steps
I would like to research more about equity design and implement the same in this app to help every user enjoy the experience of ordering food.
​
To simplfy the designs and make the interface more elegant is the next goal. I understand the need for the optimal use of negative space too.
​
I would like to refine my skills in Figma and implement better designs to make the app more convenient and aesthetic.
THANK YOU for taking the time to view my work. Please feel free to get in touch or leave some feedback!