top of page

Moodie Foodie

Problem Statement
To create an app 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.

Summer Food Pattern

Define

Role

I created this entire application, working as the user experience & interaction designer. I conducted the research and usability studies along with wireframing and prototyping.

Overview

This is a food delivery app which can be used to browse restaurants and order food. The goal was to create an app with a feature to solve the indecisiveness a user faces when ordering food.

Why this project?

I created this app for a UX Design course I undertook. I enjoyed learning a new software (Figma). I wanted to create an app from scratch, hatch the idea, understand what user experience was and come up with a final finished product.

Duration

April 2021 to June 2021  (2 Months)

Software used

Figma, Photoshop

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.

 

The demographic -  18 to 30-year-olds, millennials or, low-income students. 

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. To see the competitive audit, click here.

Pain Points 

 

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.
 

Accessibility

None of the apps studied during the competitive audit had any accessibility features.

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

miro.jpg

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. To view it properly, click here.

Personas

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.  

Doctor

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.

Frustrations

  • Demanding and inconsistent work hours.

  • “Although I have domestic help, I love eating from and exploring new restaurants.”

College Student

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

journey map black.jpg

User Flow Diagram

user flow ss.jpg

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

paper wireframe ss.jpg

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

home digital wireframe.jpg
wheel digital wireframe.jpg

Digital wireframes were made on Figma. This helps conceptualize the layout and the rough positions of the elements.

Low Fidelity Prototype

research
Ideate
Define
Design
low fi.jpg

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.

To view the low-fidelity prototype, click here.

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

backgroud.jpg

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

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 

mock 1.jpg

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.  

mock 2.jpg

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 wireframe (1).png

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.

To view the high-fidelity prototype, click here.

Evaluation

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!

bottom of page