Modern Foodie

A personal project to create a food ordering app for a contemporary, healthy restaurant.

Screenshots of a mobile food ordering app displaying menus with options such as salads, chicken sandwiches, pizzas, sides, and customization choices like cheese types.
Screenshots of a restaurant mobile app showing the menu interface, including options for salads, pizza, burgers, fries, and customizable chicken sandwiches, with prices and add-ons displayed.
Black and white icon of a person.

My Role

End-to-end UX/UI

designer

Black and white icon of a criss-crossed wrench and screwdriver.

Tools

Canva, Figma, Zoom, Anima,

Flair pens, paper

Black and white icon of a clock.

Timeline

4 weeks

8/2/22-8/30/22

Process

Flowchart with four steps in a process: Define, Research, Ideate, Test. Each step has a description underneath: Define - Developed needs and challenges; Research - Competitive analysis, Personas, Survey, User interview; Ideate - Sketches, wireframes, mood board, photos; Test - Usability studies, low-fi and hi-fi prototypes, design iterations.

1

DEFINE

Project Overview

Modern Foodie needed a food delivery app that makes online ordering easy for people on the go with busy schedules who want to eat healthy and enjoy the aesthetics and stylings of modern foods but do not have time to cook or time to eat out at a restaurant.

Goal Statement

Our food app would allow users to order healthy, locally-sourced fast food, which will affect health-conscious consumers who have little time to cook by providing them with healthy, modern, fast food that can work with people across budget ranges.  We measured effectiveness by conversion rates of visitors, order fulfillment time, and quality of reviews.

2

Research

Methodologies & Reasoning

Icon of a bar graph with the words "Competitive Market Analysis" underneath, a speech bubble with a question mark and lines next to the word "Survey," a user icon with the words "Personas" below, and three silhouette figures with the words "User Interviews" underneath. Each section includes a paragraph of text describing a process involving market analysis, surveys, personas, and user interviews.

Competitive Market Analysis

I started my research for this project with a CMA, which I ran to compare Modern Foodie to other peer-to-peer restaurant companies. I used the CMA to analyze the strengths, weaknesses, and features offered peer-to-peer restaurant apps.

Findings

  • Possibility to link to local farms and ranches that supply produce and proteins

  • Can also provide customized recommendations from the restaurant

    • “Try it this way…”

    • “We recommend…”

  • Pair possible specialized beverage options with meals (i.e. the cucumber mint water as a pairing with the balsamic salmon salad, etc.)

    • Maybe allow users can add their own recommendations

  • Extension of ingredients list to provide health benefits of each dish and/or specific “power foods” and benefits found in each dish– especially important to the health conscious demographic of consumers

  • Including pictures of customization options (foods) may increase consumer likelihood of adding on foods and increasing overall cost/ spending more

Survey

I created a survey that received 75 responses to find out more about food app user frustrations, likes, and dislikes.

Research Goals

  1. I want to understand the common challenges involved with different types of users with busy schedules who want to order food via an app.  

  2. I want to identify frustrations people face when ordering food through an app and resolve those issues with the design of a new food delivery app.

How I Gathered Information

  • I interviewed stakeholders and tech development team to better understand their goals and challenges.

  • I conducted an online survey to receive feedback on likes and dislikes of food delivery apps with the incentive of discount coupons for the restaurant.

Interview Questions

To Development Team

  1. Can you describe your vision for this food delivery app?

  2. Do you have a preexisting app?  If so, what would you like to see changed or improved?

  3. Who is your primary customer?  What is the demographic you want to target?

To Consumers

  1. How often do you order modern cuisine for delivery?

  2. What do you like or dislike about food delivery apps?

  3. What features make it easier and faster for you to order food from an app?

  4. Can you describe your current schedule and how you balance your responsibilities with meal planning?

  5. What challenges do you face in the ordering process? How does this make you feel?

Four circles numbered 1 through 4 with text below each. Circle 1: 'Pain Point #1', text: 'Working adults are too busy to spend time on meal prep.' Circle 2: 'Pain Point #2', text: 'Platforms for ordering food are not equipped with assistive technologies.' Circle 3: 'Pain Point #3', text: 'Text-heavy menus are too difficult to comprehend in the form of an app.' Circle 4: 'Pain Point #4', text: 'Menus are inconsistent across platforms, leading to confusion when ordering.'

Findings

Were there any surprises?

Yes! I was surprised to discover issues with the inconsistencies of menus between apps and websites. I was also surprised that users tend to feel overwhelmed with text-heavy apps. Surveyors expressed desire for a more straightforward, clean, and simple design for easier usability.

Personas

The Working, Single Mom

A detailed profile of Reena Smith, a paramedic from Lakewood, Colorado, including her picture standing inside an ambulance, information about her age, education, family, occupation, her goals of healthy eating, and frustrations related to meal preparation and food delivery.

The College Student

Profile of Arit Patel, a 23-year-old college student living in Austin, TX. He works at a coffee shop, enjoys cycling and hiking, and has a girlfriend. The image shows a smiling young man with a beard, wearing a light blue shirt and backpack, outdoors with trees and cars in the background.

The Stay at Home Mom

A profile of Rachel Fry, a stay-at-home mom of four kids under age six from Plano, TX, with goals to feed her family gluten-free on the go and avoid GMOs, and frustrations with meal timing and healthy fast-food options. Photo of Rachel with four children under a tree.
A document titled "User Need Statements" listing three users: Reena Smith, Arit Patel, and Rachel Fry, each with their respective needs and problem statements about ordering healthy, convenient meals for their families.

Value Proposition

A visual brainstorm chart titled "Value Proposition of the Modern Foodie App" featuring colorful sticky notes with different features and benefits of the app, including vivid food images, customizable dish options, reviews, diet keys, food sources, and user interface features, all credited to Meredith Dobbs.

