Food Box

Food Box is a web application that helps people find monthly subscription deals with local restaurants.

My Role:
UI/UX Designer
Time Line:
This is some text inside of a div block.
Project Type:
Web Application

Context

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Hypothesis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Step 1

Research

User Personas

I thought the initial users would just be full-time university students but I found out that there was a big need for a product like this for people who were in stressful careers such as tech consulting.

Competitive Analysis

When I asked my initial interviewees the following:

“How are you solving this problem right now?”

Roughly half of the interviewees relied on the following 3 applications.

Step 2

Process

  • The Problem
  • User Personas
  • Key Behaviours
  • Initial Functionality

Workflow Interactions

Through various usability interviews during the research process, I optimized this work flow so that the users could add
their friends and their gift ideas as fast as possible.

Step 3

Visual Design

  • The Problem
  • User Personas
  • Key Behaviours
  • Initial Functionality
Step 4

Impact and Reflection

  • Testimonials
  • What I would do differently

Watch the Demo Below

Why I chose this Project

We have all been there before. It is late at night and we are still working. Our stomach gurgles, we go to the kitchen and find the fridge empty.

We use online apps such as skip the dishes to order food but because healthy food costs too much we settle for the big fast-food chains.

The food arrives and it smells amazing. We get up the next day feeling guilty and with a bigger belly and less money than yesterday.

The Role

Solo UX and UI designer of the project under the consultation of design mentor Nikki Pertinez.

The Pain Points of Potential Users

Maybe it was just me who had this problem. I often found it difficult and expensive to order good healthy food online.  Most services I knew cost too much for me to afford healthy food or they required me to cook my own food while they sent me the grocery list.  

Yet I knew from previous products I designed that I had to validate the problem first with  potential users. Thus, I interviewed 7 strangers ranging from college students to adults ranging from 19-40 year olds about the problems they had with food.

Roughly 60% of the potential users said they eat out at least 2-3 times a week. In addition, they mentioned that they ate out more when they were stressed from work or school.

The most painful points for these people were the following:

  • Eating out is expensive
  • Eating out is less healthy

The Competitive Analysis

When I asked my initial interviewees the following:

“How are you solving this problem right now?”

Roughly half of the interviewees relied on the following 2 applications to solve their problem:

www.skiptheDishes.com

www.hellofresh.com

Yet, these same interviewees said the following comments:

“The problem with skip the dishes was that if you are ordering a meal for two it can’t be less than 45. The overhead like delivery fees were too high. “

“This feels like I am just paying for the right groceries to my door instead of an actual meal.”

From  feedback like the comments above, the below graph emerged for the ideal product:

Competitive analysis of product values offered by the 2 largest companies in the market in Canada

Users

I thought the initial users would just be full-time university students but I found out that there was a big need for a product like this for people who were in stressful careers such as tech consulting.

Laura Persona 1 for Foodbox
Mİchael Persona 2 for Foodbox

User Workflow

User Workflow

Paper Prototyping

Once I had my personas at hand, I wanted to create a quick low fidelity prototype to test the initial feature ideas. I learned from my previous project Giftastic that doing wireframing for the exploration of possible features was more time consuming than it needed to be. I knew I could cut my work in half if I did a paper prototype instead.

Paper Prototype of Sign-in screen

Paper Prototype of Cart Screen

New Behaviors

During testing 5 new users with my paper prototype, most users mentioned two struggles they faced:

  • "Sometimes  I have to to go back to work or meet with friends but I can't because I am waiting for the food to arrive."
  • "Doing the same steps to order food each time takes too much time. I don't want to do it."

Wireframing

Before I began wireframing, I took the 5 potential users struggles seriously and came up with a scheduling feature that would help the user set the time of arrival for their meals across the month. So they would have the utmost flexibility.

First Scheduling Screen in Balsamiq Wireframe
Second Scheduling Screen in Balsamiq Wireframe

Usability Problems

After I created the wireframe of Foodbox, I tested it on 3 new potential users. Users mentioned they wanted multiple options to select the time and the date for the food instead of just simple drag and drop. I considered this issue and began designing a high fidelity prototype in Adobe XD.

High Fidelity Prototype

After one iteration of usability interviews Once I fixed the usability problems in the wireframes, I began creating the high fidelity design for Foodbox in Adobe XD.

Restaurant Screen from High Fidelity Prototype
Cart Screen from High Fidelity Prototype
Schedule Screen from High Fidelity prototype