LunchBox

Product Design, UX/UI Design

lunchbox top image2.jpg

LunchBox allows on-campus student to access homemade food easily.

My Role

Product designer;

UX/UI Designer

Date

Feb 2017

iOS Developer

Hang Cui

 

Understand the problem

It's hard to find home-made food to add to the limited food choices 

Students at the university are facing the situation that they barely have time to cook and they mostly eat in restaurants on campus. However, they only have limited food choices. Some students have started to trade homemade food on Wechat (a social app) to their Wechat friends, which is very small amount of people. You have to know the person in order to buy food from him or her. We felt their was a needs to create a platform that helps students access homemade food.

The power of home-made food provider is underutilized

Students who study abroad are mostly comfortable with food style from their hometown. Many home-made food providers are from different parts in China and they are able to customize food for students. However, they don't know what the demand is. They were bothered by the question what to cook everyday. 

 

User Research & Synthesis

Field Observation & Interviews

I observed and asked some students about their eating habit, especially their access to healthy foods, as well as their cooking habit. I found out that they like homemade food and they would likely to either buy food from other students or offer food to others, in order to save their own time and money.

• Students eat at the university student center usually buy a meal from on-campus restaurants. Most of the food is or contains fast food or snacks.

• Most of students at the university student center eat alone. They usually stay there for half hour.

• Students usually have personal preference of food everyday. 

• Students are worried about the nutrition facts when talking about home-made food.

• There are also students who have passion on cooking. They sometimes spend time to cook complicated dishes or dessert, such as Moon-cake or Lady M cake. Other students would really want to have them, because there is nowhere they can buy them in Champaign-Urbana area.

• Students cooked too much food for themselves and have extra to share. 

• Students said they were worried about the safety and clean.

• Students said how fast they can get the food is a key factor when they decide what to eat.


Opportunities

We should provide users feedback mechanism to inform food providers what they want to eat.

We should provide users a feedback mechanism to review food, for the purpose of keeping food clean and safe.

We should provide users nutrition information even it's hard for Chinese home-made food, at least gradient or so.

We should provide a way for users to get food easily and efficiently.

 
 
 

Concept Development

Personas

 

Journey Map

After clarifying needs and goals from targeting user group, what are other product features that provide smooth experience to use the product? I created a journey map to go through the whole process of using the product, which is the core to the lifecycle. I focused on three representative users' actions, thoughts and emotion on each stage, in order to discovered some opportunities so the product can better meet their intention on each stage fluently. 

Screen Shot 2017-12-16 at 5.16.45 PM.png
 

Lists of Features & Low-fi Design

We listed features that journey map and personas helped us defined and developed. We then transferred the feature list to user flows and the actual interface design. We want to provide a space for students to post their food and see others' posts. They can filter foods based on the nutrition, food type, available time / duration, delivery methods, etc. The food will be prioritized based on review and likes, which is a important feature for homemade food. In addition, we think this app can potentially become a social networking tool for the Chinese student community.

 
 
 

Interface Design

Fonts & Colors

 
Screen Shot 2018-08-26 at 5.09.25 PM.png

Finished Interfaces

 

Design Highlights

1. How to assist user to find food based on their preference

Looking for unique food is such an important feature of this app. To assist user to find food of their best choices, I focused on sorting and filter options. Users can limit their choice load based on rankings or distance, further filter by food categories, available time, delivery methods, nutrition info, etc. To define the best way that helps get to their intents as quick as possible, I explored different ways to filter results. I ended up with the version only has a few necessary features on the top bar (an expandable bar), and the rest going to a filter page. This solution avoided horizontal scrolling, which is not a common user habit on mobile, and it avoided too many choices that cause cognitive overload.

Screen Shot 2018-07-20 at 2.03.25 AM.png

Explorations of filters

 

2. How to help user make food choices fast

Result Listing Variations

Since there will be multiple information for one result, I expirmented with various layouts and compared alternatives to see which one made the crucial information stand out (I made assumption that title, images, price, review score and delivery methods were crucial information) and helped user to determine their food choices. I went with the last option with large picture and efficient use of space for text. 

Instant Inquiries

  • ways to reach out people who post food on their profiles;

  • a chat window provides a way that is easy to refer to the food post;

  • stored chat history

Screen Shot 2018-07-21 at 1.34.43 AM.png

Making Nutrition Info clear

  • easy to search & add nutrition info when posting

  • show it on every post with visual representatives

  • automatically add consumed nutrition info to user's profile

Screen Shot 2018-07-21 at 1.19.18 AM.png
 

3. How to assist users to meet people

During the interview, students said that they usually eat alone and would like to meet new people. There are some designated eat area in each building and they could inform others in the app if they would like to eat together and chat. 

  • see where other people are located

  • see nearby people and other similar foodies

  • send invitations and ice-breaker stickers

  • View friends' recent food experience

 

4. How to privde second-time users fluent order experiences

It's less like other online shopping experience that user needs to add multiple items on their carts. Instead, user usually browse the Feeds page and order food right away. 

 

Things I would do differently (Learnings)

Get user involved during concept development if possible

I went into design low-fi interfaces without gathering feedback. There was no way to continue design without knowing I was on the right track in terms of problem solving. I will at lease make sure to gather feedback after the first iteration of design.