Sustainability scanner
This project was developed as a part of a graduate course in User Centered Design at University of Washington during Autumn 2024. In this course, we were asked to design a tool, service or a product for living in the age of climate change, with the key constraint that the final solution could not be an app or a website.
Key skills
-
Concept Ideation
-
User Research
-
Sketching
-
UI Design
-
Prototyping
Team members + Key Roles
-
Anna Lindner: Researcher
-
Kavya Nagalakunta: Designer, Engineer
-
Jessica Wysor: Designer
-
Ben Zheng: Researcher
Problem Statement
Shoppers often hesitate to spend more on sustainable products in grocery stores, even though many are environmentally conscious. To tackle this, we want to design a service that results in behavior change - driving users to make more sustainable purchases when grocery shopping. By exploring users' relationships with food and their decision-making processes in grocery stores, we want to create an experience that educates, empowers, and motivates users to make sustainable choices.
Target Users and Stakeholders
Grocery stores that want to position themselves as sustainability-forward
Primary Users
Adults aged 18–34 who are the primary grocery shoppers for their households
Manufacturers that supply products to grocery stores
Primary Users
Secondary Users
User Studies and Findings
Our research questions were:
-
How do users make purchasing decisions at the grocery store?
-
How much does sustainability matter to consumers when grocery shopping?
-
How do users define sustainability in the context of grocery shopping?
-
Do users know what grocery products are sustainable?
-
What motivates consumers to make sustainable purchases when grocery shopping in-store?
Research methods:
For our study, we triangulated our research using three quantitative and qualitative methods - questionnaires, interviews and direct observations in the field. For all three methods, we recruited participants primarily living in Seattle between the ages of 18-34. The recruitment was done via social media apps like Facebook and Instagram, messaging apps and personal networks.
Questionnaires
We distributed a 42-question survey via Google Forms to 27 participants to collect both quantitative and qualitative data on grocery shopping behaviors and sustainability practices. The survey provided us with a broad overview of participants' shopping habits, motivations, sustainability interests, and willingness to make sustainable choices on a large scale.
Interviews
We conducted seven in-depth interviews (20-30 minutes each) to gain deeper insights into participants' thought processes, motivations, and behaviors. The interviews helped contextualize the quantitative data and provided a better understanding of user attitudes towards sustainability in grocery shopping.
Direct Observations
Each team member observed shoppers aged 18-34 in local grocery stores for 30-45 minutes, using the AEIOU method (Activities, Environments, Interactions, Objects, and Users) to note decision-making behaviors and the display of sustainable vs. unsustainable products. This helped validate the findings from surveys and interviews in real-world settings, making our research more robust and comprehensive.
01
02
03
Findings
The combined results from the surveys, interviews, and observations show that:
-
While sustainability is important to shoppers, convenience, price, and health considerations are the main drivers of grocery shopping behavior.
-
Many shoppers, particularly younger adults, value proximity and affordability over sustainability, with only a minority consistently prioritizing environmental concerns in their purchases.
-
Health-conscious choices, such as organic and nutritious options, play a key role in decision-making, but price often acts as a barrier to adopting more sustainable habits.
-
The interviews and observations indicate that while shoppers express interest in sustainability, they are often confused by product labeling and are reluctant to pay a high price for such products.
Overall, our findings suggested that users want clearer and trustworthy product information, price incentives, and better visibility of sustainable products. To address these concerns and bridge the gap between intentions and actual purchasing behavior, we focused on finding ways to show how sustainable a product is and increase the visibility of sustainable options through our service.
Design Question, Requirements, and Goals
Design Question
How might we design an intuitive grocery shopping experience that encourages users to make more sustainable purchases?
Design Requirements
-
The design should not add significantly more time to the user’s interaction with each product.
-
The design should leverage existing grocery store models, since users value familiarity and convenience.
-
The design should be easily adopted into the user’s lifestyle since they value convenience and efficacy.
-
The design should be clear, transparent, and trusted by users.
Design Goal
-
The design should enable users to understand what grocery products are sustainable.
-
The design should enable users to understand how grocery products are sustainable.
-
The design should help users feel supported in making sustainable grocery choices.
User Personas
01
02
03
Concepting
To address our design question, requirements, and goals, and to adapt our product to fit the needs of potential users such as those depicted in our user personas, we devised the Sustainability Scanner.
The Sustainability Scanner is a device designed to give the user a quick and easy way to scan products for sustainability information. To aid the user in making a more informed decision when shopping sustainably, the scanner contains the following major features:
-
A sustainability rating system ranging from 1-5, with 1 being the lowest sustainability and 5 being the highest; the numbers are color-coded and displayed inside a circle bar that further indicates varying sustainability
-
Portability: the scanner can be carried in the user’s arms as the shop or be attached to a shopping basket or shopping cart
-
Clear and concise interface that adhere to accessibility principles to grant the user ease of navigation when using the scanner
-
Clear and concise information regarding the sustainability of the scanned product
-
Recommendations for similar alternative products that may be more sustainability
Ideation and sketching
Our team independently developed many sketches to ideate on designs for our research question. We then met together to discuss the ideas, including their strengths and weaknesses, and grouped them based on different features. We considered how each idea aligns with the needs of our user personas and how well the idea meets our design requirements. Finally, we each decided on three promising sketches to move forward with.
Sketch 1
This electronic screen display idea allows consumers to quickly visualize how and why a product is sustainable and provides transparency about the production process of the item.
Sketch 2
This standardized label idea, established by a universal regulatory body, allows users to easily assess if and how sustainable a product is.
Sketch 3
This physical product allows users to track the carbon footprint and budget of their purchases and suggests recommendations for sustainable alternatives within the same price range.
Storyboards
We created storyboards to visualize how users would interact with the sustainability scanner in various shopping scenarios. These storyboards highlighted the user's journey, from scanning a product to confirm its sustainability, to comparing options for more eco-friendly alternatives, and evaluating two similar products to determine the better choice. By mapping out these interactions, we enabled designers to identify potential pain points, such as decision fatigue, unclear recommendations, or challenges in interpreting sustainability information, helping refine the scanner's design for a seamless user experience.
Storyboard 2
Storyboard 1
User scans a product that they usually buy to view alternative product options that are more sustainable and fits their budget
User has two products in mind - scan both to determine which is more sustainable
Storyboard 3
User scans product to learn how sustainable it is/confirm that a product they want to purchase is sustainable
User flows
We created storyboards from our sketches to visualize how users would interact with different scanner placements. These storyboards detailed the user flows, illustrating the steps users would take when engaging with the scanner on grocery carts, stand-alone units, or baskets. By mapping these interactions, we identified critical touchpoints where users could assess product sustainability and make informed purchasing decisions.
User Flow 1: Grocery Basket
The user retrieves a shopping basket equipped with a product scanner from the store's entrance. They locate a product, scan its barcode, and view its sustainability rating. The scanner provides additional details about the product's environmental impact. After reviewing this information, the user decides to purchase the product, feeling informed and confident in their choice.
User Flow 2: Shopping Cart
The user selects a shopping cart with a product scanner and scans an item to compare its sustainability with other brands. The scanner displays recommended products with sustainability scores. After reviewing the options and details, the user selects the most sustainable product within their budget, confident in their informed choice.
User Flow 3: Lone Scanner
The user retrieves a scanner from the store entrance to compare two similar items. They begin by scanning the barcode of the first item and reviewing its sustainability score on the scanner display. To make an informed decision, they scan the second item and compare its score with the first. The scanner also suggests a more sustainable alternative. Determining that the first item is the better choice based on the scores, the user returns the second item and selects the first, confident in their decision to prioritize sustainability.
Wireframing
To address the growing demand for sustainability-focused shopping tools, we developed a medium-fidelity prototype of an interactive scanner designed to seamlessly integrate with grocery carts or shopping baskets. This prototype aims to enhance the shopping experience by providing real-time sustainability scores and alternative product suggestions based on scanned items.
The prototype was built with a focus on usability, incorporating intuitive navigation, clear feedback, and actionable information to guide users toward more sustainable choices. By simulating the experience of scanning products and receiving detailed sustainability insights, the prototype serves as a functional model for evaluating user interactions in a realistic shopping context.
Initial UI Screens
These screens were designed to simulate the core functionalities of the scanner, providing a realistic user experience while emphasizing usability, clear navigation, and actionable sustainability insight.
Initial Scanner Build
Made from cardboard and masking tape, this prototype was the initial scanner design used in our usability testing.
Usability Testing Materials
The egg cartons and Windex bottle were physical props used during usability testing to simulate real-world interactions with the sustainability scanner. The egg cartons allowed users to compare products with varying sustainability levels and explore alternative suggestions. The Windex bottle was used to test the scanner’s error-handling functionality by simulating a scenario where the barcode was not recognized, helping evaluate how the system provides feedback and guides users in such situations. These props added realism to the testing process, enabling a more comprehensive assessment of the prototype.
Usability Testing
To evaluate the effectiveness of our design and gather feedback, we conducted a usability study centered around three key tasks:
-
Task 1: Scanning a Product - Participants simulated scanning a product to test the ease of initiating the process and understanding the interface.
-
Task 2: Review the sustainability score and find a sustainable alternative - Participants reviewed the sustainability score, product concerns, and suggested alternatives to evaluate the clarity of information and decision-making support.
-
Task 3: Navigating and Handling Errors - Participants navigated between screens and encountered a scenario where a product was not in the database. This task assessed the intuitiveness of navigation and the system’s error-handling capabilities.
By observing participants as they completed these tasks, we aimed to uncover potential usability challenges, understand how intuitive the system is, and identify areas for improvement. This study also explored user motivations and barriers to adopting such a tool in a real-world grocery shopping setting.
Objective
The primary goal is to evaluate how effectively users can interact with the Sustainability Scanner prototype and to identify potential barriers or pain points.
Participants
-
Target Audience: Grocery shoppers, age range 18- 35
-
Sample Size: 4 participants with diverse levels of tech familiarity
-
Recruitment: Snowball Sampling of grocery store shoppers aged 18-35 and recruited through HCDE 518
-
Type of Study: Moderated usability test
-
Duration: 30 minutes per participant
-
Location: In-person in class/ In-person at home
Study Methodology
Tasks and Questions
For each task, participants will be asked to think aloud and reflect on their experience. After each task, ask open-ended, neutral questions:
-
What did you notice first on this screen?
-
Can you describe what you’re thinking as you complete this task?
-
Was there anything about this task that felt unclear or challenging?
Metrics
-
Time on Task: Time taken to finish each task.
-
Error Rate: Any mistakes, confusion, or need for clarification.
-
Qualitative Feedback: Observations on participant behaviors and comments.
Post-Test Questions
After completing all tasks, ask participants to reflect on their overall experience:
-
How would you describe your experience using this prototype?
-
Was anything particularly easy or difficult to use?
-
If you were shopping in a grocery store, do you think you’d use this tool? Why or why not?
-
Is there anything you would change about this tool to make it better?
Actionable Insights
The usability testing of the Sustainability Scanner prototype provided valuable feedback on how to improve its navigation, layout, and overall user experience. The following actionable insights and updates aim to create a more intuitive and user-friendly interface while addressing user concerns.
Navigation Updates
-
Back Button: Users emphasized the need for a "Back" button on all screens to navigate seamlessly to the previous page.​
-
Home Icon: Participants suggested the inclusion of a "Home" button for quickly returning to the starting page.
Content and Layout Adjustments
-
Product Image Placement and Size: Users found the scanned product image too small and poorly placed, making it difficult to focus on the product's details.​
-
Sustainability Scale: Participants wanted clearer context for the sustainability score.​
-
Learn More Buttons: Users expressed a desire to explore additional product details and alternative suggestions.
-
Icons for Details: Text-heavy sections were identified as overwhelming and visually cluttered.
Accessibility Enhancements
-
Font Size and Style: Participants noted that the text was small and hard to read.​
-
Scanner Dimensions: Users suggested including physical dimensions to better visualize the scanner's integration with carts or baskets.
Prototype iteration
option A
option B
option c
FINAL SOLUTION
Final UI Decision: Option C
After careful evaluation of the three designs, we selected Option C as the final UI for the Sustainability Scanner. This design best addressed the key issues identified in usability testing, such as improving text readability, creating a strong visual hierarchy, and providing an aesthetically pleasing interface.
UI Style Guide
Final 3D Prototype
The following images show a 3D rendered view of the Sustainability Scanner. The scanner will feature an ergonomic design, complete with grips on the side for holding. The scanner also includes a component on the front that allows the user to attach the scanner to shopping baskets or grocery carts.
Proposed Scanner Dimensions
The physical scanner is expected to be approximately 8.25 in x 3.75 in x 1.85 in. These dimensions were determined based on ergonomic factors, taking into consideration the average user's hand size and shape.
Next Steps
Our next steps for this project would be to deliver a design solution document to a team of engineers who are able to create initial mockups of the 3D model. We would then use these models to conduct further usability tests, focusing on understanding how users interact with the product.