The ultimate gig-app for professional grocery shoppers

Creating an efficient grocery app for professional shoppers, factoring in existing products’ flaws.

Roles

UI/UX Designer, UX Researcher

Figma, Prototyping, Market Research, Operational Analysis, Pareto Analysis, Analysis of Similar Systems, Task Analysis, Error Analysis, Activity Analysis, Cognitive Walkthrough, Usability Analysis

Tools / Methodologies

Timeline

January 2023 - May 2023

Instacart, DoorDash, Shipt, Uber, and similar companies allow people to order affordable groceries from the convenience of their homes. This has established an economy for personal shoppers who make a living by doing customers’ groceries.

Existing apps have many pain points for personal shoppers. To tackle pain points for personal shoppers, Instashop prioritized the user throughout the design process.

Instashop supports professional shoppers serving multiple clients simultaneously. The team, Nabeeha Ghani and Brendon Farmer, utilized traditional human-computer interaction (HCI) methods to analyze existing solutions, understand users’ needs, and prototype a digital and physical solution.

This project was completed as a final project for the course Methods in Human-Computer Interaction at Rice University. Read the full report here.

Overview

The Analyses

We used 13 traditional HCI research methods:

1. Operational Analysis*

2. Pareto Analysis*

3. Analysis of Similar Systems*

4. Generalized Task Analysis

5. Error Analysis*

6. Activity Analysis*

7. Low-Fidelity Digital Prototype*

8. Low-Fidelity Physical Prototype*

9. High-Fidelity Digital Prototype V1*

10. Prototype V1 Task Analysis

11. Cognitive Walkthrough

12. Usability Assessment*

13. High-Fidelity Digital Prototype V2*

*This page will highlight the most impactful analyses, which have a (*). You can read the each complete, in-depth analysis here.

Operational Analysis

Provide professional shoppers a centralized system with which they can shop for multiple clients simultaneously and seamlessly.

Purpose

  • Cart to hold items

  • Dividing mechanism for each client within the cart

  • Item tracking (quantity and image)

  • Scanning the item barcode

  • Item location within the store

  • Item ownership (who is ordering which item)

Subordinate Functions

  • Spoiled food

  • Melted food

  • Incorrect quantity

  • Mixed-up client orders

  • Cart is not big enough

  • Not enough dividers

  • Too many clients accepted

  • Inaccurate order due to customer changes

Potential Failures

  • Disorganized professional shoppers

  • Organized professional shoppers

  • Grocery bagger at the cash register

  • Customer who ordered

Users

Pareto Analysis

  • r/Doordash on Reddit

  • r/UberEats on Reddit

  • Apple App Store reviews of Instacart

  • Apple App Store reviews of Shipt

  • r/InstacartShoppers on Reddit

  • www.bbb.org (better business bureau)

  • r/ShiptShoppers on Reddit

  • r/Instacart on Reddit

We analyzed community forums to accumulate issues that shoppers were having. Here are some forums we used:

Problem: Shoppers faced unfair payment and low tips.
Solution: Our prototype prioritizes transparent pay and tips, which the shopper can view before selecting a batch to shop for.

Problem: Shoppers faced communication issues with the clients while shopping in-store.
Solution: Our prototype includes an in-app messaging feature, which also shows the online status of the clients.

Problem: Shoppers faced disorganization while shopping for multiple clients.
Solution: Our prototype has a 3 client maximum per batch. Also, we provide cart bags that color coordinate to the clients

Pareto Analysis: Takeaways

Analysis of Similar Systems

We compared the features of existing products on the market, including big and small companies.
A checkmark indicates the presence of the feature, while ‘P’ represents the possibility that the feature is present.

Pareto Analysis: Takeaways

Common Features:

  • Physical system (shopping cart)

  • Digital system (handheld device/app)

  • Name, image, quantity, and location (aisle) of item

Uncommon Features:

  • Internal store map

  • In-app messaging with customers

  • UI orders the shopping list for the shopper

Applying to the Prototype:

Not all systems had maps or organized item orders. In our design, we prioritize in-store navigation for an efficient shopping experience. Not only does it help shoppers locate aisles with greater ease, it also helps shoppers take the most efficient route throughout the store starting from entrance to exit.

