PHASE 1: Project Discovery
Problem
We identified a challenge where customers were searching for each product individually to assemble their shopping carts. Consequently, our AOV (Average Order Value) and ABS (Average Basket Size) metrics experienced a decline for the quarter. Moreover, this approach led to an uptick in customer complaints, highlighting a need for enhanced personalization within the app.
Primary Objective
Create an exclusive digital grocery shopping experience personalized hub, where customers are engaged and connected with the app through product recommendations, recent shopping behavior, and account information.
Solution
Craft a customized user experience with a focus on our valued customers. This tailored journey will seamlessly integrate UI elements such as "Start Your Cart," "Account Information Cards," "Your Sale Items," and engaging carousels like "Deals for You" and "Because you shop for..." to elevate the overall user experience.
Metrics to Track
1. Number of page visits view the new FFY page (in experiment group)
2. AOV and ABS metrics with new page VS without page (A/B test)
3. Retention: Number of customers repeatedly visited the FFY page on a weekly basis (more than 1 visit in the 7 day period) and % of total customers that visited.
PHASE 2: Competitive Analysis
In the second phase of crafting the Fresh for You experience, our focus shifted towards the foundational aspects of user experience (UX). Our approach involved conducting a competitive analysis, delving into both direct and indirect competitors of Kroger. Our aim was to gain insights into how these rivals are personalizing the grocery shopping journey for their customers. Through design feedback with our stakeholders on of the UI of Kroger's competitors, we gathered valuable research that helped propel us into to the next phase of the Design Thinking Process.
PHASE 3: UX research
After conducting a competitive analysis to understand what our competition is doing in relation to personalization, we decided to jump into UX research, to understand our customer's and their needs. We kicked off by digging through our database to find existing research that other squads across Kroger have completed before. Once we got the lowdown on what we already had, we jumped into conducting a Baymard study to gather a deep dive on user behavior and to stay updated on how user behavior evolves over time. After the Baymard study was conducted, we gathered information on how Kroger customers feel about personalized experiences, specifically relating towards sorting and filtering.
Post-Baymard exploration, we transitioned into a comprehensive Usability Testing phase. This encompassed an array of methodologies, including Customer Interviews, UserZoom studies, Iterative Prototyping, and more. Throughout this process, it was extremely important to remember that conducting UX research is an ongoing process, and staying connected with our users throughout the product lifecycle is crucial for continued success.
PHASE 4: wireframing
Upon completing the UX research phases and gaining valuable insights into our customer's needs, we delved into the creative realm of wireframing. Our design journey began by crafting two distinct versions tailored to meet the specific needs of our customers. The ultimate goal was to fashion a personalized grocery shopping hub, inviting customers to embark on the Fresh for You experience, where all their essential grocery items could be effortlessly explored.
Guided by our wireframing explorations, we honed in on a particular option and subjected it to an A/B test, gauging customer attraction and preference. As we ventured into the future of the Fresh for You experience, it became evident that customers were drawn to several standout features embedded in these wireframe designs. Noteworthy among these were the intuitive "Account Info Cards" and the engaging "Shopping Insight Pills."
Phase 5: Delivery & release
After completing our design journey through a competitive audit, UX research, Usability Testing, Wireframing, and Prototyping, the moment had arrived to unveil and launch the Fresh for You experience. Our design was truly designed in the shape of the customer, tailored towards their preferences and needs for grocery shopping. Think of it as your very own personalized hub of information that you can travel to for every shopping visit.
The design showcases a curated set of components, each proven to capture the attention and preference of customers in our multitude of usability tests. The design of the Fresh for You experience is compatible across iOS and Android (soon to be featured on desktop). Listed below are the following features that are within the experience.
- Start your Cart
- Because you shop for {Taco Shells}
- Savings/Fuel Points Account Info Cards
- Your Sale Items
- Deals for You
- Because you shop for {Private Selection}:
- Start your Cart
- Because you shop for {Taco Shells}
- Savings/Fuel Points Account Info Cards
- Your Sale Items
- Deals for You
- Because you shop for {Private Selection}:
"Because you shopped for {Taco Shells}"
Elevating the Fresh for You page to new heights of personalization, we seized an opportunity to enhance customer engagement through the introduction of the "Because you shopped for {Product}" feature. This innovative component empowers customers to explore a curated selection of products tailored to their unique purchase history.
Consider a scenario where a customer had previously purchased Taco Shells. Through meticulous data tracking and metric analysis, we discerned an insightful pattern. Recognizing the potential to elevate their experience, we introduced a dynamic range of relevant product suggestions, transforming their culinary journey.
In response to the customer's Taco Shells purchase, our system adeptly presented a selection of companion products such as Refried Beans, Sour Cream, Salsa, Cheese, Avocado, and more – essentially, all the essential ingredients to complement their Taco creation.
The outcome is a profoundly personalized page, meticulously designed to deliver an experience that resonates with the customer's unique preferences and purchase history, culminating in a truly individualized shopping adventure.
"Frequently Bought Together" Product Carousel
After a customer goes to select "Honey Nut Cheerios" and adds the product to their cart, a "Stepper" component opens up on the bottom of the product card. Once this "Stepper" component opens up, a "Frequently Bought Together" product carousel is displayed throughout the user interface, offering customers the opportunity to seamlessly continue their shopping experience by selecting products frequently purchased together.
The reasoning behind designing this carousel is to drive "Average Order Value" and "Average Basket Size" for Kroger, providing an additional opportunity for customers to engage just before reaching the checkout page.
One Metric that Matters: Increase average basket size from 33.5 to 34+ products.
Summary: By launching this "Fresh for You" experience in Native with personalized product recommendations, customers will engage more with Kroger's digital products' and spend more money with Kroger long term.
Summary: By launching this "Fresh for You" experience in Native with personalized product recommendations, customers will engage more with Kroger's digital products' and spend more money with Kroger long term.
Next Steps: collaborative design workshop (FFY Desktop)
As we rolled out the Fresh for You experience on both iOS and Android platforms, we jumped right into starting to plan FFY for Web version (Desktop, Tablet, Mobile). The ongoing journey involves further refining and developing Fresh for You, with our focus shifting to tracking existing metrics and performance. This move enables us to gain valuable insights and intelligence, guiding our design decisions for the upcoming Web release. Currently, we are actively engaged in collaborative design workshops in Mural, delving into the intricacies of this pivotal study. Stay tuned for the next chapter in the evolution of Fresh for You!
