Project Overview

The Goal

The Problem

Design an app for FreshBox that allows users to easily order fresh, healthy dishes and be able to deliver the food to their preferred destination accurately and efficiently.

Busy full-time employees, work-at-home professionals, students, and young families who have no time to prepare meals, eat out, shop, or order food.

The Product

An ordering app for Freshbox, which enables users to place and track their orders.

My Role

Design Process

• User Research

• Personas

• Problem Statements

• User Journey Maps

• Paper Wireframes

• Digital Wireframes

• Low-fidelity Prototype

• Usability Studies

• Mockups

• High-fidelity Prototype

• Accessibility

• Takeaway

• Next steps

FreshBox is an online food business that offers food delivery services to customers. FreshBox strives to deliver fresh, healthy, and delicious food to customers with integrity, accountability, and efficiency at any given time, 24/7. FreshBox targets customers like full-time employees, students, and young families who do not have time to go out and buy food for the day.

Understanding the User

User Research

Summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. One primary user group identified through research was full-time employees who don’t have time to prepare meals or eat out. A secondary user group identified was students who would want to be able to order food at any particular time.

These two user groups confirmed initial assumptions about FreshBox customers, but research also revealed that time was not the only limiting factor in preparing meals at home. Some other user problems include obligations, interests, or challenges that make it difficult to prepare the food or go to restaurants in person.

Pain Points

Time

Lack of time to spend preparing for meals or eating out

Recommendations

Need for a recommendation list for easy ordering

Delivery

Late delivery times, inaccurate deliveries, and unavailable delivery options

Features

Limited app features such as a search filter for a food option/ingredient, discount/rewards feature, etc.

Personas

“ I want the best for my family, especially in the food they eat. ”

Name: Gretchen

Age: 37

Occupation: Event Coordinator

Gretchen Reyes is an event coordinator at Bonifacio Global City. As a working mom, she balances her time focusing on work and in raising her children, ages 8 and 5. She and her husband both have full-time jobs and when times get busy, it is hard for them to cook and prepare meals for the whole family. Despite the situation, she doesn’t want to compromise her family’s health and is conscious about what they consume. She wants a variety of food to choose from because her kids are quite picky eaters. Moreover, it is also important to her that the food is delivered warm, fresh, and of the best quality.

Name: Paul

Age: 21

Occupation: Student

“ I love to eat tasty food at any time I want but at a low cost. "

Paul Tan is a 3rd-year Computer Science student and loves to eat. He has a busy schedule as he also works as a student assistant and has a tough college life. Due to his packed routine, he oftentimes dines out or orders his food online. He particularly is passionate about the idea of 24/7 food delivery especially since he constantly craves something to eat on late study nights. He likes tasty food but still has to be on a low budget.

User Journey Map

Starting the Design

Paper Wireframes

For the home page, taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a search function, and available and recommended food options to help users save time.

Drafting paper wireframes for the low-fidelity prototype before converting it to a digital wireframe helps as a guide in the overall flow. For this wireframe, I prioritized the home, search results, product, cart tracking, and checkout pages.

Digital Wireframes

This search function at the top of the home screen makes it fast and easy for users to order.

An available list of food options and a recommendation list makes it easier for users to pick an order when undecided.

The main navigation at the bottom ensures that the user is able to navigate easily throughout the app.

This button on the side of the search button is a filter option that can filter using available keywords, it is also equipped with a speech recognition feature.

Low-fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected with was searching for a food option and checking out the orders, so the prototype could be used in a usability study.

View the FreshBox

Usability Studies

Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

• Users need an easier register and login option

• Users need a reorder feature and an easy list option

• Users need labels for buttons and search suggestions 

Round 2 Findings

• A popup shown when a product is added to the cart is needed

• An additional checkout confirmation popup upon checkout is useful

• A like section on the user page is helpful in finding the user's clicked likes

Refining the Design

Mockups

Before usability study 1

After usability study 1

The search function also doesn't allow for an easy search feature and early design did not have a keyboard feature which made it confusing for users to do a search. The easy search feature contains recent searches, popular cuisines, and categories like ingredients, etc.

The early design doesn’t contain a dedicated page for a login or register option but after the first usability study, a separate page was created solely for either logging in or registering through the app using the traditional email-password method or through the social media sign-in method.

Before usability study 1

After usability study 1

For the second usability study, users find it helpful if a popup confirming a product is added to their cart is shown every time they add a product to their cart. For this, I added a red dot beside the cart button and a popup message saying that the user successfully added the product to the cart to easily indicate that the action is done.

Before usability study 2

After usability study 2

Key Mockups

High-fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for searching for a food product, adding to the cart, checking out, tracking orders, and finally completing the order. It also met user needs for an easy search function as well as more customization.

View the FreshBox

Accessibility

Considerations

Provided a speech recognition feature in the easy search function for users who have mobility impairments to use.

Used icons and labels to help make navigation easier.

Provided access to users who are visually impaired by adding alt text to images for screen readers.

Used detailed imagery for food orders, and ingredients to help all users better understand the designs.

Going Forward

Takeaways

Impact

What I learned

The app makes users feel like FreshBox really thinks about how to meet their user’s needs.

One quote from peer feedback:

“

The app is easy to use, functional, and overall looks good. The app is definitely helpful especially when I need to grab fresh, healthy, and of course, delicious food asap.

”

While designing the FreshBox 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.

Next steps

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.

Style Guide

Logo

Colors

Type

Buttons