redesigning product cards

major us grocery retailer

 

ListFinal.png
 
 

my role

Senior Product Designer for mobile shopping experience team.

my team

Collaborated with 1 product manager & 2 tech leads & 12 developer pairs. Development team was both onsite & offshore in Chennai, India. Regularly collaborated with larger mobile design team & web shopping team.

skills & tools

Facilitation Research Prototyping Usability Testing A/B Testing Interaction Design Sketch InVision UserZoom

timeline

2018-2019 (9 months)

 

tl;dr

Kroger is one of the United State’s largest grocery retailers. As major competition like Amazon entered the grocery game & raised the stakes, it was time for Kroger to evolve or go bust. Kroger’s mobile app launched in 2012 with a primary focus on their in-store customers. Over the years, they slowly introduced grocery pickup & delivery options to develop an e-commerce customer base. In 2018, Kroger’s mobile app serviced 5.6M monthly average users & was in need of major design changes in order to prioritize e-commerce goals & maximize revenue gains. ThoughtWorks was brought in to help champion the path forward.

In 9 months, my product team was able to pave the way for iterative & data driven design by tackling major design problems & embracing business revenue goals for the mobile shopping experience. We accomplished the following:


Increased coupon loads by 1% & increased coupon views by ~8.5%.

Increased mobile app revenue from $44,763 to $7,459,106 in 1 quarter (Q2).

Introduced categories of products resulting in 1,472,455 views of categories per week with our search view numbers intact & unharmed.

The product card redesign was the first major step for our team to accomplish some of these goals.

 
 

my process

Binocular A color styled icon from Orion Icon Library.

discovery

Understand & learn from the people using my experiences. Uncover the problems they face & determine which are most important to solve. Find opportunities for how we can make our experiences better for people.

Medical Research A color styled icon from Orion Icon Library.

design exploration

Explore design ideas & hypotheses to solve identified problems. Experiment & test ideas to find the best direction forward. Understand the use cases & learnings of ideas to iterate even further.

Vector A color styled icon from Orion Icon Library.

deliver & measure

Work with the team to build it the right way. Iterate on designs to further consider delivery scenarios & constraints. Refine the details to create meaningful experiences. Release & measure designs continuously.

 
 

discovery

 

problem spaceunderstanding the why

The Kroger mobile shopping experience was struggling to strike a balance between 2 large customer groups: In-store shoppers & e-comm shoppers. We needed to consider both the needs of the business and the needs of our customer groups.

 

BUSINESS NEEDS:

The business needed the mobile app to prioritize the e-comm experience to compete with their competitors & increase Add to Cart numbers.

E-COMM CUSTOMER NEEDS:

E-comm customers often complained about confusion between ‘Add to List’ & ‘Add to Cart’. They frequently mistook the ‘Add to List’ button as the ‘Add to Cart’ button, which made for a frustrating experience. They needed a simple shopping experience that made adding to their cart seamless.

IN-STORE CUSTOMER NEEDS:

Loyal in-store customers made up the base of mobile app usage. In-store customers often used the shopping list to prepare for upcoming shopping trips. They needed to quickly add products to their lists while searching in the mobile app.

 
Old Product Cards

Old Product Cards

InStore.png
 
 
Ecomm.png
CardSort.png

initial research

card sort & findings

We spoke with 5 e-comm customers to understand what type of information was most important for them to see first when they shopped for groceries.

Then, we held a card sort via UserZoom & asked a larger subset of 50 e-comm grocery shoppers to rank types of information that was most important to them during their shopping. 

We learned:

  • Price is the most important piece of information to customers, followed by availability, product names & images.

  • Product cards were missing some of that critical information today - Product Availability

  • E-comm customers did not think the ‘Add to List’ function was that important in the context of other valuable information.

the goalsbalancing the old & new

We needed to reevaluate how we were presenting our products to our new e-comm customers. We needed to eliminate the confusion between ‘Add to Cart’ & ‘Add to List’ without angering our loyal in-store customer base that were heavy shopping list users.

How can we balance multiple customer needs on the product card?
How might we shift the focus of product cards to prioritize e-comm customers & drive ‘Add to Cart’ sales?
How might we make changes without disrupting our loyal customer base of in-store shoppers who’s app usage is heavily focused on shopping list? 
 

design exploration

 

gather ideasbrainstorming & ideation

Based on our research findings, we decided to change the product card information hierarchy to highlight the most important information for e-comm customers:

Price

Product image

Product name

Availability of product

The key problem we wanted to focus on for sketching & ideation was how to balance both ‘Add to Cart’ & ‘Add to List’ on the product card. Our team had a hypothesis that we needed to better differentiate the two actions.

We spent time sketching & sharing different ideas for how to handle ‘Add to List’ in a way that would not cause in-store customers to feel de-prioritized.

 
visual iterations of ‘add to list’ solutions

visual iterations of ‘add to list’ solutions

 

prioritizationfinal concepts & defining success

