Case Study: Contextual Design of Shopping App

Problem

This team project was completed for a graduate course in Human-Computer Interaction at the Indiana University School of Informatics and Computing at IUPUI.

We were challenged to apply Contextual Design methods to design a novel interactive application to support people carrying out an information-intensive activity in a home, school, or office context.

My team decided to design an application to assist people with shopping for groceries and other household items, which still occurs nearly exclusively in physical stores despite the increase in online shopping in other retail sectors. Therefore, we focused on designing a solution that would support and enhance in-store shopping experiences.

I was directly involved in all aspects of this project.

Approach

Contextual Design is a customer-centered process that uses field observations to understand and model people’s current work practices, in order to design an improved solution that supports users’ tasks and needs while resolving breakdowns.

Our target user population was broad: anyone shopping for groceries and other household items in retail stores.

Contextual Inquiry

We gathered field data through one-on-one contextual inquiry sessions conducted with multiple users, ranging in age, gender, marital/family status, and occupation. We each shadowed a user to observe and learn from them throughout a shopping experience from start to finish: creating shopping lists at home, shopping for items in stores, and returning home with purchased items. During the observations, we recorded extensive notes and asked questions as necessary to clarify the user’s actions, intents, and thought processes.

Users Observed During Contextual Inquiry
User Profile User 1 User 2 User 3
Demographic Background
  • Female, age 40-45
  • Married, no children
  • Professional artist
  • Male, age 35-40
  • Married, 2 children
  • Business professional
  • Female, age 20-25
  • Single, no roommate
  • Graduate student
Shopping Context Shopping for household items at Target Shopping for groceries at independent grocery Shopping for groceries and household items at Walmart

Interpretation Session

After each contextual inquiry session, my team conducted a group interpretation session to review the field observations recorded for each user. We translated the recorded observations into a set of coded notes, representing distinct pieces of data. Additional notes were recorded to capture team interpretations and insights, such as breakdowns in the user’s current practices, etc.

Work Models

We created a set of work models for each individual user:

The work models from the individual users were analyzed and synthesized to create a set of consolidated work models describing all observed users. It quickly became apparent that there were many breakdowns associated with creating and using a shopping list, which is the primary artifact involved in the shopping experience.

I created the set of work models for User 1, as well as the consolidated cultural model for all users.

Sequence Model for User 1 (excerpt ‒ creation of shopping list)

User 1 Sequence Model Excerpt

Flow Model for User 1

User 1 Flow Model

Cultural Model for All Users

Consolidated Cultural Model

Affinity Diagram

We used the interpretation notes from all the user observations to construct an affinity diagram that revealed patterns, themes, and topics that emerged from the user data.

Excerpt of Affinity Diagram

Affinity Diagram Excerpt

Our data revealed multiple breakdowns that negatively impact the shopping experience. My team compiled the most common breakdowns and then generated design ideas to potentially resolve them.

Design Ideas to Address User Breakdowns
Theme Breakdowns Design Ideas
T3. I check several key areas of my home for items to add to list.
  • Requires checking multiple areas at home
  • Repetitive process before each shopping trip
  • Automate list-building process with suggestions
  • Track purchase frequency to learn schedule
T8. Another person in my household has the primary role in determining the shopping list.
  • Need to frequently communicate and collaborate with others
  • Need to remember to add requests to shopping list
  • Shopping list is shared among household members with different roles
T15. I sometimes cannot find items in the store or find the store layout confusing.
  • Order of items in list may not match layout of store
  • Store layout unfamiliar or has changed
  • Go back-and-forth in aisles searching for items
  • Group items on the list according to store layout
  • Check store inventory and add items to wish list if unavailable
T11. I carefully inspect and consider items that I am unfamiliar with.
  • Want recommendation or detailed information on unfamiliar items or brands
  • Ability to ask friends for recommendations or information about specific items

Solution

Based on the insights from the user data and our design ideas, my team generated a vision for a mobile app system that would improve the user experience associated with creating and using a shopping list:

System Vision for Solution

System Vision for Shopping App

My team used our system vision to construct a User Environment Design (UED) diagram, representing a conceptual design for the mobile app’s interface screens and functions. The UED diagram could then be used to create wireframes and an interactive prototype for the mobile shopping list app.

UED Diagram for Solution

User Environment Design Diagram

Reflection

Contextual design is particularly well-suited to understanding information-intensive tasks. While the full methodology may not be appropriate or necessary for all design problems, the emphasis on observing users completing tasks in real-life contexts is an invaluable approach, whether building a new solution or improving an existing solution.

NEXT: Architecture Map of Education App

Next Case Study