Bee app — Design a better shopping process

Published in

portfolio-youlanda-kuo

3 min readOct 15, 2017

Honestbee’s Bee app is a tool for the shoppers and drivers to shop and deliver orders to the customers. This case study will be focusing on how we use design to improve the shopping experience with Bee app.

Introduction

Honestbee shoppers and drivers use Bee app for everyday work. A shopper will use the shopping mode in the app to receive job assignments, gather the items and hand over the order to the deliverer. In this case study, we focus on the gathering process to help the shopper work more efficiently.

Our approach

Shadowing shoppers
User interview
Survey
Heuristic analysis
Mockup and prototyping
User testing
Result

The result

Shopping cart

The original shopping cart page can only display 2 items at a time. In a order of more than 10 items, the shopper will need to scroll up and down several time during shopping.

The first iteration we made is a list view and a grid view which can both display around 6 items at a time. This helps the shopper to do the planing for their shopping route more easily and also makes finding the items faster.

The design of first iteration: list view (left), and grid view (right)

The result of user testing give us more information in order to improve this feature. Only 40% of shopper like the first iteration because this design requires them to do one more click to see a bigger picture and the “found/not found” button.

Based on this feedback, we made a second iteration : keep the original card view which provide all the information in a card, and add a switch to change from card view to list view, which can display a lot more items in a page.

Adding a switch on top right for shopper to change between card view and list view

Suggest a substitute

When the item is out of stock, the shopper will suggest a substitute and record it in Bee app. Through shadowing the shoppers and interviews, we found out that keying in the detail of the substitute is a step that is very time consuming for the shopper.

The original screen to suggest a substitite

The first improvement we made is adding a scanning function. The shopper just needs to scan the barcode of the item he/she suggests and the item detail will be filled in the app automatically.

Scan item’s barcode to add it as a substitute

When suggesting a substitute, the shopper needs to pick something similar (e.g. red apple from different brand) and get the same amount of the original item. During the shadowing and interviews, we found that some shoppers used to go back and forth to check the amount of the original item when they are filling the substitute amount.

Hence the second improvement we made is simply adding the original item’s information in the same page where shopper fill in the substitute amount, and doing the calculation of how many items to buy in case the packaging is different.