Empowering users to shop safely & efficiently during the pandemic.
TIME
Nov - Dec 2020
5 weeks
ROLE
Experience designer
Researcher
WITH
Monica Chang
Emily Feng
Ginny Zhao
FINAL DELIVERABLE
PROBLEM SPACE
“Getting groceries” is no longer a mundane chore.
Average shoppers are taking extreme safety precautions during grocery runs, but experience heightened levels of anxiety during the checkout process. Here, the long lines and dense crowds cause shoppers to start worrying about their susceptibility to the virus.
Design process
[01] Approach
Qualitative interviews
Journey mapping
Narrowing scope
Target users
[02] Ideate
Paper prototyping
Concept-testing
[03] Design
Initial designs
Usability testing
Mid-fidelity designs
[04] Deliver
Prototyping
Final solution
Concluding thoughts
SOLUTION OVERVIEW
What is Costco Scan & Go?
RESPONSIVE WEB
Costco Scan & Go is a responsive web app that allows shoppers to use their preferred device and accelerate their shopping journey. Shoppers are able to see real-time updates on the app's virtual shopping bag and make adjustments before they reach the checkout station, which then streamlines the payment process and lessens the density of the checkout lines.
01
Keep your "bag" updated
Scan products that you've added to your cart as you shop. Make modifications along the way, prior to checking out.
02
Expedited checkout process
Have all the items in your cart be "scanned" at the register through one single bar code rather than by scanning every individual item.
03
Pay efficiently
Have preferred payment registered on the web app.
04
QR code to go
Final scan at the exit via the QR code, confirming the items in the cart with the receipt.
approach
Understanding the problem space
RESEARCH
Pop-up research to better understand our users.
Before jumping into ideating and designing our web app, we conducted user interviews in the directed-storytelling format to gauge how people's grocery shopping preferences and experiences.
THINK-ALOUD TESTING
Narrow our scope
We began by conducting think-aloud interviews to understand how users approach travel planning, aiming to refine our focus. We observed their desire for unique experiences that align with their current interests.
Key takeaways
During the pandemic, people...
The main insights we gathered from our user interviews were the following:
Felt a sense of "normality" through grocery shopping
Focused on minimizing contact with others
Experienced heightened social pressure during the checkout lines
SCOPE
Revisioned shopping with the ongoing pandemic.
We visualized our research data and established the checkout process as the key area of concern. With this in mind, we mapped out how how the Costco Scan & Go web app can be incorporated to alleviate the pressure experienced by the user.
TARGET USERS
Consolidating user's needs & goals.
With the general understanding of our users, we created personas to use and guide us as we begin designing our solution.
ideate
Scoping out potential solutions
USER FLOW
Identify pain points
We created a journey map that visualizes how users grocery shop amidst the pandemic, which also helped us identify potential entry points.
INITIAL DESIGNS
Paper prototypes
Using these "paper" prototypes, we were able to conduct a round of think-aloud user interviews to understand which ideas were confusing and which should be further refined in the next iterations.
Feedback
Insights from the Think-Aloud testing!
Check-out page was confusing: the two methods of payment had many design overlaps, but the pages actually have different intentions for users Physical inconvenience: the physical weight of tablets can cause tablet users to struggle with scanning barcodes
design
Translating our ideas into visuals
MID-FIDELITY DESIGNS
Let’s visualize this tool.
In our next iteration, we incorporated the feedback from our think-aloud testing and made the following changes:
Split-screen view enable users to add items on the left and see cart items on the right
With the larger real estate of tablets, the split-screen structure allows users to shop more consciously
The design pattern also mimics the self-checkout machines that currently exist
USABILITY TESTING
Update payment
Changing payment method via horizontal swipe confused the user: user thought swiping would change to another card instead of another payment method (from card to cash)
HIGH-FIDELITY DESIGNS
Inclusive design
Our final iteration focused on refining our design choices to ensure that the platform is not only intuitive for users, but also inclusive for the diverse group of shoppers visiting Costco.
deliver
Shop with less stress and more breeze
FINAL SOLUTION
Costco Scan & Go web app
Our final prototype for this project took in a lot of the content-oriented feedback we received. We also incorporated branding into our screens to add more consistency throughout the platform and to help all the features really connect to one another. The final prototype still included the features we had initially ideated, but the way we communicate and presented these functionalities is much more user-friendly and direct.
Tablet design *hover over*
mobile design *hover over*
THOUGHTS + REFLECTIONS
More user feedback
If this project were to be continued, we would definitely plan for more user testings with actual Costco customers and recruit different ages of users. Additionally, we would aim to make the prototypes more interactive to better understand how clear and effective our designs are. To supplement the feedback and results from the user testings, we would also launch surveys to see what current customers envision to be their ideal shopping experiences and understand how our solution can help enhance their customer journey at Costco.
ABOUT
Last updated on 01/29/2025
Empowering users to shop safely & efficiently during the pandemic.
TIME
Nov - Dec 2020
5 weeks
ROLE
Experience designer
Researcher
WITH
Monica Chang
Emily Feng
Ginny Zhao
FINAL DELIVERABLE
PROBLEM SPACE
“Getting groceries” is no longer a mundane chore.
Average shoppers are taking extreme safety precautions during grocery runs, but experience heightened levels of anxiety during the checkout process. Here, the long lines and dense crowds cause shoppers to start worrying about their susceptibility to the virus.
PROBLEM SPACE
“Getting groceries” is no longer a mundane chore.
Average shoppers are taking extreme safety precautions during grocery runs, but experience heightened levels of anxiety during the checkout process. Here, the long lines and dense crowds cause shoppers to start worrying about their susceptibility to the virus.
Design process
[01] Approach
Qualitative interviews
Journey mapping
Narrowing scope
Target users
[02] Ideate
Paper prototyping
Concept-testing
[03] Design
Initial designs
Usability testing
Mid-fidelity designs
[04] Deliver
Prototyping
Final solution
Concluding thoughts
SOLUTION OVERVIEW
What is Costco Scan & Go?
SOLUTION OVERVIEW
What is Costco Scan & Go?
RESPONSIVE WEB
Costco Scan & Go is a responsive web app that allows shoppers to use their preferred device and accelerate their shopping journey. Shoppers are able to see real-time updates on the app's virtual shopping bag and make adjustments before they reach the checkout station, which then streamlines the payment process and lessens the density of the checkout lines.
RESPONSIVE WEB
Costco Scan & Go is a responsive web app that allows shoppers to use their preferred device and accelerate their shopping journey. Shoppers are able to see real-time updates on the app's virtual shopping bag and make adjustments before they reach the checkout station, which then streamlines the payment process and lessens the density of the checkout lines.
01
Keep your "bag" updated
Scan products that you've added to your cart as you shop. Make modifications along the way, prior to checking out.
01
Keep your "bag" updated
Scan products that you've added to your cart as you shop. Make modifications along the way, prior to checking out.
02
Expedited checkout process
Have all the items in your cart be "scanned" at the register through one single bar code rather than by scanning every individual item.
02
Expedited checkout process
Have all the items in your cart be "scanned" at the register through one single bar code rather than by scanning every individual item.
03
Pay efficiently
Have preferred payment registered on the web app.
03
Pay efficiently
Have preferred payment registered on the web app.
04
QR code to go
Final scan at the exit via the QR code, confirming the items in the cart with the receipt.
04
QR code to go
Final scan at the exit via the QR code, confirming the items in the cart with the receipt.
approach
Understanding the problem space
approach
Understanding the problem space
RESEARCH
Pop-up research to better understand our users.
Before jumping into ideating and designing our web app, we conducted user interviews in the directed-storytelling format to gauge how people's grocery shopping preferences and experiences.
RESEARCH
Pop-up research to better understand our users.
Before jumping into ideating and designing our web app, we conducted user interviews in the directed-storytelling format to gauge how people's grocery shopping preferences and experiences.
THINK-ALOUD TESTING
Narrow our scope
We began by conducting think-aloud interviews to understand how users approach travel planning, aiming to refine our focus. We observed their desire for unique experiences that align with their current interests.
THINK-ALOUD TESTING
Narrow our scope
We began by conducting think-aloud interviews to understand how users approach travel planning, aiming to refine our focus. We observed their desire for unique experiences that align with their current interests.
Key takeaways
During the pandemic, people...
The main insights we gathered from our user interviews were the following:
Key takeaways
During the pandemic, people...
The main insights we gathered from our user interviews were the following:
Felt a sense of "normality" through grocery shopping
Focused on minimizing contact with others
Experienced heightened social pressure during the checkout lines
SCOPE
Revisioned shopping with the ongoing pandemic.
We visualized our research data and established the checkout process as the key area of concern. With this in mind, we mapped out how how the Costco Scan & Go web app can be incorporated to alleviate the pressure experienced by the user.
SCOPE
Revisioned shopping with the ongoing pandemic.
We visualized our research data and established the checkout process as the key area of concern. With this in mind, we mapped out how how the Costco Scan & Go web app can be incorporated to alleviate the pressure experienced by the user.
TARGET USERS
Consolidating user's needs & goals.
With the general understanding of our users, we created personas to use and guide us as we begin designing our solution.
TARGET USERS
Consolidating user's needs & goals.
With the general understanding of our users, we created personas to use and guide us as we begin designing our solution.
ideate
Scoping out potential solutions
ideate
Scoping out potential solutions
USER FLOW
Identify pain points
We created a journey map that visualizes how users grocery shop amidst the pandemic, which also helped us identify potential entry points.
USER FLOW
Identify pain points
We created a journey map that visualizes how users grocery shop amidst the pandemic, which also helped us identify potential entry points.
INITIAL DESIGNS
Paper prototypes
Using these "paper" prototypes, we were able to conduct a round of think-aloud user interviews to understand which ideas were confusing and which should be further refined in the next iterations.
INITIAL DESIGNS
Paper prototypes
Using these "paper" prototypes, we were able to conduct a round of think-aloud user interviews to understand which ideas were confusing and which should be further refined in the next iterations.
Feedback
Insights from the Think-Aloud testing!
Check-out page was confusing: the two methods of payment had many design overlaps, but the pages actually have different intentions for users Physical inconvenience: the physical weight of tablets can cause tablet users to struggle with scanning barcodes
Feedback
Insights from the Think-Aloud testing!
Check-out page was confusing: the two methods of payment had many design overlaps, but the pages actually have different intentions for users Physical inconvenience: the physical weight of tablets can cause tablet users to struggle with scanning barcodes
design
Translating our ideas into visuals
design
Translating our ideas into visuals
MID-FIDELITY DESIGNS
Let’s visualize this tool.
In our next iteration, we incorporated the feedback from our think-aloud testing and made the following changes:
Split-screen view enable users to add items on the left and see cart items on the right
With the larger real estate of tablets, the split-screen structure allows users to shop more consciously
The design pattern also mimics the self-checkout machines that currently exist
USABILITY TESTING
Update payment
Changing payment method via horizontal swipe confused the user: user thought swiping would change to another card instead of another payment method (from card to cash)
USABILITY TESTING
Update payment
Changing payment method via horizontal swipe confused the user: user thought swiping would change to another card instead of another payment method (from card to cash)
HIGH-FIDELITY DESIGNS
Inclusive design
Our final iteration focused on refining our design choices to ensure that the platform is not only intuitive for users, but also inclusive for the diverse group of shoppers visiting Costco.
HIGH-FIDELITY DESIGNS
Inclusive design
Our final iteration focused on refining our design choices to ensure that the platform is not only intuitive for users, but also inclusive for the diverse group of shoppers visiting Costco.
deliver
Shop with less stress and more breeze
deliver
Shop with less stress and more breeze
FINAL SOLUTION
Costco Scan & Go web app
Our final prototype for this project took in a lot of the content-oriented feedback we received. We also incorporated branding into our screens to add more consistency throughout the platform and to help all the features really connect to one another. The final prototype still included the features we had initially ideated, but the way we communicate and presented these functionalities is much more user-friendly and direct.
FINAL SOLUTION
Costco Scan & Go web app
Our final prototype for this project took in a lot of the content-oriented feedback we received. We also incorporated branding into our screens to add more consistency throughout the platform and to help all the features really connect to one another. The final prototype still included the features we had initially ideated, but the way we communicate and presented these functionalities is much more user-friendly and direct.
Tablet design *hover over*
Tablet design *hover over*
mobile design *hover over*
mobile design *hover over*
THOUGHTS + REFLECTIONS
More user feedback
If this project were to be continued, we would definitely plan for more user testings with actual Costco customers and recruit different ages of users. Additionally, we would aim to make the prototypes more interactive to better understand how clear and effective our designs are. To supplement the feedback and results from the user testings, we would also launch surveys to see what current customers envision to be their ideal shopping experiences and understand how our solution can help enhance their customer journey at Costco.
THOUGHTS + REFLECTIONS
More user feedback
If this project were to be continued, we would definitely plan for more user testings with actual Costco customers and recruit different ages of users. Additionally, we would aim to make the prototypes more interactive to better understand how clear and effective our designs are. To supplement the feedback and results from the user testings, we would also launch surveys to see what current customers envision to be their ideal shopping experiences and understand how our solution can help enhance their customer journey at Costco.
Empowering users to shop safely & efficiently during the pandemic.
TIME
Nov - Dec 2020
5 weeks
ROLE
Experience designer
Researcher
WITH
Monica Chang
Emily Feng
Ginny Zhao
FINAL DELIVERABLE
PROBLEM SPACE
“Getting groceries” is no longer a mundane chore.
Average shoppers are taking extreme safety precautions during grocery runs, but experience heightened levels of anxiety during the checkout process. Here, the long lines and dense crowds cause shoppers to start worrying about their susceptibility to the virus.
PROBLEM SPACE
“Getting groceries” is no longer a mundane chore.
Average shoppers are taking extreme safety precautions during grocery runs, but experience heightened levels of anxiety during the checkout process. Here, the long lines and dense crowds cause shoppers to start worrying about their susceptibility to the virus.
Design process
[01] Approach
Qualitative interviews
Journey mapping
Narrowing scope
Target users
[02] Ideate
Paper prototyping
Concept-testing
[03] Design
Initial designs
Usability testing
Mid-fidelity designs
[04] Deliver
Prototyping
Final solution
Concluding thoughts
SOLUTION OVERVIEW
What is Costco Scan & Go?
SOLUTION OVERVIEW
What is Costco Scan & Go?
RESPONSIVE WEB
Costco Scan & Go is a responsive web app that allows shoppers to use their preferred device and accelerate their shopping journey. Shoppers are able to see real-time updates on the app's virtual shopping bag and make adjustments before they reach the checkout station, which then streamlines the payment process and lessens the density of the checkout lines.
RESPONSIVE WEB
Costco Scan & Go is a responsive web app that allows shoppers to use their preferred device and accelerate their shopping journey. Shoppers are able to see real-time updates on the app's virtual shopping bag and make adjustments before they reach the checkout station, which then streamlines the payment process and lessens the density of the checkout lines.
01
Keep your "bag" updated
Scan products that you've added to your cart as you shop. Make modifications along the way, prior to checking out.
01
Keep your "bag" updated
Scan products that you've added to your cart as you shop. Make modifications along the way, prior to checking out.
02
Expedited checkout process
Have all the items in your cart be "scanned" at the register through one single bar code rather than by scanning every individual item.
02
Expedited checkout process
Have all the items in your cart be "scanned" at the register through one single bar code rather than by scanning every individual item.
03
Pay efficiently
Have preferred payment registered on the web app.
03
Pay efficiently
Have preferred payment registered on the web app.
04
QR code to go
Final scan at the exit via the QR code, confirming the items in the cart with the receipt.
04
QR code to go
Final scan at the exit via the QR code, confirming the items in the cart with the receipt.
approach
Understanding the problem space
approach
Understanding the problem space
RESEARCH
Pop-up research to better understand our users.
Before jumping into ideating and designing our web app, we conducted user interviews in the directed-storytelling format to gauge how people's grocery shopping preferences and experiences.
RESEARCH
Pop-up research to better understand our users.
Before jumping into ideating and designing our web app, we conducted user interviews in the directed-storytelling format to gauge how people's grocery shopping preferences and experiences.
THINK-ALOUD TESTING
Narrow our scope
We began by conducting think-aloud interviews to understand how users approach travel planning, aiming to refine our focus. We observed their desire for unique experiences that align with their current interests.
THINK-ALOUD TESTING
Narrow our scope
We began by conducting think-aloud interviews to understand how users approach travel planning, aiming to refine our focus. We observed their desire for unique experiences that align with their current interests.
Key takeaways
During the pandemic, people...
The main insights we gathered from our user interviews were the following:
Key takeaways
During the pandemic, people...
The main insights we gathered from our user interviews were the following:
Felt a sense of "normality" through grocery shopping
Focused on minimizing contact with others
Experienced heightened social pressure during the checkout lines
SCOPE
Revisioned shopping with the ongoing pandemic.
We visualized our research data and established the checkout process as the key area of concern. With this in mind, we mapped out how how the Costco Scan & Go web app can be incorporated to alleviate the pressure experienced by the user.
SCOPE
Revisioned shopping with the ongoing pandemic.
We visualized our research data and established the checkout process as the key area of concern. With this in mind, we mapped out how how the Costco Scan & Go web app can be incorporated to alleviate the pressure experienced by the user.
TARGET USERS
Consolidating user's needs & goals.
With the general understanding of our users, we created personas to use and guide us as we begin designing our solution.
TARGET USERS
Consolidating user's needs & goals.
With the general understanding of our users, we created personas to use and guide us as we begin designing our solution.
ideate
Scoping out potential solutions
ideate
Scoping out potential solutions
USER FLOW
Identify pain points
We created a journey map that visualizes how users grocery shop amidst the pandemic, which also helped us identify potential entry points.
USER FLOW
Identify pain points
We created a journey map that visualizes how users grocery shop amidst the pandemic, which also helped us identify potential entry points.
INITIAL DESIGNS
Paper prototypes
Using these "paper" prototypes, we were able to conduct a round of think-aloud user interviews to understand which ideas were confusing and which should be further refined in the next iterations.
INITIAL DESIGNS
Paper prototypes
Using these "paper" prototypes, we were able to conduct a round of think-aloud user interviews to understand which ideas were confusing and which should be further refined in the next iterations.
Feedback
Insights from the Think-Aloud testing!
Check-out page was confusing: the two methods of payment had many design overlaps, but the pages actually have different intentions for users Physical inconvenience: the physical weight of tablets can cause tablet users to struggle with scanning barcodes
Feedback
Insights from the Think-Aloud testing!
Check-out page was confusing: the two methods of payment had many design overlaps, but the pages actually have different intentions for users Physical inconvenience: the physical weight of tablets can cause tablet users to struggle with scanning barcodes
design
Translating our ideas into visuals
design
Translating our ideas into visuals
MID-FIDELITY DESIGNS
Let’s visualize this tool.
In our next iteration, we incorporated the feedback from our think-aloud testing and made the following changes:
Split-screen view enable users to add items on the left and see cart items on the right
With the larger real estate of tablets, the split-screen structure allows users to shop more consciously
The design pattern also mimics the self-checkout machines that currently exist
USABILITY TESTING
Update payment
Changing payment method via horizontal swipe confused the user: user thought swiping would change to another card instead of another payment method (from card to cash)
USABILITY TESTING
Update payment
Changing payment method via horizontal swipe confused the user: user thought swiping would change to another card instead of another payment method (from card to cash)
HIGH-FIDELITY DESIGNS
Inclusive design
Our final iteration focused on refining our design choices to ensure that the platform is not only intuitive for users, but also inclusive for the diverse group of shoppers visiting Costco.
HIGH-FIDELITY DESIGNS
Inclusive design
Our final iteration focused on refining our design choices to ensure that the platform is not only intuitive for users, but also inclusive for the diverse group of shoppers visiting Costco.
deliver
Shop with less stress and more breeze
deliver
Shop with less stress and more breeze
FINAL SOLUTION
Costco Scan & Go web app
Our final prototype for this project took in a lot of the content-oriented feedback we received. We also incorporated branding into our screens to add more consistency throughout the platform and to help all the features really connect to one another. The final prototype still included the features we had initially ideated, but the way we communicate and presented these functionalities is much more user-friendly and direct.
FINAL SOLUTION
Costco Scan & Go web app
Our final prototype for this project took in a lot of the content-oriented feedback we received. We also incorporated branding into our screens to add more consistency throughout the platform and to help all the features really connect to one another. The final prototype still included the features we had initially ideated, but the way we communicate and presented these functionalities is much more user-friendly and direct.
Tablet design *hover over*
Tablet design *hover over*
mobile design *hover over*
mobile design *hover over*
THOUGHTS + REFLECTIONS
More user feedback
If this project were to be continued, we would definitely plan for more user testings with actual Costco customers and recruit different ages of users. Additionally, we would aim to make the prototypes more interactive to better understand how clear and effective our designs are. To supplement the feedback and results from the user testings, we would also launch surveys to see what current customers envision to be their ideal shopping experiences and understand how our solution can help enhance their customer journey at Costco.
THOUGHTS + REFLECTIONS
More user feedback
If this project were to be continued, we would definitely plan for more user testings with actual Costco customers and recruit different ages of users. Additionally, we would aim to make the prototypes more interactive to better understand how clear and effective our designs are. To supplement the feedback and results from the user testings, we would also launch surveys to see what current customers envision to be their ideal shopping experiences and understand how our solution can help enhance their customer journey at Costco.