Instashop

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 done for PSYC 409: Methods in Human-Computer Interaction at Rice University. Read the full report here.

What is Instashop?

The Development Process

Click a link to jump ahead to an HCI method or prototype.

  • Operational Analysis

  • Pareto Analysis

  • Analysis of Similar Systems

  • Generalized Task Analysis

  • Error Analysis

  • Activity Analysis

  • Low-Fidelity Digital Prototype

  • Low-Fidelity Physical Prototype

  • High-Fidelity Prototype V1

  • Prototype V1 Task Analysis

  • Cognitive Walkthrough

  • Usability Assessment

  • High-Fidelity Prototype V2

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 not big enough

  • Not enough dividers

  • Too many clients accepted

  • Inaccurate order due to customer changes (not noticing, lag time, connection issues)

Potential Failures

  • Disorganized professional shoppers

  • Organized professional shoppers

  • Grocery bagger at the cash register

  • Customer who ordered

Users

Pareto Analysis

From this data, we concluded that shoppers had a lot of problems with the base payment being low and tips being low or nonexistent for their orders. Shoppers also complained about multiple difficulties with communication. As a result, we chose to put a lot of focus into this for our prototype and give a clear indication of the pay and tip amount before accepting an order as well as offer an in-app messaging area between the shopper and client.

While analyzing these forums, we also learned that shoppers prefer to stay organized during the shopping process, and often do not shop for more than two people simultaneously. While not a direct element of the Pareto Analysis, we were still inspired to consider in-store shopping organizations as well as our limit for clients in each batch.

  • r/InstacartShoppers on Reddit

  • BBB (better business bureau) on www.bbb.org

  • 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

For the Pareto Analysis, we used community forums, such as Reddit, to accumulate the issues that shoppers of common professional shopper apps had with the established systems. The locations that we used for data collection include:

Analysis of Similar Systems

For an Analysis of Similar Systems (AOSS), we chose systems that are both independent startups, established applications, and subsidiaries of larger store corporations. From these systems, we determined what element they did or didn’t include based on a set of systems we felt were overarching in the industry.

Many of the products had the possibility for the specified system (marked by a ‘P’ on the chart), especially if it was an element of the physical component. 

We found that many of the systems had a physical and digital component. Usually, the physical component related to the shopping cart, while the digital component regarded the handheld digital device and the application within. Additionally, we found that all apps exhibited simplistic but key traits of a shopping app: the name of a requested product, image of a requested product, quantity requested of a product, and location of a requested product. 

An interesting finding was that not every system included a map and even fewer had what seemed to be an order for which to grab items. This became a key addition in our design process as we believe in-store navigation is an aspect that will revolutionize the 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. Additionally, we noted that not all apps included messaging between the customer and the shopper which is an essential component to include in our application, as shown in other data.

Generalized Task Analysis

Link for easier viewing: Generalized Task Analysis.

This task analysis follows the flow for completing an order (also known as a batch) for 3 clients. We decided to do an initial general task analysis to understand the order of tasks that a shopper of our application would do. This inspired ideas about our application flow and what the ideal journey throughout the shopper experience would be. In our prototype-specific task analysis (later in the report), we provide more details on the “shop for client” section.

Error Analysis

For the Error Analysis (EA) we chose four videos of people shopping. Some of the videos focused on the use of a professional shopper app and some of them were just simple videos of a person grocery shopping. This variety allowed us to gain data on the types of shoppers that use the app and what people are thinking while in the shopping process. While watching these videos we took note of any errors they made while using the app and any possible errors that may come up for shoppers of our own app. 

EA 1: Instacart Shopper POV Ride Along

Link to video here.

What errors are committed?

  • Grabbing the wrong item.

  • Scanning the wrong item

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

  • Can’t necessarily stop the mistake.

  • Don’t allow incorrect items to be accepted for a scan.

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

  • Add images of the items and clear text.

  • Provide a popup that alerts about an incorrect item being scanned.

How do we minimize error consequences?

  • Provide a checklist of images when all items have been scanned.

  • Not allow items to be scanned that are not a part of an order.

EA 2: Grocery Store Shopping, Come With Me

Link to video here.

What errors are committed?

  • Backtracked through the store.

  • Grabbed items that weren’t needed/wanted.

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

  • Path exactly what order and which way is how someone should be shopping for the client(s).

  • Keep a list of items to be purchased from the store.

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

  • Display the optimal mapping path when getting into the store.

  • Provide a popup that alerts about an incorrect item being scanned.

How do we minimize error consequences?

  • List items in optimal order of efficiency.

  • Display images of the items on the list.

EA 3: Kroger Full Shop Along

Link to video here.

What errors are committed?

  • Not messaging customers when an item is out of stock.

  • Grabbing cold items early on.

  • Accepting the order after grabbing items (caused other problems):

    1. Scanning items in large groups, rather than individually.

    2. Needing to put items back.

    3. Backtracking because items were forgotten or added before order was accepted.

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

  • Require a reasoning for not being able to scan an item.

  • Implement an optimal shopping path algorithm that gives high priority to temperature constraints of items.

  • Make shoppers accept an order before starting their shopping; when items are previewed on the digital application, create a clear indication to scan the item then and there.

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

  • Prompt shoppers to message customers when filling an out of stock option on the app.

  • When scanning a cold item early, display a popup that encourages the shopper to wait till the end.

  • Show that they are not following the route on the store, which can make them feel as though they are doing something wrong and need to correct their errors.

