Joel Wisneski | Portfolio
Send me an email

Cart, Checkout and Save for Later

Launched October 2020
Updated March 2021

The new Kohl's Checkout on a laptopThe Kohl's Cart and Checkout on a phone

Cart and Checkout

Background context for the project

This project started in 2016 but didn't really gain traction until late 2018. By that point our competitors had spent a year or more improving their checkout experiences and Amazon had established their 1-Click Checkout.

E-commerce at Kohl's

A traditional brick and mortar retailer in the U.S.

Kohl's is very traditional compared to modern e-commerce sites. The vast majority of revenue comes from in-store transactions.

Coupon shopping is a core part of the shopping experience and the business model. It's rare for a customer to pay full price for anything but the process to get there was full of friction.

Up to this point the checkout experience had been redesigned around 2008 but the full vision was never achieved and updates had been bolted on, haphazardly, for a decade.

Our initial team structure

Design was one of many silos

Our UX team wasn't embedded in a product team like most tech companies, instead we were in between the business teams and the Product Manager. Some of our engineering teams were on-site but most of them were in other countries.

Communication between the designer and the engineers was sparse if at all. Generally design and engineering communication were passed through the Product Manager, leaving room for miscommunication and outdated assumptions.

Our team after a company re-org

Design as a partner

After a "digital transformation" we reorganized into squads. Being a legacy designer I still had connections to the business and marketing teams, that created more cooks in the kitchen but allowed for less product churn while the new product teams (and many new employees) started to understand how the Kohl's organization functioned.

Why focus on Checkout

And what purpose does a cart serve?

Customer Expectations
Kohl's shoppers have a lot of options today. The more work it takes to buy something, the more likely someone will end up going somewhere else.

We gathered a mountain of data from customers to inform what those expectations were and how we could improve.

Industry Standards
We were not the only company to recognize the competitive space, a number of other companies had already spent some significant time and money on optimizing their checkout funnels.

Time to Market
The time it took to build a single feature was unsustainable. For years we'd been bolting on experiences to a foundation that was never fundamentally meant to expand. This was a huge opportunity to reset and build a scalable system that was easier to work with and faster to develop for.

The process

A long process with many compromises

The project lasted about 4 years from inception to launch and it required dozens of compromises, a great deal of stakeholder buy-in and an insane amount of back and forth during development.

My Kohl's Design process

Before the project

Gaining years of insights from other projects

Across many projects, features and updates I was able to understand more about the business, the customer and systems that connect the two.

Some content is under an NDA.

Password
Show me

Where we started

A multi-step process in a "Buy it Now" world

The last time Kohl's redesigned the Checkout experience was 2008. We had a full decade of bolt-on experiences, added requirements and institutional knowledge spread across teams.

How we started

Mapping decision points

We can talk about screens, time on task, number of inputs and other measures but I felt the best way to evaluate our experience was to create an objective graph of the options we require and allow at each step of the checkout process.

I sat with our stakeholders to map out pain points and customer frustration. This helped us build more buy-in and start to uncover assumptions.

Some content is under NDA

Password
Show me

Talking to stakeholders

Understanding what we know

Once we uncovered the larger view, I started talking to individual stakeholders. It's amazing to see the knowledge and expertise across various disciplines. It helped to see the things we don't often talk about because we're focused on what we think is the most important thing.

Talking to customers

Challenging those assumptions

Customers build a cart over weeks or months. We had to get creative to get really useful insights. While testing prototypes, I developed an animation to reset customer expectations and mimic the passage of time.

This intentional distraction helped us understand more about customer mental models when items fall out of stock.

A Timelapse we used to test Save for Later
"I need to buy my kid new shoes and school supplies but I can only buy some of it this week. I get paid next week. I just don't have the money now."

Critiquing competitors

Building business alignment by highlighting where others fall short

Our stakeholders often compared our designed experiences with competitors. Whether it was a way to ask questions, engage with the designers or just cut corners, it was something we often had to address.

I decided to embrace this. I ran a workshop with our stakeholders and we critiqued a competitor. From that point forward, rather than copying the experience, we used it as a jumping off point.

Some content is under NDA

Password
Show me

Refining the ideas

Working with customers and stakeholders

I met so many stakeholders from Loyalty, Credit, Discounts, Marketing, Business Operations and more. We moved from rough wireframes to refined ideas and with each conversation we were able to define the intentional change we wanted to see.

I was more informed about viewpoints and concerns so we could proactively address problems before they derailed the project.

Some content is under NDA

Password
Show me

Building principles

Defining rules and guidelines

We needed to make quick decisions but it's easy to lose track of the bigger picture when you're moving fast.

We developed a system and some principles that would help us make decisions. We also did this with buy-in from stakeholders so all of us were speaking the same language and making a cohesive product.

The first North Star

Defining our direction

After interviews and concept tests, research studies and gathering metrics, wireframing and refining the branding, we finally pitched our North Star vision.

There was a lot of work to do but this was a foundation that we could build on and it was a experience we could test toward.

The Kohl's Cart on a mobile screenThe Kohl's Checkout on a mobile screen
The new Kohl's Checkout
The new Kohl's Checkout on a laptop

Building it

Experiments to prove the design

We didn't launch right away. First we had to prove this design was the best design for our customers. During the summer of 2020 we distilled our North Star into 14 rapid A/B tests.

With the scale at Kohl's we could quickly gather real customer data, refine our ideas and make a big impact.

Refining our North Star

Adding Save for Later

There was one more thing. The design team understood the importance of a Save for Later feature years before we launched but we could never convince our business partners to build it.

With our rapid tests we were able to build our Out of Stock Tray, setting aside out of stock items and allowing customers to continue to check out.

This proved to be a huge conversion driver. Before this, a customer would need to manually remove each out of stock item. That success gave the business teams confidence in our design team and our idea.

Some content is under NDA

Password
Show me
The new Kohl's Cart and Checkout experience on iPad

Why Save for Later

Lessons from 10-years of de-scoping

This was the first fast-follow, it tested our cart and checkout system and forced us to refine our North Star.

Our customers requested this feature for a decade before we built it but the company didn't see a return on investment.

We were so wrong. So many of our customers want to simply set an item aside without losing the contents of their cart. A lot of these customers live paycheck to paycheck but still need to buy things like school supplies.

Kohl's Save for Later on a MacBook Pro

Results

Huge benefits for customers

The updated experience was far more than just a new visual style. Every part of the cart and the Checkout were updated and built with the future of Kohl's in mind.

14
Weekly A/B tests
$100M
Sale increase
217%
Conversion increase
Our goal was 5%