Kohl's Cart and Checkout case study

Summary

Framing the problem

A two-year checkout redesign had stalled. I shifted our approach to get it moving.

The design team had produced a comprehensive checkout vision, but without cross-functional buy-in, nothing was shipping. Instead of defending a finished artifact, I facilitated alignment sessions with Product, Engineering, and Business stakeholders to identify which elements of the original vision could be validated through smaller experiments. That pivot from a monolithic redesign to an iterative, research-driven roadmap changed how the team worked for the next two years.

We started with a multi-step checkout 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.

The team built a wireframe

This was delivered before I started, the plan was for me to work through the implementation with our engineering and product partners. Those partners had significant hang-ups that would keep the projec from moving forward.

I had to pivot from implementation support to usability testing and discovery

The wires were rough but there were some bright spots.

This was not a build ready document. We need to handle dozens of pricing use cases, we needed error states. Most of all though, this was a huge departure from the current state with very little tangible rationale.

Kohl's checkout components wireframe image

Kohl's post-purchase account creation wireframe image

Stepping back helped us identify the pain points and opportunities.

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.

I spent time talking to stakeholders and sharing knowledge.

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.

I led a competitor critique to align our business stakeholders.

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.

Kohl's competitive analysis wireframe image

We had 3 paths to understand our customers.

Usability tests let us talk to customers directly.

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.

Reading legacy code and documentation.

First, I 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.

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

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.

14 A/B testing gave us a wealth of data.

This helped us build our vision in pieces. Refining the vision and the tactics as we learned.

The cart

The Checkout

The Confirmation

Key Improvements

Free and easy pickup

We let customers switch their entire order to pickup with one tap. Before this, you'd have to fumble about in a menu for each item. Now you can pick up anything that's available in one location, on one day.

The out of stock tray

This was our precursor to Save for Later and it was there to mitigate the frustration of out of stock items. Without this feature customers would have to find and remove each out of stock item from their cart before entering Checkout.

The digital receipt

We consistently saw customers doing math and trying to understand the specifics of their reciept. We also heard from our Customer Service about the importance of SKU numbers. Many of the calls involved Customer Service representitives adding items to a cart and checking out on behalf of the customer.

Updated earnings

Our loyalty program underwent a rebranding and rebalancing during the Checkout redesign. We simplified the language and visuals to match while providing a quick and easy explanation for customers unfamiliar with the program.

Pickup map

There are often multiple Kohl's stores in a given city and we heard a Voice of the Customer theme about showing up at the wrong store. This was even worse when picking up items at multiple stores or on multiple dates. Providing a map for each store pickup location helped customers slow down just enough to make sure they were shopping at the right store.

Easy apply gift cards and Kohl's Cash

Customers often save gift cards and Kohl's Cash so they can make a big purchase more affordable. We created a way to easily apply Kohl's Cash with one click or manage it in a more granular way.

Scan cards, promo codes or Kohl's Cash

Promos and Kohl's Cash are often mailed or handed out at the register. Redeeming these online was huge conversion driver but the process of typing in 12 to 20 letters and numbers was a source of frustration. Couple that with an increasing number of exclusions and you have a customer confused about whether they typed in the wrong code or the promo code just doesn't apply to their items.

Showing the benefits of Kohl's Charge

Kohl's Charge is a powerful retention tool for the business an a source of steep discounts and special promotions for customers. We found a balance between highlighting the Kohl's Charge and reducing the effort to switch without adding clutter to a complex page.

Finalizing

I scaled up from mobile

To tablet

And finally, our desktop experience.

Results and next steps

After 10 years, we finally brought Save for Later to Kohl's.

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.

This totally changed how customers shop at Kohl's.

We thought this would hurt conversion but we were wrong. 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.