Scan, add offers, pay and go
How many times have you been frustrated by the long lines in the store? How about using self-checkout in the department store just as what you do in the grocery stores?
🎨 Lead Designer
⏱️ Launched Oct, 2018
đź“„ In-store, Desktop, PoC/PoS
Creating this in-store checkout experience was very rewarding and fruitful. As the lead experience designer, I worked very closely with customer research, product manager and project planning team. Together we collaboared with a cross- functional team of engineer, store operations, business, loss and prevention, etc to craft this experience from ideation to implementation.
DESIGN PRINCIPLE
Communication was the most challenging part when we first start. There were at least 8 core teams involved, at 2 locations. Plus, unlike other projects, to design a self-checkout system, we have to communicate with the store-related teams on top of product, research and engineer team. To setup a good foundation, first thing I did was to align design expectations. I shared this 3 design principles across the core partners and talked through the main experience flow. This really helped to on-board everyone and set a healthy and open tune at the beginning.
A survey was then send out by our research team to understand customers' expectations and concerns. Together with a competitve analysis, we learned that two main concerns customers have are
1. 72% of customers had difficult finding an associate for help.
2. 56% needed associate assistance due to difficulty with applying coupons.
OVERVIEW
At First Glance
A clean and clear start screen for customers to start scanning items right away.
Checking Out
Offers can be applied at any time. Clear pricing story to create joyful and efficient checkout experience.
End With A Celebration
Celebrate with customers for their earnings at Kohl's. Clear message on the shopping details.
DESIGN DECISIONS
While checking out, theoratically, there are 3 ways for customers to
sign in and identify themselves as a rewards member. So initially all
the design concepts are about how to display these 3 sign-in methods on
a side panel of the checkout screen. However, our lab test results shows that
1. Most customers are
used to sign in with phone number.
2. They usually start checkout without looking at the screen first.
Instead,
they will simply start scanning items.
This means that most customers will have a difficult time to apply their coupons,
which based on our early survey, is people’s main concern when they
learned that Kohl’s will be providing the self-checkout line.
Based on the findings, I re-examined the flow and proposed something
different this time:
As shown above, the new design will provide the sign-in information
after customer start to scan, and it will also remind the customers
to apply their coupons once they finish scaning and ready to pay. We
got quite positive feedbacks on this new flow, it makes sure that:
1. Customers can
start checking out right away without too much
information upfront.
2. The sign-in information is
always available while checking out.
3. We will remind customers
proactively about the coupons right before they are ready to pay.
And once they signed in, we will clearly show available Kohl’s cash and coupons for customers on the right panel.
This is how we setup the lab using the same cashier checkout system and an eye-tracking device to learn how our customers interact with the design proposals.
Kohl’s is known for its Kohl’s cash. We have many customers come to shopping with Kohl's because they would like to spend or earn Kohl’s cash. When considering self-checkout, the complicated calculation of Kohl’s cash is people’s main complaint. To solve this problem, I worked with the marketing team closely to list out all the scenarios for Kohl’s cash and run through rounds of iterations to make sure the savings is easy, clear and delightful for customers.
To help communicate with product, engineer and marketing team, and algin on how many different design scenarios we need, I created this user flow map. After I listed out all the scenarios, it becomes much clearer on how should we design this experience for users with different preference.
Based on the flow map, the experience is designed to make sure that customers are aware of their savings all the time while scanning items. After they finish scanning, a dialoge box will inform customers how much Kohl’s cash they have earned. Lastly, the confirmation screen will once again celebrate what they earned in this purchase.
This pilot testing photo shows a common scene: customers come to
shop at Kohl’s with all the coupons collected and would like to
make sure that she has maximized her coupons and get the rewards
she earned.
During the pilot rollout, we have:
> 92% of customers chose “Likely or Very Likely” to use again.
> 75% of customers indicated the time it took was either “Quick/Very Quick.”