Error Analysis

We selected four videos of people shopping, ranging from the use of a professional shopper app to simple grocery shopping.
We took note of any errors users made while using the app, while also getting insight into the professional shopper’s thought process.

What errors are committed?

  • Mixing items in multiple orders.

How do we stop the error from happening (error control)?

  • Provide multiple dividers for use in the shopping cart when shopping for multiple clients.

How do we help users see errors before detrimental events occur?

  • Emphasize the importance of organization when shopping for multiple clients.

How do we minimize error consequences?

  • Implement a color coordination system in the app that applies a separate color and photo to each client's order.

General Possible Errors

To mitigate these errors, it was clear that we needed to focus on a few key points:

  1. Ensure that only scanning for the correct item gives the correct response. If an incorrect scan occurs, alert the shopper as soon as possible.

  2. Prioritize a quick and efficient pathway through the store that also optimizes acquisition time of cold items (like ice cream and frozen foods) last.

  3. Implement a helpful messaging system for which shoppers can inform clients about out of stock items, or clients can inform shoppers of any changes to their order.

  4. Create an organization system that separates the orders of different clients, while all fitting in one cart.

Error Analysis: Takeaways

Activity Analysis

Using the same four shopper videos as in the Error Analysis, we took note of every action that the person took in the videos.
Note: There was a slight generalization for the action of searching for an item.

Link to video here.

Link to video here.

Link to video here.

Link to video here.

From the Activity Analysis, our focus is on clear images and providing an efficient shopping path. Data reveals excessive time spent searching for items or backtracking due to forgetting items. While recognizing individual shopping preferences, we aim to combat idle time with a straightforward procedure, featuring distinct and consistent images for shoppers.

Activity Analysis: Takeaways

Low-Fidelity Digital Prototype

Before creating a prototype in Figma, a rough sketch was drafted with the app layout. Here are the pages of the app, and their associated features.

  • A navigation bar at the bottom of the screen features five icons: home page, profile, payments, messages, and the main ordering page. The main ordering page contains all order information and has a shopping cart icon.

  • Each client is associated with a color ring around their profile photo icon. The color ring around the client's icon corresponds to the color of the bag in the shopping cart.

General Features

Existing apps do not display the pay and tip for a “batch” they are about to accept. To fix this, the following features will be included:

  • When opening the app, we prominently display pay for the shopper before they accept an order.

  • Each order has a small dropdown to reveal customers and their detailed payment breakdown.

Home Page

Main Ordering Page

The shopping cart icon on the navigation bar represents the main ordering page. Within this page, the user can toggle between different views of the ordered items. Here are the 3 views:

Shopper View - displays all items ordered by each client
Map View - the optimal route through the store to collect the ordered items
List View - a shopping list ordered by the aisle location

This view organizes the content by grouping items under the heading of each individual customer. Items display their aisle numbers, and the list allows for checking off items.

Shopper View

This view shows the ideal route throughout the store based on item locations. A small dot with a cone field of vision represents the shopper, and a dotted blue line represents the path throughout the store.

A taskbar is available at the bottom of the map view. This taskbar displays a list view of the ordered items upcoming on the route. Users can access it on the map without navigating to a different page.

Resembling a shopping list, this view prioritizes simplicity for shoppers. The aisle number is included next to each item. Instead of using the clients’ names anywhere on the screen, we used their icons and color rings to indicate who wanted which items. Items are strategically ordered for an efficient store route.

List View

Map View

Messages Page

Inspired by iMessage, full chat capability for both shoppers and clients was designed based on data from Pareto, Error, and Activity Analyses.

Low-Fidelity Physical Prototype

Shopping Cart Dividers Prototype

The shopping cart dividers prototype. These dividers correspond to the color of the customer on the app. The reason for 3 bags is because that is the limit for the personal shoppers before there could be increased human error due to overwhelming cognitive workload.

High-Fidelity Digital Prototype V1

Using the sketch of the digital prototype, we created an initial version of the app. The prototype for the app can be found here.

Note: The payment section of the app has not been built out in this prototype, because it was not relevant to the shopper experience being designed during this project.

Usability Assessment

10 participants between the ages of 16-22 were interviewed. All participants were proficient in mobile device operation.

