Understanding consumer perceptions of QR codes and creating a digital unpackaging experience.
Overview
Client:
Patagonia
Role:
product design lead, user researcher, market researcher
Timeline:
September 2020 - December 2020
Deliverable:
user research, secondary market research, physical design prototype, digital design prototype
Context
Patagonia is an American clothing company that markets and sells outdoor clothing. The company values environmentalism and sustainability and sought to make its existing products and processes more sustainable. In particular, Patagonia sought to understand how to make their hang-tags more sustainable through QR codes.
Through Berkeley Innovation, I had the opportunity to work with Jennifer Patrick, Head of Global Branding and Packaging, to investigate consumer perceptions and market trends of QR codes, and if the research favored it, develop physical and digital prototypes of QR code packaging ("smart packaging"). The question that remained central to this product research project was:
How might we design a viable, sustainable, and digital shopping experience via packaging?
Landscape Research
Before delving into any product designs, we sought to understand whether QR codes are even a viable business move. To do so, we conducted secondary research to survey the market conditions. Our secondary research indicated the QR codes are on the rise and indeed viable. Some sample findings:
11 million households in the US will have used a QR code by the end of 2020 (13% growth from 2018).
There was a 26% increase in QR code usage from 2018-2019.
The smart packaging industry is projected to increase by $20 billion by 2024.
User Research
With an understanding of the QR code market, we sought to understand consumer perceptions about smart packaging and retail experience, from in-store shopping to online order packaging experiences. To do so, we conducted a variety of primary UX research methods.
Survey
We created a 7-minute survey with the goal to broadly to explore North American consumer shopping habits and familiarity with QR codes and hang tags.
Sample survey questions
Surveying the market with general questions
Do you own a smartphone?
Have you ever used your smartphone during an in-store shopping experience?
List the first 3 words that come to mind when you think of Patagonia.
Exploring QR codes' use cases
Have you ever used a QR code before?
Where do you most commonly see QR codes?
Have you ever seen a QR code used during a retail experience?
Understanding what consumers value on a hang tag
Which of the following do you see on hang tags?
How likely are you to consider the information on a price tag before making a purchase decision?
What are the most important features of a hang tag to you?
To receive a diversity of responses, we circulated the survey across our social media platforms (i.e. Facebook, LinkedIn, Instagram), relevant forums on Reddit, and to Patagonia's employees.
Contextual Inquiry
While the survey was an apt research method to acquire general, overarching consumer trends, we wanted to meet shoppers in their natural habitat and mindset — Patagonia stores, in our case. Our research goal was to understand how consumers perceive and interact with QR codes and hang tags in-store.
We interviewed about 30 participants at Patagonia stores.
Sample contextual inquiry questions
Exploring purchasing decisions
What kind of information helps you decide to purchase?
When purchasing a clothing item, how often do you look at its packaging — for example, the hang tag? Why is that the case?
Delving into consumer perceptions of QR codes
Are you familiar with QR codes? How often do you use it and in what settings?
How do you envision QR codes being used to help you make a purchase?
If this hangtag had a QR code, how would that change your experience?
Understanding what consumers value on a hang tag
Take a look at this hangtag — what's important to you and what's not?
How do you feel about having this mission statement displayed on a Patagonia hang tag? Would you look at the mission statement?
Interview
By nature of random in-store contextual inquiries, we weren't able to receive an entirely representative sample, so we supplemented our data with virtual interviews from demographics underrepresented in our prior research. We recruited our participants from existing survey respondents.
Sample interview questions
Exploring consumer shopping habits
Do you have a preference for online shopping or in person shopping?
How do you get more information about clothing products you're thinking of buying?
Walk me through your journey and steps to making a purchase decision.
Delving into consumer perceptions of QR codes
What kind of information do you think you would find through a QR code?
Talk me through your process and actions of scanning this QR code
Understanding what consumers value on a hang tags
What do you look for in a hang tag?
How would you find information about a product if it didn't have a hang tag?
How do you interact with the hang tags of items you purchase?
Insights
To synthesize our market and user research, we transcribed our raw data onto a Miro board, grouped data based on commonalities, and generated insights from the trends.
From there, we generated a variety of insights to inform our product decisions.
Sample Insights
Consumers primarily interact with hang tags to look at price. After price, consumers care about functionality, size, and impact.
Consumers have neutral to positive opinions about having a QR code on a hang tag.
QR codes will continue to be viable and used in the future.
Customer Journey + Touch Points
Before designing, we stepped back and considered our users and their use cases for a smart hangtag during various stages of the customer journey. We needed to redesign Patagonia's physical hang tag to prioritize user needs and incorporate a QR code. We also needed to consider where the QR code would redirect to and what kind of information should be showed based on the situation: in-store and online shopping.
From our research, we concluded that users needed:
Then, we began the process of ideation!
Wireframes
With insights and the customer journey in mind, we created wireframes of potential hang tags and interfaces. Here is my teammate Erin Rairdan's wireframes, which were much more aesthetic than mine.
Hang Tag
QR Code Landing Page (In Store Scanning)
QR Code Landing Page (Delivered Orders)
Unpacking Experience
Iterating + Feedback
Hang Tag
Patagonia's existing hang tags have a variety of inserts. We decided to reduce the hang tag to a single front and back design and prioritize the information users care about most according to our research. However, we needed to improve the copy on the hang tag, because many users noted that they wouldn't feel comfortable scanning a QR code without knowing its destination.
In Store Purchases
This iteration involves users browsing in-store. They will notice a QR code on the hang tag and scan it. We prioritized important information for users according to our research (price, size, functionality) and also added additional helpful information specific to the context, like reviews and availability.
This iteration prioritized the correct information, but needed consistent UI elements.
Delivered Purchases