We reviewed our ideas as a team & dot voted on our favorite concepts to move forward with testing. After voting, we did a storyboard of each idea to further map out the interactions we wanted to test.

We also decided we would determine a concept was a success if:

  • The in-store customer was quickly & easily able to understand how to add a product to their shopping list.

  • The in-store customer felt positive about the new ‘Add to List’ interaction. Did it give them delight or make them feel excluded?

  • The customer did not feel like they needed to go to the product details to find more information about how to ‘Add to List’.

 

Add to List V1

v1 Pros:Gives customers the ability to have control & choose which list to add a product to & specify a quantity. Immediately educates the customers on what icon representation means as a new screen appears.

v1 Cons:A multi-step interaction - when adding multiple grocery items this could become tedious for customers.

Add to List V2

v2 Pros:Simplifies the ‘Add to List’ interaction by making it a binary - similar to ‘favorites’ seen on other e-comm sites. Contains the same language ‘List’ to maintain familiarity with in-store shoppers.

v2 Cons:While familiar in language, the interaction might fade into the background due to heavy use of font - might not be as noticeable as other icon-based interactions.

Add to List V3

v3 Pros:Similar to V2, simplifies the ‘Add to List’ interaction by making it a binary. Less steps than V1 & this idea provides the same capabilities as ‘Add to List’ action today - increasing quantity at every tap.

v3 Cons:We weren’t sure if customers would be able to immediately understand the new icon was meant for adding to your shopping list.

 

evaluatecustomer concept testing

We tested all three designs with 10 e-comm & 10 in-store shoppers via UserZoom unmoderated testing. Would both sets of our customer base (e-comm & in-store) be happy with the new design? How would in-store shoppers feel about changing the ‘Add to List’ interaction in general? Would they understand the new designs?

All 3 concepts tested well, but V1 & V3 had slightly faster completion & in-store shoppers responded very positively to the new icon interaction. Our team decided to move forward with V3 & add further enhancements to eventually move to V1 if customers felt like they needed more control over their shopping lists (specify & adjust quantity, choose what list to add to).

 
 

deliver & measure

delivery prepexplore scenarios & visual updates

The product card was a heavily shared component across several areas & we needed to socialize our new design with other teams to ease any concerns they might have & consider each of their scenarios.

We collaborated with our Kroger Design System team to finalize an Add to List icon & incorporate some of their upcoming design changes - the shape of buttons on the mobile app.

We also decided as a team to change our product cards to be actual cards that better visually distinguished each product. We had big ideas for the future of our product cards and felt this change was crucial to our vision.

 

Scenarios

Mega Events

Cart

Past Purchases

Search

Shopping List

Substitutions

Qualifying Products

Add to List Error Handling

ProductCardScenarios.png
 
 

deliver & measurea/b testing

After a successful round of testing, we felt confident that our new design was meeting the needs of both types of customers. 

But why not be safe? It was an opportunity to try out an A/B release. We wanted to be sure that the redesign did not hurt  ‘Add to List’ numbers.

We released the new design to a smaller section of mobile app markets to be certain that the new design would not negatively impact ‘Add to List’ numbers.

After the initial small release, we monitored analytics for several weeks before finally making the decision to go forward with a full release, as no negative impact had been seen on ‘Add to List’ numbers.

A (OLD design)

A (OLD design)

b (NEW design)

b (NEW design)

 
 

iOS final designs

 
The success message was onboarding we added for the new ‘Add to List’ icon & only appeared the first time a customer added an item to their list.

The success message was onboarding we added for the new ‘Add to List’ icon & only appeared the first time a customer added an item to their list.

 
 

android final designs

The success message was onboarding we added for the new ‘Add to List’ icon & only appeared the first time a customer added an item to their list.

The success message was onboarding we added for the new ‘Add to List’ icon & only appeared the first time a customer added an item to their list.

 
 

learnings

 
Social A color styled icon from Orion Icon Library.

collaboration is key

The product card component was shared across multiple product spaces in the mobile app. Being responsible for a component that impacts so many teams requires a great deal of communication & collaboration. We had to think about our design decisions from many different perspectives & ensure they did not negatively impact others. Our most important learning from this is proactive collaboration and inclusivity is so important. If you lead with inclusivity, people will respect your decisions!

Items List A color styled icon from Orion Icon Library.

designing & releasing iteratively

Due to the impact of our product card component, we chose to design & release iteratively. We took this approach to allow for:

  • Continued testing on the parts of our design that needed more validation

  • Faster time to market for pieces of our design that we felt confident in

Ultimately we learned that releasing & designing iteratively gave our team the flexibility to explore as many design options as possible, release value to our customers quickly, & build a better product overall.

 
 

conclusion

Our work was a success in that we were able to prioritize the business focus of e-comm customers while not upsetting our loyal customer base of in-store shoppers. We were able to balance both needs & prioritize information that was important to both sets of customers. We also started to lay the ground work for future ideas for the product card (coupons & monetization) by eliminating low priority information that was utilizing valuable real estate. Read more about how our team continued to accomplish our goals: Coupons & Monetization