Michael Frontz

User Experience Designer

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:

• Sequence Model ‒ identifies the order of activities in the shopping experience, including the intents, triggers, and steps for each activity, as well as any breakdowns that occurred. For example, the first activity involves preparing and finalizing a shopping list, which may be triggered by running low on certain groceries or household items.
• Flow Model ‒ represents communication and responsibilities among various roles involved in the shopping experience, including any breakdowns. For example, the shopper interacts with other household members and store employees.
• Cultural Model ‒ represents the various influences that affect the shopper. For example, shoppers are influenced by budget, schedule, advertisements, etc.
• Artifact Model ‒ shows tangible objects used during the shopping experience, including the artifact’s information, structure, presentation, as well as how the artifact is used and any breakdowns that occurred during its usage. For example, artifacts used by the shopper include a shopping list, coupons, etc.
• Physical Model ‒ illustrates the environment in which the shopping experience occurs, including the layout, movement within the environment, and any breakdowns presented by the environment. For example, the two primary environments in shopping are the home and the store(s).

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)

Flow Model for User 1

Cultural Model for All Users

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

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:

• At home, the mobile app would support automated list-building through predictive suggestions, as well as collaborative list-building among the household members.
• In the store, the mobile app would support in-store navigation and inventory information, as well as reviews and recommendations from trusted sources.

System Vision for Solution

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

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.

Scroll to Top