redesigning product cards
major us grocery retailer
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
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.
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.
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.
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.
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.
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
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.
iOS final designs
android final designs
learnings
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!
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