How do we minimize error consequences?

  • Provide a messaging system to contact clients when an item is out of stock.

  • Place items in order of which you want shoppers to pick up the items.

  • Create a checklist system so the shopper knows exactly what to do next and also what items have already been scanned. 

EA 4: How to Make Money with Instacart

Link to video here.

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

  • If store information is available, provide an image of where on the shelf the item should be located.

  • Provide past label images of product in a further description.

  • Prompt shoppers to message customers when filling an out of stock option on the app.

What errors are committed?

  • Labeled an item as out of stock and later found it.

  • Unable to find items due to image on app and packaging being different.

  • Providing a subjective replacement for an item.

How do we minimize error consequences?

  • Provide clear images for products.

  • Request updates from store product managers when an items package is updated for updating the images in the app.

  • Provide a messaging system to contact clients when an item is out of stock.

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

  • Properly label and image each product in the database.

  • Ensure all images are up to date for each product.

  • Require customer confirmation before scanning a replacement.

General Possible Errors

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.

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

To mitigate these errors, our team created solutions that best addressed each error by keeping the shopper’s needs and goals as the top priority. These solutions include error prompts (not fully implemented for our prototype), optimal pathing located on the map view of the app, a messaging center to contact clients, and different colored bags that coordinate with the colors of each client in the app.

Activity Analysis

For the activity analysis (AA), the same four shopper videos were used and our team focused on exactly what they were doing throughout the video. While watching these videos, we took note of every action that the person took. 

Note: There was a slight generalization for the action of searching for an item.

AA 1: Instacart Shopper POV Ride Along

Link to video here.

AA 2: Grocery Store Shopping, Come With Me

Link to video here.

AA 3: Kroger Full Shop Along

Link to video here.

AA 4: How to Make Money with Instacart

Link to video here.

From the Activity Analysis, the team chose to emphasize clarity of the images on our application as well as providing an efficient order for which to grab the items for a client. The data shows that there is an excessive amount of time spent searching for items on an aisle or backtracking because an item was forgotten or unable to be found. We do acknowledge that each shopper will have individual differences on how they prefer to shop, which is very clear in the data, however we felt that giving shoppers a straightforward procedure to follow, if they so choose, with distinct and consistent images was the best option to combat the idle time that we see from this data.

Low-Fidelity Digital Prototype

This was the first version of our application before it was created in Figma. We started off knowing that we wanted to have a navigation bar at the bottom of the screen with 5 icons including a home page, a profile page, a payments page, a messaging page, and a shopping cart page. The shopping cart page is where all order information would be contained, and that would be the main focus of the app.

For the home page, we acknowledged that a lot of the issues that shoppers had with established apps was with not properly displaying the pay and tip for an order or “batch” they were about to accept. So, upon opening the app, we put pay at the forefront of the shopper’s visual field as they accept an order. Additionally, each order has a small dropdown that can be extended to show who is included in the order and the exact payment breakdown.

Then, our team focused on what the main ordering page would look like, as represented by the shopping cart icon on the navigation bar. We recognized that we wanted multiple parts for the shopping cart page so we settled on splitting it into multiple views. We decided to include a view that displayed all of the items that each individual client ordered, a view for the optimal order that a shopper could walk around the store to collect the ordered items, and a view of the in-store map that displayed the items from the list and where they were in the store.

When designing the view for each individual client we felt that “Shopper View” fit the best to individualize each client. At this point, we also realized that associating each client with a color ring around their image would both give the shopper a way to separate the clients as well as give our app a splash of color for a friendlier shopper experience. In the class, there was an activity where a student had to sort balls into slots, but a lot of cognitive workload was taken off when there was some color coordination done for her. This allowed her to complete the ball sorting task with significantly higher efficiency while also decreasing her cognitive workload. Our team took heavy inspiration from this class activity, implementing this color coordination into our product. We decided that the color ring around the client’s icon would correspond to the color of the bag in the shopping cart. 

Next, the optimal order of items was displayed under “List View” and this would resemble a shopping list. This view’s aim was to be as straightforward as possible for shoppers. We also noticed that this was a prime location for placing the aisle numbers for each item and who was ordering each item as well. Instead of using the clients’ names, we used their icons to indicate who wanted which items.

Lastly, we created a map view of the store. We decided on the title “Map View” to again be straightforward on what the view was showing. At this stage in the process we had not yet decided how we would show the path for the map but were contemplating how it would look, as shown with the small dot with a cone field of vision representing the shopper. We also added the aspect of a secondary taskbar available to map view only that can display contents similar to list view but can be accessed on the map without completely changing pages.

Finally, we also drew up the design that we wanted for the messaging section of our app. Based on the data that we saw from the Pareto, Error, and Activity Analyses, we wanted to give the option for full chat capability to both the shopper and clients. We used the iMessage application as an inspiration for much of our messaging.