Turbo Delivery

Female Hand Copy.png
 
 

Brief

Turbo Delivery is a grocery delivery app that helps users to create grocery lists and shop together with family and friends.

Team: Dave Kendall, Eric Li, Mu Di, Ming An

Role: UX Designer & Researcher

Date: 5 weeks, Nov 2016

Tools: Sketch, Principle, PhotoShop, Illustrator, Pen and paper

 
 
 

Background

The project was completed in the course “Design for Interactivity” under the instruction of Gustavo Delao. I collaborated with 3 other students and served as a UX designer & Researcher and my main contributions were project planning, information architecture, and UI design.

The goal of the project was to find any problems with online grocery shopping and delivery, and design a grocery delivery application to diagnose and solve these problems.

 
 
 

How might we help shoppers to have an enjoyable and efficient online grocery shopping experience?

 
 
 

Problems

In order to understand the problem space of our target audience. We interviewed 12 individuals with varying backgrounds and conducted an online survey on shopping habits and preferences.

 

Based on our research, we identified two types of shoppers and created persons and storyboards.

The Lonely Shopper

Grocery shopping for one person is a big challenge. Paying rent, managing bills, and enjoying a quality life - they have to plan ahead and make every penny count.

Persona_Kim Copy.png
Kim_Turbo.png

The Family Shopper

Shopping for multiple people can be a hard task. They need to fulfill everyone's needs and maintain a healthy lifestyle.

Persona_Mark Copy.png
Mark_Turbo.png
 
 
 

What if there is a service that is able to help shoppers to…

 
Turbo icons.png
 
 
 
logo turbo.png
 
 

Turbo Delivery

A grocery delivery app that helps users to create shopping lists, shop healthy recipes, collaborate and shop with family and friends.

 
 
 
 

Here's how it works.

 
 
 
 

Shop Grocery Lists Online

A little planning can go a long way. There are many benefits of shopping with a grocery list - it saves your time and money, helps with meal planning, and reduces food waste.

With Turbo, users can simply create a grocery list and start shopping without leaving the app.

Shop shopping list.gif
 
 
 
Recipe list Turbo 2.gif

Recipe-inspired Lists

It can be hard to make a shopping list blindly and knowing what to buy and cook. It’s much easier to plan out the meals and make a list of ingredients.

Turbo offers healthy receipts that users can easily browse and turn a recipe into a grocery list.

 
 
 

Invite family and friends

Shopping groceries for multiple people can be a hard task.

Turbo provides a quick and easy way to shop and place an order with family and friends.

Invite people Turbo.gif
 
 
 

Detailed Process

 

Contextual Research

We worked as a group to analyze grocery services and apps from Kroger, FreshDirect, Walmart, Instacart, Peapod, Amazon Fresh, etc. We discussed their interfaces and features in order to evaluate patterns and to examine how these platforms stack up. 

We also conducted literature review by collecting and reviewing new, articles, and reports.

  1. Grocery shopping comprises one-fifth of total consumer spending but less than 10% of online spending.

  2. We found out that generation Z and millennials were the most avid online grocery shoppers. (Nielsen Report)

  3. Many leading companies were investing heavily in expanding grocery business such as Amazon Fresh, Walmart Order, and Pickup, etc.

 

Interview and Observation

We visited several stores in local Savannah, GA. Our goal was to understand the challenges shoppers had and observe their behaviors in the real context.

Our interviewees came from diverse backgrounds, such as businessman from New York, real estate manager, grocery store manager, retired grandpa, etc. They helped us to build a diverse and non-bias perspective of how people shop groceries. We also conducted an online survey to further facilitate our research.

 

Variable Mapping

We used Variable Mapping to analyze the data from interviews in order to identify behavioral and demographic variables and user goals.

 
 

We mapped our 12 interviewees to variables to identify the significant behavior patterns.

Patterns1.png
 
Patterns2.png
 

Persona

If designers try to design products that please everyone, they end up with a product that contains every possible features that please nobody which results in low user satisfaction.

By having a primary and secondary persona with different goals and needs, we could better decide which user group is the most important when designing interfaces and features.

 
 

Scenario

By generated scenarios, we aimed to cover the motivations of our personas and address possible solutions for their problems. The scenarios and storyboards provided us a clear idea of the requirements and helped us to produce user flow and interfaces. I illustrated storyboards to assist the scenarios.

#2 Mark Thomas

#1 Kim Prost

Kim_Turbo.png
Mark_Turbo.png
 

Sketch

We came together and discussed about the interfaces. Dave and Di were in charge of sketching.

 

User Flow and Wireframe

After we all agreed upon most of ideas, I started to develop the user flow and wireframes.

 

Detailed Design

Grocery Lists Screen

From usability testing, we learned the grocery lists sharing feature wasn’t easy to find. The original design was users need to swipe to the left in order to share or delete a list.

I redesigned the screens and explored more options focusing on making features easy to understand.

Explorations of the Grocery List Screen

Explorations of the Grocery List Screen

 

List Screen

Grocery List is one of the main features. We wanted the screen to simulate the real experience of people creating a grocery list. We researched how people create grocery lists and tried to find patterns.

We found out when people create shopping lists, they tend to write the name and number of items they need to buy from top to bottom.

Shopping list examples.png
 

Search List Screen

After a user clicks the Search List button, the app will automatically search for products that are inside the list and take the user to the shopping screen. We learned from grocery stores about how aisles and products are arranged and presented to customers. The screen was divided into items and users can choose to add items to the shopping cart or view more details.

List examples.png
 

Bottom Navigation

I designed the bottom navigation with 4 sections: Home, Lists, Cart, and Profile. Each tab represents one of the steps for users to shop groceries. A user will move from left to right as he makes progress towards accomplishing his shopping.

  • Home screen shows recipe inspired shopping lists

Turbo_Bottom nav.png

Invitation

Shopping groceries for multiple people can be a hard task. Turbo provides a quick and easy way to shop and place an order with family and friends.

Turbo_Invitation.png
 

Usability Testing 

We evaluated our product from the users’ perspectives through 4 user tests. We designed two kinds of tasks for user testing, open-ended tasks, and closed-ended tasks. Closed-ended tasks include things that most users need to do and more difficult things that some users need to do.

We printed our agenda and scripts for our participants and prepared a prototype made by Proto.io. Dozen Krispy Kreme donuts are also prepared.

We asked users to begin with telling them an imaginary scenario and asking them to do tasks such as:

#1 You've been very busy this week and don't have time to go grocery shopping, you downloaded this app and want to use it to get some groceries for tomorrow's breakfast.

#2 You received a message from your roommate and asked you to add something to his/her shopping list, you downloaded the app and wanted to add something, then send the list back.

DSC00415.JPG

Surprisingly, only one participant was able to find and use the shopping list sharing feature.

It was a mistake we made by assuming users had the same level of familiarity with the product. Lesson learned - we are not users and the assumption was wrong.

 

Refinement

 

This is my very first UX project, I learned so much about the UX process and how to design and collaborate as a team. I also found out that industrial design and UX design have a lot of things in common - they both strive for design products for people’s problems and needs.

We made some mistakes and were able to turn those mistakes into lessons and learned from them. If we have the chance to redo the project, we would:

  1. Test existing grocery shopping apps with users and learn from them at an early stage

  2. Explore more options before settling down to a solution.

 

Thank you for reading!