Customer Ethos

Through analyzing customer personas and the customer journey map, I found ways to add value to the Modern Foodie App that directly target the ethos of their customer base. Key strategies to increase value include:

  • Linking to food sources of ingredients because these are customers who care about the quality of the foods they consume.

  • Adding in suggested food alteration ideas and substitutions to fit the specific dietary needs of consumers who might be vegan, gluten-free, etc.

  • Including recipes of dishes for consumers to know what they are eating.

A presentation slide titled "What I Realized..." displaying six circular text bubbles with quotes about food choices and rationale, alongside a simple illustration of a human head with gears inside.

3

Ideate

Brainstorming & Sketches

I thought through various ways to approach the design of this app in order to meet the ethos of both the company and the users. I wanted to provide access to food sources as well as special dietary needs of customers while also representing the brand stylings of the restaurant. The first iterations of the design included links to food sources and the company’s ethos from the main page, but usability testing showed that this format was too cluttered, so links to food sources would ultimately move to the dropdown menu in the navigation bar as well as in the “our story” section provided at checkout.

Sketched UX design storyboard for a healthy foods ordering app. It includes six panels: 1) Customer selects 'Order' button; 2) Customer reviews and selects favorites; 3) Customer chooses food to customize; 4) Customer adds items to cart; 5) Customer proceeds to checkout; 6) Customer pays and checks out.
Paper wireframes of a mobile app design for a food delivery project, showing different layout sketches of the app interface on three phone screens, with labeled sections such as 'Takeout,' 'Delivery,' 'Popular,' 'Appetizers,' 'Mains,' 'Desserts,' 'Kids,' and additional features like 'Food Sources,' 'Recipes,' and image placeholders.

Wireframes

Comparison of a hand-drawn and digital wireframe for a food ordering app. The hand-drawn wireframe shows a mobile screen with 'Takeout' and 'Delivery' options on top, a circle divided into 'Appetizers,' 'Main,' 'Kids,' and 'Desserts,' and buttons for 'Food Sources' and 'Recipes' at the bottom. The digital wireframe displays a similar layout with a search bar, 'Takeout' and 'Delivery' buttons, a circle divided into 'Popular,' 'Mains,' 'Kids,' and 'Dessert,' and 'Food Sources' and 'Recipes' buttons. Annotations highlight quick access to food order options, links to food sources and recipes, and the company's focus on using locally sourced, clean foods.
Diagram of a mobile app interface for a food ordering system, showing options to order, view sources and recipes, with buttons labeled takeout, delivery, popular, and photos of dishes.

4

Test

I wanted to see how participants would use the app to order food and how they would use (or not use) links to food sources, recipes, and customization suggestions. Results from my usability test called for a more simplified app with food sourcing information available through the navigation bar and recommended customizations or pairings available with each individual food option.

Test Objectives

The design problem I tried to resolve was how to integrate food sourcing information along with pairing/customization ideas into the traditional structure of a food ordering app. The results of this study will help to inform how users use this information (and if they use it) to help inform design decisions of where to integrate this information into the app without interrupting the user flow.

Specifically, I wanted to understand the challenges users faced in placing an order, processing payment, and how to repair user flow issues accordingly all while integrating specific traits of the brand.

I discovered that…

Users struggled to find and use recommendation options. They wanted to be able to access recommendations from the restaurant as they ordered, so I moved the link to recommendations as the first option along with each dish.

Food source information was better placed in the navigation bar and also on the checkout page where users can read more about the restaurant’s story while they wait to pick up their orders.

Design Revision #1

Customization button added to each dish

Menu featuring two chicken sandwiches, one with Greek style toppings and the other with California style toppings, priced at $12.95, with options to try Greek style for an additional $3 or California style for an additional $5.
A digital menu showcasing a chicken sandwich with a photo of the sandwich on a white plate, containing breaded chicken, bacon, greens, tomato, pickles, red onion, avocado, swiss cheese, and mango ranch dressing, served on toasted ciabatta, priced at $12.95. The menu includes options to customize with recommendations, bread, condiments, cheese, and sides, with an 'Add to Cart' button and a shopping cart icon.

Design Revision #2

Relocation of Food Sources and Recipes to Main Navigation

A restaurant menu webpage featuring a logo with a fork and knife, navigation options for Home, About Us, Menu, Sources, Recipes, Cart, Contact, and a large section with the word "ORDER." The background shows a glass of orange juice, an orange slice, and a salad with lettuce, olives, shredded carrots, and cheese on a dark wooden table, with a fork nearby. There is a handwritten-style caption at the bottom that says "Explore the Menu."
A digital menu screen displaying a salad with greens, shredded carrots, onions, black olives, walnuts, and cheese, along with a glass of orange juice and orange slices, with a 'ORDER HERE' button and a 'Explore the Menu' option.

Reflection

While designing Modern Foodie’s app, I realized that the process is recursive just like any other creative design process.  It is in constant flux per feedback from usability studies and peers.  Working together with a group is the best way to “see” necessary changes and iterate a highly functional app.

Simple black outline of a light bulb with rays emanating from it.
Three numbered steps in a presentation slide titled 'Next Steps'. Step 1: Conduct another round of usability studies to validate whether the pain points have been effectively addressed. Step 2: Conduct more user research to determine any new areas of need. Step 3: Consult with engineers on handoff procedures and needs.

You made it!

Thanks for reading… ALL the way to the end!

Design Kit

A digital design featuring a logo with a fork and spoon crossed, the words 'MODERN FOODIE', a photograph of a salad with lettuce, shredded carrots, shaved almonds, and onions, a glass of orange juice with orange slices, and text promoting 'Vintage Moon Font' and 'Kollektif Font' with colorful brush strokes.