Within a few months of my joining Kroger Digital, the organization began a massive shift from a waterfall, business-focused organization to a product-led, customer-focused organization. Our product teams were reconstructed to contain three leads—Product Manager, Product Designer, and Engineer—who would steer the product discovery. The discovery process was initially informed using the Design Sprint methodology from Google, and quickly evolved to suit our needs.

My Role

During my time as a UX and Product Design lead, I have worked on just about every aspect of the front-end customer experience, including Product Display, Search, Digital Coupons, and Cart & Checkout. As the product design lead, I was heavily involved in the conception, development, and creation of the product—from understanding the user + problem through research, to designing and assessing the proposed solution via user testing, to supporting the development team via desk checks, to seeing through the vision the UI designer and I had.

Problems We Solved

As I was the lead on multiple products over multiple years, we tackled many customer problems with this method. Just a few of the problems we found, which I will highlight later, were:

1. How might we streamline the coupon browsing experience?

   1. User's browsing was disrupted every time they wanted to view the details of a coupon. Navigating to another page reset the scrolled progress they made through hundreds of coupons.

   2. Users had a hard time understanding what products went with which coupons — testing showed that they were missing the interaction to view which products qualified.

   3. Convoluted coupon names, stemming from how the data was set up on the back-end, required several seconds of processing to understand, making quick browsing incredibly difficult.

   4. Coupon card size limited the coupons on screen, furthering the tedium of browsing.

2. How might we increase "Add to Carts" from the Shopping Cart itself? This was not in itself a user problem, but it was an ask from the business and we had to figure out if we could solve any customer problems by implementing this business ask.

   1. Using market research done by our partners at 84.51, we found that customers felt like they were lacking easy meal ideas, and saw an opportunity there.

The Process

The Design Sprint process is not something that we adhere to too strictly anymore—it's evolved as our teams learned what works best for us—but this is the general process we used throughout our product-led discovery.

Day 1 - Mapping

1. Each day has a name in the sprint book, but I prefer to break it down by the goal of the day and the deliverable you should have by the end of it. For me, Day 1 is all about defining the problem.

2. Our primary inputs were 1) User data and primary customer research from our partners at 84.51, 2) Customer usage analytics using Adobe Analytics, 3) Customer feedback, and 4) Research performed by the Kroger UX team itself.

3. Using these inputs, we'd map out a cohesive user journey and use that to identify customer problems.

Day 4

1. Design's day to shine! Day 4 was when I, as the product design lead, would work closely with our UI designers to create a high-fidelity prototype to test with our users.

Day 5

1. Day 5 is all about testing, testing, and testing.

2. I would spend most of day 5 building usability tests in our online testing platform, UserZoom, so that we could get our prototype in front of real customers to determine if it was A) usable and B) a viable solution to the user problem.

Spotlights

Coupons

While I was the lead on our Digital Coupons teams, one of the the business outcomes (called OKRs) we were asked to drive was to increase Cart Adds in our experiences by 10%.

In the coupons experience, there was a way to add relevant products to your cart, but moderated usability tests showed that this was easily missed for users browsing the coupons page.

Another common complaint users had was that while browsing they could click on a coupon to view more details, which took them to a new “Coupon Details” page. This was incredibly disruptive as we have hundreds of coupons on our site, and when navigating from the Coupon Details back to the Coupons List page, they’d go back to the top of the list and have to start their scroll over again.

We decided to completely redesign the coupon cards with these user problems in mind. To make the ability to shop for products much more prominent we made it the secondary CTA on the cards. Additionally, we nixed the coupon details page altogether and made it a modal, so users would retain their context while browsing coupons.

After redesigning the coupon cards, we saw an increase in Cart adds from the Digital Coupons experience by 535% (seriously, we triple checked that number.)