Meal in Mind

Personal project - Food ordering website for people who care about ingredients 
UX DESIGN · VISUAL DESIGN · LOGO DESIGN · USER TESTING

Meal in Mind is a food ordering website that allows users to search food by choosing ingredients, cuisine and type, and make orders from multiple restaurants to build their meal. The project focused on building the interactive prototype of the website which provides both good usability and visual impact.

BACKGROUND
TIME

3 months, 2015

DESIGN PROCESS

As a starting point of the project, the design brief was developed to specify the goal and scope of the project. Items like taste, key objectives, target audience and deliverables were defined in the design brief. With business objectives and corresponding design strategies outlined for the project, the designer will have a clear picture of the project and will be able to use this as a guideline in the future design process.

1. DESIGN BRIEF
2. STYLE GUIDE

In order to bring a fresh look and feel, the bright colors are used for the branding. The primary color palette of red and yellow creates a powerful differentiator for the brand. Besides color strategy, the logo design, typography and image strategy were also presented to provide a unifying and consistent branding style.

3. RESEARCH

The user centered design process was adopted for this project. In order to fully understand users’ needs, contextual inquiry was conducted before the design to observe users’ work practices when ordering food. Based on the answers and observations, the storyboard was developed to illustrate key use cases. The workflow diagram was sketched according the users tasks breakdown.

INTERVIEW

 

In order to understand user's thinking and behavior, I conducted interview of 6 users. My goal for the research is to figure out what is preventing them using the food ordering app, and what features they would like to see. Adopting Empathy Design methodology, I focused on what they are thinking, doing and feeling when ordering, and also looked for the "Pains" and "Gains"​ that they have. For 3 of the users, I also watched them using two existing food ordering website - DoorDash and GrubHub - to complete their order. 

Below are questions that I asked and the key findings:

RESULTS

1. What prevents you from ordering food online? 

  • Budget - (Extra tips for delivery)

  • Time

  • Food Variety

  • Credibility

2. What is your workflow when you try to find something to eat? ​​

  • 60% Know what they want to eat.

  • 60% Choose food from what that can arrive fast.

  • 40% Browse Food to make decision.

3. What are some of the difficulties that you encountered when you ordering food online?

  • Hard to find what exactly what I want

  • Going through restaurants and menus is time-consuming

4. What is the ideal experience you have in mind when ordering food?

  • Track and control what I eat just like cooking at home

  • Filter out what I don’t want to eat

  • Fast

  • Combine orders from multiple restaurants without extra charging

PERSONA

Based on my research results, I created 3 persona and empathy maps to clarify who I'm designing for.

COMPETITOR ANALYSIS

IDEATION

Based on my research results, I defined two key design problems:

  • How to help the users accurately find what they are looking for?

  • How to facilitate users if they want to order food from different restaurants in one order?

  • How can we attract users with healthy diet habit?

4. WIREFRAME

Based on the site map, the wireframe was designed to include landing page, food-browsing page, restaurants-browsing page, restaurant-detail page, and checkout process. Food-browsing page and various filters let user find what they are looking for easily and quickly. The addition of food-browsing also let user stand out of restaurants when choosing food, providing them the opportunities to combine dishes from different restaurants.

wireframe_Landing

wireframe_Browse Food

wireframe_Restaurant

wireframe_Browse Restaurant

wireframe_Checkout 1

wireframe_Checkout 2

5. PROTOTYPE

Utilizing the wireframe and style guide, the hi-fidelity prototype was designed in Adobe Illustrator. The goal of the design effort was to make the interface visually appealing with a modern and stylish look. Then the hi-fidelity mockup was converted to the interactive prototype using inVision: https://invis.io/FC7EQS1ZM#/161211396_Landing2.

prototype3_Landing copy 2

prototype3_Browse Food

prototype3_Browse Restaurant

prototype3_Restaurant 2

prototype3_Checkout 2

EVALUATION PROCESS

1. APPROACH

The usability test is composed of two sections. Users were first asked to perform a list of tasks using the interactive prototype of the website. They were asked to think aloud while they were working, and their interactions with the prototype were observed. Their comments and performance were recorded in notes.

 

After finishing the tasks, they were asked to complete the PSSUQ (Post-Study Usability Questionnaire) Survey. The PSSUQ was used as the questionnaire because measuring users’ satisfaction is important to this project. Two more questions specifically related to the website were added in the end. The full questionnaire can be found here: https://docs.google.com/forms/d/1oVeoGMLn2co169RHFO96Jt4W-sSgUHNZ-Knah-E7H3Q/viewform

 

3 users participated in the test. Below are the user profiles:

2. KEY FINDINGS

All of the users can easily recognize the use of the website. All of them were able to successfully complete all the tasks without much difficulty. However, users encountered some difficulties using the navigation (icons/search bar/tabs). They reflected some texts are hard read due to the size and color.  They also showed great interests in seeing nutrition facts for the meal they want to order. The site needs improvements on error message and help documentation base on the response of the questionnaire.

ITERATION PROCESS

The design went though a couple of iteration based on the evaluation feedback.

1. LANDING PAGE

The evolution of the landing page.

2. NAVIGATION

Larger fonts and icons.

More white space and larger font were used on the top to draw users’ attention to the navigation area. Also the search bar was unified and enlarged to give more flexibility to users who want to search content in the entire site.

3. NEW FEATURE

The nutrition facts popup was added based on users’ interests. It provided helpful information to those people who want to eat healthy.

Email: limeng233@gmail.com  |  Phone: 412-708-8247

© 2020 by Meng Li