Food Ordering App For A Health Food Cafe

Role

UI/UX Designer

Role

UI/UX Designer

PROJECT OVERVIEW

This is an application that is used to order food and calculate nutrition on the menu in cafes that sell healthy food. Customers can find out what nutrients are contained in a menu so that they can manage nutritional adequacy numbers and control their dietary habit. This application will show the amount of nutrients, such as calories, fat, carbohydrates, vitamins, proteins and sugars in the food or drink.

THE PROBLEM

People can't find food that they want to eat because they have health problem or they want to control their daily nutrition

MY ROLE

UX designer designing for food ordering app
from conception to delivery

RESPONSIBILITIES

Conducting research, interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs

Understanding The User

I conducted a survey to understand the users I’m designing for and their needs. A primary user group identified through research was are cafe visitors who have to pay attention to the amount of nutrients contained in the food they want to eat.

USER PAIN POINTS

Users find it difficult to find foods that match their daily nutritional needs

Users find it difficult to determine whether a food is in accordance with their daily nutritional needs

User wants to know whether the food consumed is good or not for their health

PERSONA

Paulina is someone who is following a diet program who needs to control the number of daily calories she consumes because She want to lose weight

Age

Education

Hometown

Family

Occupation

: 22

: University Student

: Jakarta, Indonesia

: Lives With Parents

: Full Time Students

Paulina

“I want to lose weight, so I have to eat low calorie food”


Paulina is a student who is following a diet program that requires her to control the number of daily calories she consumes. Paulina often finds it difficult to get ombination of food and drinks that have the required number of calories, so she needs an application that can recommend the combination food/drinks/desserts with the desired number of calories.

Goal

Application that can select food according to the desired amount of nutrients

Application can provide food/drink/dessert recommendations with the desired number of calories

Frustation

It's hard to find foods that match the calories needed

Difficult to get combination of food and drinks that have the required number of calories

USER JOURNEY MAP

Mapping Paulina’s user journey revealed how helpful it would be for users to have access to a dedicated Food Ordering App

COMPETITIVE AUDIT

I Identified the competitors and analyzed their bussiness strategies to determine their strength and weakness relatives to this food ordering App. See the result and report.

USER FLOW

A user flow is a path taken by a user on an app or website so they can complete a task from start to finish.

Design

STORYBOARD

To outline an ideal flow for my design, I sketch two types storyboard on a piece of paper such as Big picture storyboards and Close-up storyboards

LO-FI PROTOTYPE

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected with was choosing and ordering food with desired nutrients, so the prototype could be used in a usability study. See the full prototype here.


FIRST USABILITY STUDY

The Low-Fidelity prototype was used in an unmoderated usability study with 5 participants. See the first usability study plan here.

AFFINITY DIAGRAM

I create an affinity diagram that helps me group together research insights so that I  can further understand and define the problems in this application. 

INSIGHT

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected with was choosing and ordering food with desired nutrients, so the prototype could be used in a usability study.

User want to order combination food easily and combine the food they want

User don’t understand what is in the tab before they click it

Category must be clearly shown so that user can understand what is in the category

SYSTEM USABILITY SCALE

The final score of the Food ordering App using the SUS questionnaire is 76.5% and is in the Good category.

REFINING THE DESIGN

Early designs shows category in tab form but after the usability studies, I added an icon so that user more understand about category, I also delete favorite section because user confuse about it and it’s not a urgent feature.

First usability study revealed frustration with the find food flow. User confuse about combination, so I made a checkbox so that it can be more understandable.

SECOND USABILITY STUDY

The second usability study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.  See the second usability study plan here.

AFFINITY DIAGRAM

I create an affinity diagram that helps me group together research insights so that I  can further understand and define the problems in this application. 

INSIGHT

I create an affinity diagram that helps me group together research insights so that I  can further understand and define the problems in this application. 

User want to add another order in cart

User want to be able sort the search result

REFINING THE DESIGN

Based on the insights from the usability study, I made changes to improve the flow.

The second usability study revealed frustration with Sort. User want to sort food so that they can easily choose food they want.

Users want to add some more food even though they already have food in their cart, so I added an "add food" button in the cart

FINAL HIGH - FIDELITY PROTOTYPE

The final high-fidelity prototype presented cleaner user flows for building a food order and checkout. It also met user needs for combination food. See the High-Fidelity Prototype here.

ACCESIBILITY CONSIDERATION

Provided access to users who are
vision impaired through adding alt
text to images for screen readers.

Used icons to help make
navigation easier.

Used detailed imagery for category and ingredients to help all users
better understand the designs.

GOING FORWARD

IMPACT

The app makes users feel like the Food Ordering App thinks about how to meet their needs

One quote from peer feedback:
“This application is very helpful for me because I often don't know what kind of food I eat or whether the food is by the amount of nutrition I need. This App helps me know which foods that are suitable for me.”

NEXT STEP

  • Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed

  • Conduct more user research to determine any new areas of need.

WHAT I LEARNED

While designing the Food Ordering App, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Get in Touch.

So that we can talk more

Made with ❣️ by Christina