Enhancing the Kroger’s Savings Experience
.jpg)
UX Mastery Course
Types of Savings methods
What
Ensuring users can easily locate and utilize digital coupons, fuel points, and other savings opportunities.
Improving discoverability of savings methods.
Consolidating the Kroger design system.
Streamlining the information architecture in the savings journey.
Project Scope
Difficulty finding savings methods.
Visual inconsistencies in the design.
Unclear Navigation Pathways.
Pain Points
Multiple ways, what is the difference between ‘rewards’ and ‘savings’?
Why are fuel points a part of both?
There are multiple access points across the app which create confusion and cognitive overload for users.
The use of color, icons (color & size), font type and font size throughout the application contains a few inconsistencies. This muddles font hierarchy and meaningful branding.
How: Key Decisions & Design Changes
Savings Page
.png)
Adding a Search Bar on coupons page
Allows for immediate finding of a particular item coupon.
Making filter chips visible from the coupons page
Every time the user clicks various filter checkboxes, the filter chips populate on the screen, allowing the user to see all available coupons. This simplifies the accessibility of searching and filtering of coupons.
Eliminating horizontal scroll
The current design of the Kroger Savings menu made the users go through a lot of horizontal and vertical scrolling to find the coupon that they desired. The introduction of the tab component at the top of the savings page allows easy access to all the forms of savings opportunities available to users.
Adding a floating 'Clipped Coupons' button
The sticky button named ‘Clipped Deals’ on the bottom right of the screen is an easy way to access all the clipped deals on the Kroger app.
Differentiating coupon and product item cards.
Changing the color of the ‘clip’ button to yellow. The color change, along with the card shape change, allows the user to make a visual distinction between the coupon cards and the produce cards quicker.
Adding a Clipped interaction for the Clip coupon button.
Introducing a micro-interaction to show different states of the button from unclipped to clipped, as opposed to the coupon disappearing.
Account Page
.png)
Less clicks to get to the Kroger card
The location and the purpose of the Shoppers Card was not very intuitive at first. Many people missed the card they did not realize they could horizontally scroll.
Thus, we redesigned it as a tab component with the bar code immediately visible for a better in-store scanning experience.
Accessing the Kroger Card through the hamburger menu
Kroger card can be accessed in one click as opposed to two clicks by integrating the profile into the hamburger menu.
Larger sections for improved readability
Cleaner interface with more white space makes the large amount of menu items less visually overwhelming.
Home Page
Moving Shop By Aisle section upwards
Shop By Aisle has been moved further up as opposed to a random location in the middle.
Reducing number of card options
Card links have been incorporated into the hamburger menu with the exception of Order Ahead, as shoppers expected to see it on the home page.
Retaining weekly and topical information in the Home page
This Week’s Top Ads, Weekly Ads and Weekly Digital Deals were some of the most common items shoppers wanted to see in the home page.
Cart Page
Indicating coupons used and coupons missed for cart items
Offer and coupon details for each item were incorporated into the item card as opposed to below all the items. Introducing the colored coupon tag makes potential offers hard to miss.
Reducing 'recommended items' action step
The recommended items lived in an extra step above the checkout footer. Although recommended items might add more clutter to our redesign, we added it. If the items were personalized to users, there is a more visible push for users to buy more products.
User research
Interaction Map
.png)
Unclear Navigation Pathways.
Multiple ways, what is the difference between ‘rewards’ and ‘savings’?
Why are fuel points a part of both?
Inconsistency in the design.
The use of color, icons (color & size), font type and font size throughout the application contains a few inconsistencies. This muddles font hierarchy and meaningful branding.
Difficulty finding savings methods.
There are multiple access points across the app which create confusion and cognitive overload for users.
Insights from interviews and usability tests
What matters most in Savings - Discoverability, Attractiveness, & Tracking
Discoverability: Currently, Savings is confusing —users are overwhelmed by the options they keep seeing everywhere.
Attractiveness: People don’t want to spend a lot of time trying to maximize their savings. They want savings opportunities according to personal preferences.
Tracking: Keeping track of the total savings so far on the app incentivizes the user to save more.
Shoppers want to find the exact products they are looking for.
Most users exhibit two characteristics — they jump immediately to searching for things they require, and they hate having to continuously scroll to find their desired product. Apart from the search bar in the home page, users expressed desire to include a search bar in the ‘Savings’ page, ‘Sale Items’, ‘Shop’ page and ‘Start your Cart’.
The location of the Kroger Card is not very intuitive.
Some of the most common areas people expect the Kroger Card to be in is the Savings Tab in the bottom navigation and Rewards section from the hamburger menu. The location of the Kroger Card in Savings Cashback is confusing, as clicking on the card redirects to the ‘Savings’ page.
“There are so many things — ten types of savings that I should go through. There should be one place where all the items are there."
.png)