We considered what the QR code experience would look like for users scanning a hang tag on their delivered orders. Here, the information architecture is a bit different — we prioritize information like product care, function, and Patagonia as a brand instead of reviews and availability. Overall, the information architecture was decent, but also lacked visual cohesion.
Unpacking Experience
Users would scan a QR code printed on their box which would lead to this main product page. While clean, we thought it needed to be more immersive.
High Fidelity Design
Hang Tag
We collaborated with Patagonia's marketing team to work on copy that would entice users to scan the QR code and also reflect the Patagonia brand. We also cleaned up the visual design to craft a realistic, minimal hang tag.
Landing Page (In Store Scanning)

Our final landing page for customers browsing in store starts with an onboarding screen that asks users where they are. This was necessary, as QR codes aren't dynamic enough to track where the product is. We acknowledge this adds some friction to the user experience.

For users shopping in store, we prioritize the most important information: price and size.

Users then can find more information relevant to their environment: features, sizing, and care. We cleaned up the visual design to be more standard.

Importantly, we add impact cards that help users understand the social impact of their purchase.
Landing Page (In Store Scanning)

Users who receive their orders via delivery will be prompted to select their location upon scanning the QR code.

The landing page prioritizes the functionality of this product and minimizes less important information like price and size at this stage of the user journey.

For online orders, we included an easily accessible link to returns, which is most relevant to this stage of the user journey.

The unpackaging experience is meant to be cinematic and full of storytelling. We added a sizable section about Patagonia's environmental impact to connect users to the product and brand.
Unpackaging Experience

We reimagine the unpackaging experience with a cinematic video that introduces Patagonia as a brand and connects the customer's product to a larger narrative .

We display a customer's entire order. If a user clicks a specific product card, they are redirected to its specific product page.

We added quick links to common actions after unpackaging an order, such as returns or leaving a review.

We end this order page with more cinematic information about sustainability and impact.
Reflection
Thank you to Jennifer Patrick for an enjoyable semester with Patagonia, as well as my entire team! This was an exciting exploration into the intersection of sustainability, physical design, and user interface design.
If I were to change something about the project, I'd probably do a little more research about specific consumer needs at each lifecycle stage.