Participants

The interviewer read the Description below to the interviewee. The prototype and the list of tasks were sent to the participants email. Participants answered questions aloud while the interviewer took notes. There were two categories of tasks: Guided Flow and Free Flow.

The Guided Flow questions were designed to have the user step through the basics of the app, such as finding each client, accessing each set of views, and “purchasing” the items for the clients.

The Free Flow questions help identify the user’s ability to navigate the more advanced details of the app.

Description: You are a professional shopper for INSTASHOP. As a shopper, you get orders through an app. You also have a few colored bags that you will attach to your cart, as shown below. In your email, you have the link for the app and the tasks. You can just verbalize your answers while I take notes. I won’t intervene unless there are major issues, so good luck!

Assessment Procedure

What your cart looks like:

Free Flow -

  1. What was Marisa’s message about?

  2. What area of the store are the cash registers?

  3. How much tip is Lisa leaving?

  4. What aisle is the Parmesan cheese in? Who is ordering it?

  5. What note did Lisa leave?

  6. Name one item being ordered by multiple people?

  7. What aisle is the grapefruit in?

  8. How many people need to buy Dairy items?

  9. Who wants organic bananas and in what quantity?

  10. What area of the store is the cosmetics section?

Tasks:

Guided Flow -

  1. Who is ordering items from Target?

  2. Accept the Target order

  3. Navigate to the ordered items

  4. Navigate to List View

  5. Purchase Mascara for Marisa

  6. Navigate to the map view

  7. Purchase Organic Bananas for Jack

Guided Flow findings:

  • Interviewees mistook the placeholder name "Alex" as the person ordering from Target.

  • Interviewees overlooked the dropdown menu on the first page, which displays individuals in each order.

Free Flow findings:

  • Interviewees couldn’t locate the note that a client had left for their order.

  • Interwees couldn’t locate the aisle number for items on the Map and List View.

  • Interviewees completely overlooked the taskbar at the bottom of the map view.

Positive feedback:

  • The different views of the app (Shopper, List, and Map View).

  • Interviewees felt confident they could handle three clients as a professional shopper.

  • Color coordination between the profile icons and the shopping bags helped users understand where to place items after scanning.

  • Many interviewees stated they could imagine the actual app if it were fully fleshed out.

This feedback was used to create V2 of our prototype.

Usability Assessment: Takeaways

High-Fidelity Digital Prototype V2

Using the feedback from the digital prototype V1, we created an improved version of the app.

Note: The profile section of the app has not been built out in this prototype, because it still was not relevant to the shopper experience being designed during this project.

The Final Prototype

After our thorough research as described above, we created our final prototypes. There would be two components to the solution:

  • The shopping cart dividers

  • The Instashop app

These two would pair to create a seamless in-store shopping experience for professional shoppers. Personal shoppers can select the client batch based on the expected pay, the store location, and the requested items. Then, when arriving at the store, they can follow the optimal path to complete their shopping. Different views of the requested items, such as Shopper, List, and Map view, will all help the shopper have a great in-store shopping experience.

Instashop App Prototype

The low-fidelity app prototype.

The high-fidelity app prototype. View here.

Shopping Cart Dividers Prototype

The shopping cart dividers prototype. These dividers correspond to the color of the customer on the app. The reason for 3 bags is because that is the limit for the personal shoppers before there could be increased human error due to overwhelming cognitive workload.

Key Design Decisions

After applying several HCI methods, key design decisions were made.

  • 3 client maximum: The maximum number of clients a shopper can serve at a given store is 3. Anymore would lead to increased human error risks on the shopper’s end. This is due to an overwhelming cognitive workload.

  • Map view with recommended route: By drawing on existing data of a store’s layouts, the map view is an essential feature that allows the user to know exactly where to find items. Shopping items for all clients are aggregated and an ideal store journey is provided to the personal shopper. A preview of the item’s image, the client requesting the item (indicated by color). This prevents wasted time in the store running back and forth.

  • Color-coded cart dividers: To maintain organization and reduce error, shopping cart dividers would allow for an easy checkout experience. Also, color coding with the app’s client colors allows the personal shopper to not worry about names and just always view the consistent color coding across the app as the differentiator between clients.