CheckOut
Shop & Go
Whether it’s to get groceries, supplies, or consumer goods, nothing beats taking a trip to the store when it comes to shopping. Being able to use your senses to check out what you're buying before you even purchase is what differentiates itself from the online experience. It's something that cannot be easily replicated. Although shopping in person does have its advantages, dreaded lines and crowds tend to be inevitable. Even with the development of self-checkout machines, customers can find themselves in a recurring, perpetual bottleneck, preventing them from purchasing the products they need. Some estimates state that Americans spend 37 billion hours per year waiting in lines.
So how could we enhance the in-person shopping experience without sacrificing efficiency?
By eliminating unnecessary queues, such as lines to check out, helping locate items, and providing an effortless checkout process.
CheckOut is a digital system and tool that aims to do just that. Redefine in-person shopping by allowing users to quickly and easily pay for groceries and items without the need of a cashier.
Customers can walk into a store, scan an item’s barcode using the camera on their phone, add the item to their cart, and simply check out using a digital wallet. Customers/users could have the experience of shopping in person with the speed and efficiency of checking out online.
81% of Americans who go to the store to buy groceries have a mobile smart device, particularly users from the X, Y (Millennials), and Z generations. These generations are tech-savvy and always on the go. Chances are, anyone who goes to the store to purchase something will have a mobile device. Some will more than likely keep a reminder list of items to buy, in a memo document on their phone. In the past 50 years though, we’ve only seen a relatively small change in shopping behavior. It wasn't until recently where we've seen changes in behavior with the advancement in technology. Even with the onset of the recent COVID-19 pandemic, consumers have been shopping differently. Contactless shopping has been in demand more than ever and that presents an opportunity for this tool.
Research
Prior to ideation, I wanted to understand current consumer behaviors which have evolved even more recently due to the recent COVID-19 pandemic. For the first time in a generation, Americans began spending more money at the supermarket rather than dining out. We’ve seen a shift in purchasing goods online, but consumers can’t get the same experience choosing goods in person, I.e. choosing your own produce, feeling fabrics, trying on clothes, etc.To explore this further, I created a simple 5 minute survey to identify challenges and define opportunities that a digital tool could help solve. The survey was public and was distributed among friends and family, and then forwarded to their acquaintances.
The purpose of the survey was to determine three things related to consumer behavior to inform the design of the digital tool:
1. How often people went shopping at brick-and-mortar institutions, whether it’s for food, supplies or even clothes.
2. What features could enhance a shopping experience.
3. What are some overall frustrations during a typical shopping experience.
Based on the research and survey results, I started brainstorming solutions and created the affinity map below. I also created personas to simulate the opportunities and objectives of potential users. Using personas allowed me to think of the tool's usability and effectiveness from an unbiased perspective.
From there I started to think about the overall flow of the tool. What would be the most useful functions? How can we make those functions accessible using the least amount of steps possible? With those questions in mind, I started working on a flow map.
Ideation
Based on the research and survey results, I started brainstorming solutions and created the affinity map below. I also created personas to simulate the opportunities and objectives of potential users. Using personas allowed me to think of the tool's usability and effectiveness from an unbiased perspective.
CheckOut was conceived with the intention of making checking out a much speedier process. The primary function included the ability to scan a barcode or even potentially, the product itself. To do that, a mobile device's camera had to be easily accessible. This became the foundation of the home screen. From there, users would also be able to access other menus such as their profile, grocery list, and cart to check out.
The search bar also needed to be easily accessible, where people can look up an item, its inventory, location, and other details.
I also wanted to include the feature of creating a list, where users can preemptively plan their trip to the store, ideally saving even more time for the user/consumer.
Because the tool would use contactless payment, it was important make sure the user would be able to access their digital wallet. By giving them access to the payment options already on their phone, the user would save time in having to set up a new option entirely.
To encourage using the app more, a point system similar to credit card systems could be added, which users could eventually redeem for coupons and credits.
While prototyping, the payment total was shown after selecting checkout. I decided to add the payment total to the cart, so that the user can keep a running track of their total and points before concluding their shopping experience.
Prototyping
I then reproduced the wireframes in a digital format using Adobe Xd. This allowed me to further test the flow of the tool, get a better feel of button and text sized, and explore extending formats such as overlays and transitions.
Changes after testing:
the payment total was shown after selecting checkout. I decided to move the payment total to the cart, so that the user can keep a running track of their total. To encourage using the app more, I also decided to add some gamification adding a point system similar to credit cards. Users could accumulate points based on purchases and redeem them for coupons or credit.
The app has to be catered to a wide range of users, so accessibility is a priority. High contrasting colors, clean interfaces, and easy navigation. For the final prototype, I wanted to make sure that the branding was unique, minimal, clean, friendly, playful, fresh, natural, organic, earthy. The palette consists of a muted blue-green, with a secondary color of grey, tied up with a bold, golden-yellow accent color.
About
I’m a UX/UI designer, visual communications specialist, experience strategist, and dog-loving extrovert based in Portland, OR.
CheckOut
Shop & Go
Whether it’s to get groceries, supplies, or consumer goods, nothing beats taking a trip to the store when it comes to shopping. Being able to use your senses to check out what you're buying before you even purchase is what differentiates itself from the online experience. It's something that cannot be easily replicated. Although shopping in person does have its advantages, dreaded lines and crowds tend to be inevitable. Even with the development of self-checkout machines, customers can find themselves in a recurring, perpetual bottleneck, preventing them from purchasing the products they need. Some estimates state that Americans spend 37 billion hours per year waiting in lines.
So how could we enhance the in-person shopping experience without sacrificing efficiency?
By eliminating unnecessary queues, such as lines to check out, helping locate items, and providing an effortless checkout process.
CheckOut is a digital system and tool that aims to do just that. Redefine in-person shopping by allowing users to quickly and easily pay for groceries and items without the need of a cashier.
Customers can walk into a store, scan an item’s barcode using the camera on their phone, add the item to their cart, and simply check out using a digital wallet. Customers/users could have the experience of shopping in person with the speed and efficiency of checking out online.
81% of Americans who go to the store to buy groceries have a mobile smart device, particularly users from the X, Y (Millennials), and Z generations. These generations are tech-savvy and always on the go. Chances are, anyone who goes to the store to purchase something will have a mobile device. Some will more than likely keep a reminder list of items to buy, in a memo document on their phone. In the past 50 years though, we’ve only seen a relatively small change in shopping behavior. It wasn't until recently where we've seen changes in behavior with the advancement in technology. Even with the onset of the recent COVID-19 pandemic, consumers have been shopping differently. Contactless shopping has been in demand more than ever and that presents an opportunity for this tool.
Research
Prior to ideation, I wanted to understand current consumer behaviors which have evolved even more recently due to the recent COVID-19 pandemic. For the first time in a generation, Americans began spending more money at the supermarket rather than dining out. We’ve seen a shift in purchasing goods online, but consumers can’t get the same experience choosing goods in person, I.e. choosing your own produce, feeling fabrics, trying on clothes, etc.To explore this further, I created a simple 5 minute survey to identify challenges and define opportunities that a digital tool could help solve. The survey was public and was distributed among friends and family, and then forwarded to their acquaintances.
The purpose of the survey was to determine three things related to consumer behavior to inform the design of the digital tool:
1. How often people went shopping at brick-and-mortar institutions, whether it’s for food, supplies or even clothes.
2. What features could enhance a shopping experience.
3. What are some overall frustrations during a typical shopping experience.
Based on the research and survey results, I started brainstorming solutions and created the affinity map below. I also created personas to simulate the opportunities and objectives of potential users. Using personas allowed me to think of the tool's usability and effectiveness from an unbiased perspective.
From there I started to think about the overall flow of the tool. What would be the most useful functions? How can we make those functions accessible using the least amount of steps possible? With those questions in mind, I started working on a flow map.
Ideation
Based on the research and survey results, I started brainstorming solutions and created the affinity map below. I also created personas to simulate the opportunities and objectives of potential users. Using personas allowed me to think of the tool's usability and effectiveness from an unbiased perspective.
From there I started to think about the overall flow of the tool. What would be the most useful functions? How can we make those functions accessible using the least amount of steps possible? With those questions in mind, I started working on a flow map.
CheckOut was conceived with the intention of making checking out a much speedier process. The primary function included the ability to scan a barcode or even potentially, the product itself. To do that, a mobile device's camera had to be easily accessible. This became the foundation of the home screen. From there, users would also be able to access other menus such as their profile, grocery list, and cart to check out.
The search bar also needed to be easily accessible, where people can look up an item, its inventory, location, and other details.
I also wanted to include the feature of creating a list, where users can preemptively plan their trip to the store, ideally saving even more time for the user/consumer.
Because the tool would use contactless payment, it was important make sure the user would be able to access their digital wallet. By giving them access to the payment options already on their phone, the user would save time in having to set up a new option entirely.
To encourage using the app more, a point system similar to credit card systems could be added, which users could eventually redeem for coupons and credits.
While prototyping, the payment total was shown after selecting checkout. I decided to add the payment total to the cart, so that the user can keep a running track of their total and points before concluding their shopping experience.
Prototyping
I then reproduced the wireframes in a digital format using Adobe Xd. This allowed me to further test the flow of the tool, get a better feel of button and text sized, and explore extending formats such as overlays and transitions.
Changes after testing:
the payment total was shown after selecting checkout. I decided to move the payment total to the cart, so that the user can keep a running track of their total. To encourage using the app more, I also decided to add some gamification adding a point system similar to credit cards. Users could accumulate points based on purchases and redeem them for coupons or credit.
The app has to be catered to a wide range of users, so accessibility is a priority. High contrasting colors, clean interfaces, and easy navigation. For the final prototype, I wanted to make sure that the branding was unique, minimal, clean, friendly, playful, fresh, natural, organic, earthy. The palette consists of a muted blue-green, with a secondary color of grey, tied up with a bold, golden-yellow accent color.
CheckOut
Shop & Go
Whether it’s to get groceries, supplies, or consumer goods, nothing beats taking a trip to the store when it comes to shopping. Being able to use your senses to check out what you're buying before you even purchase is what differentiates itself from the online experience. It's something that cannot be easily replicated. Although shopping in person does have its advantages, dreaded lines and crowds tend to be inevitable. Even with the development of self-checkout machines, customers can find themselves in a recurring, perpetual bottleneck, preventing them from purchasing the products they need. Some estimates state that Americans spend 37 billion hours per year waiting in lines.
So how could we enhance the in-person shopping experience without sacrificing efficiency?
By eliminating unnecessary queues, such as lines to check out, helping locate items, and providing an effortless checkout process.
CheckOut is a digital system and tool that aims to do just that. Redefine in-person shopping by allowing users to quickly and easily pay for groceries and items without the need of a cashier.
Customers can walk into a store, scan an item’s barcode using the camera on their phone, add the item to their cart, and simply check out using a digital wallet. Customers/users could have the experience of shopping in person with the speed and efficiency of checking out online.
81% of Americans who go to the store to buy groceries have a mobile smart device, particularly users from the X, Y (Millennials), and Z generations. These generations are tech-savvy and always on the go. Chances are, anyone who goes to the store to purchase something will have a mobile device. Some will more than likely keep a reminder list of items to buy, in a memo document on their phone. In the past 50 years though, we’ve only seen a relatively small change in shopping behavior. It wasn't until recently where we've seen changes in behavior with the advancement in technology. Even with the onset of the recent COVID-19 pandemic, consumers have been shopping differently. Contactless shopping has been in demand more than ever and that presents an opportunity for this tool.
Research
Prior to ideation, I wanted to understand current consumer behaviors which have evolved even more recently due to the recent COVID-19 pandemic. For the first time in a generation, Americans began spending more money at the supermarket rather than dining out. We’ve seen a shift in purchasing goods online, but consumers can’t get the same experience choosing goods in person, I.e. choosing your own produce, feeling fabrics, trying on clothes, etc.To explore this further, I created a simple 5 minute survey to identify challenges and define opportunities that a digital tool could help solve. The survey was public and was distributed among friends and family, and then forwarded to their acquaintances.
The purpose of the survey was to determine three things related to consumer behavior to inform the design of the digital tool:
1. How often people went shopping at brick-and-mortar institutions, whether it’s for food, supplies or even clothes.
2. What features could enhance a shopping experience.
3. What are some overall frustrations during a typical shopping experience.
Based on the research and survey results, I started brainstorming solutions and created the affinity map below. I also created personas to simulate the opportunities and objectives of potential users. Using personas allowed me to think of the tool's usability and effectiveness from an unbiased perspective.
From there I started to think about the overall flow of the tool. What would be the most useful functions? How can we make those functions accessible using the least amount of steps possible? With those questions in mind, I started working on a flow map.
Ideation
Based on the research and survey results, I started brainstorming solutions and created the affinity map below. I also created personas to simulate the opportunities and objectives of potential users. Using personas allowed me to think of the tool's usability and effectiveness from an unbiased perspective.
From there I started to think about the overall flow of the tool. What would be the most useful functions? How can we make those functions accessible using the least amount of steps possible? With those questions in mind, I started working on a flow map.
CheckOut was conceived with the intention of making checking out a much speedier process. The primary function included the ability to scan a barcode or even potentially, the product itself. To do that, a mobile device's camera had to be easily accessible. This became the foundation of the home screen. From there, users would also be able to access other menus such as their profile, grocery list, and cart to check out.
The search bar also needed to be easily accessible, where people can look up an item, its inventory, location, and other details.
I also wanted to include the feature of creating a list, where users can preemptively plan their trip to the store, ideally saving even more time for the user/consumer.
Because the tool would use contactless payment, it was important make sure the user would be able to access their digital wallet. By giving them access to the payment options already on their phone, the user would save time in having to set up a new option entirely.
To encourage using the app more, a point system similar to credit card systems could be added, which users could eventually redeem for coupons and credits.
While prototyping, the payment total was shown after selecting checkout. I decided to add the payment total to the cart, so that the user can keep a running track of their total and points before concluding their shopping experience.
Prototyping
I then reproduced the wireframes in a digital format using Adobe Xd. This allowed me to further test the flow of the tool, get a better feel of button and text sized, and explore extending formats such as overlays and transitions.
Changes after testing:
the payment total was shown after selecting checkout. I decided to move the payment total to the cart, so that the user can keep a running track of their total. To encourage using the app more, I also decided to add some gamification adding a point system similar to credit cards. Users could accumulate points based on purchases and redeem them for coupons or credit.
The app has to be catered to a wide range of users, so accessibility is a priority. High contrasting colors, clean interfaces, and easy navigation. For the final prototype, I wanted to make sure that the branding was unique, minimal, clean, friendly, playful, fresh, natural, organic, earthy. The palette consists of a muted blue-green, with a secondary color of grey, tied up with a bold, golden-yellow accent color.