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

Research & Insights

1. Pareto Analysis

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

  • r/InstacartShoppers on Reddit

  • www.bbb.org (better business bureau)

  • r/ShiptShoppers on Reddit

  • r/Instacart on Reddit

  • r/Doordash on Reddit

  • r/UberEats on Reddit

  • Apple App Store reviews of Instacart

  • Apple App Store reviews of Shipt

Our Pareto Analysis identified two key issues:

  • Low Pay and Poor Communication: Shoppers faced challenges in understanding payment details and communicating with clients.

  • Organizational Challenges: Shoppers struggled with managing multiple orders and clients simultaneously.

Impact:

  • Transparent Payment: We made payment and tip details more visible, addressing concerns about low pay.

  • Enhanced Communication: Introduced an in-app messaging system to facilitate better communication with clients.

  • Improved Organization: Streamlined client management to help shoppers handle multiple orders more efficiently.

2. Analysis of Similar Systems

We compared the features of existing products on the market, including big and small companies. We found that many systems lacked effective navigation tools, such as in-store navigation, and client management tools for managing multiple clients. We discovered common and uncommon features across similar systems.

Common Features:

  • Physical system (shopping cart)

  • Digital system (handheld device/app)

  • Item details: name, image, quantity, and aisle location

Uncommon Features:

  • Internal store map

  • In-app customer messaging

  • UI organizes shopping lists by efficiency

Impact:

  • In-Store Navigation: Implemented a detailed map and optimal shopping route, helping shoppers find aisles and take the most efficient route from entrance to exit.

  • Client Management: Enhanced tools for managing and organizing clients.

A checkmark indicates the presence of the feature, while ‘P’ represents the possibility that the feature is present

3. Generalized Task Analysis

A Task Analysis was completed to understand the different steps and substeps involved in completing a grocery trip for three clients. This revealed challenges in handling and organizing multiple orders, as well as inefficiencies in finding items and managing tasks.

Impact:

  • Order Management: Improved tools and workflows for efficient order handling.

  • Navigation: Optimized shopping paths to reduce time spent finding items.

4. 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.

Impact:

  • Error Alerts: Ensures correct item scanning; alerts shopper immediately for incorrect scans.

  • Optimized Pathing: Prioritizes an efficient route, picking cold items like frozen foods last.

  • Messaging System: Facilitates real-time communication between shoppers and clients for stock updates or order changes.

  • Order Organization: Separates multiple client orders within one cart for easy management.

5. 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.

Impact:

  • Clear Product Images: Provides distinct and consistent images to aid quick identification.

  • Optimized Shopping Path: Reduces time spent searching and backtracking with an efficient route.

  • Minimized Idle Time: Streamlined procedures to combat delays while respecting individual shopping preferences.

Design Process

Using all of the insight from the research, we applied our findings to create a low-fidelity prototype of the app and the shopping cart dividers.

1. Low Fidelity App Prototype

The initial prototype includes the following features:

General Features:

  • The app has a navigation bar with five icons (home, profile, payments, messages, and main ordering page).

  • Each client is represented by a color ring, which matches the color of the bag in the cart.

Home Page:

  • The app prominently displays pay and tip for orders (batches) before a shopper accepts them.

  • Each order has a dropdown to show detailed payment information for customers.

Main Ordering Page:

  • The shopping cart icon opens the main ordering page, with three views:

    • Shopper View: Displays items by client.

    • Map View: Shows the optimal route through the store.

    • List View: Lists items by aisle.

Shopper View:

  • Items are grouped by client, displaying aisle numbers, and can be checked off once collected.

List View:

  • Items are displayed in a simple list format with aisle numbers and color-coded to match the respective client.

Map View:

  • The shopper’s route is shown with a dotted line, and a taskbar at the bottom lists upcoming items on the route.

Messages Page:

  • A messaging system, inspired by iMessage, allows shoppers and clients to communicate in real time.

2. Low-Fidelity Physical 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.

Phone Mount: For hands-free use while shopping.

Colored Bags: To differentiate client orders.

Usability testing

Participants

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

Assessment Procedure

The interviewer read the following description to the interviewee. The prototype and task list were emailed to participants, who answered questions aloud while the interviewer took notes. Tasks were divided into two categories:

  • Guided Flow: Focused on basic app functions, like finding clients, accessing views, and “purchasing” items.

  • Free Flow: Tested navigation of more advanced app features.

Description: As a professional shopper for INSTASHOP, you receive orders via an app. You also have colored bags for sorting items in your cart. The app link and tasks are in your email. Verbalize your answers while I take notes, and I'll only step in if necessary.

Results

Findings:

  • Interviewees mistook the placeholder name "Alex" as the person ordering and missed the dropdown menu showing individuals in each order.

  • They struggled to locate client notes, aisle numbers in the Map and List Views, and overlooked the taskbar at the bottom of the map view.

Positive Feedback:

  • Users liked the different app views (Shopper, List, and Map).

  • They felt confident managing three clients.

  • Color coordination between profile icons and bags was helpful.

  • Many could envision the fully developed app.

Impact:

  • Enhanced Feature Visibility: Improved feature visibility based on user feedback about obscure elements.

  • Improved User Flow: Streamlined pages and navigation for a more intuitive experience.

High Fidelity Prototype

Link to the functional protoype here.

Based on user feedback and usability testing, we made significant improvements:

1. Improved First Page

Name Change: Replaced “Alex” with “Shopper” to clarify user identity.

Dropdown Visibility: Added scrolling feature and ensured the top batch is open for immediate client and order details.

Client Ratings: Added client ratings for shoppers to make better-informed decisions before accepting orders.

Impact: Improved user clarity and immediate access to critical information.

2. Navigation Bar Redesign

Updated Icons:

  • Home: Remained the same, with content updates.

  • Clipboard Icon: Updated, represents the task or list view.

  • Map Icon: Trifold map for intuitive navigation.

  • Messaging Icon: Remained the same, Enhanced messaging functionality.

  • Profile Icon: Merged profile and payment sections for streamlined access.

Impact: Enhanced icon relevance and thumb accessibility for a more intuitive navigation experience.

3. Merged Pages and Views

Client View: Unified elements from previous pages for a comprehensive client overview.

List View: Simplified with the removal of unnecessary navigation bars.

Map View: Improved taskbar visibility and optimized displays.

Impact: Streamlined user experience and enhanced visibility of important features.

4. Overall Enhanced Usability

Taskbar Visibility: Increased visibility of the map view taskbar based on feedback.

Scanning Functionality: Added scanning for all clients.

Chat Feature: Introduced automated messaging for client communication.

Impact: Addressed usability issues and introduced features to improve overall user experience.

Conclusion

By applying our research and insights, I created a high-fidelity prototype that reflects significant enhancements. A usability assessment informed key improvements, including a redesigned navigation bar, an updated first page, and enhanced usability features. In conclusion, this app aims to provide a more efficient and user-friendly experience for professional shoppers.