Kroger is one of the largest supermarket chains in the US, providing grocery and pharmaceutical needs to millions of customers and offering order pickup, delivery, or in-store shopping. This design critique follows a user as they interact with Kroger’s app while shopping in-store.
Kroger Home Screen
Kroger uses its app’s home screen to highlight available deals, a search feature, and its main bottom icons: Shop, Save & Health. The home screen is the user’s first encounter with the app, and while it includes solid signifiers, like the search button, the overall visual hierarchy isn’t ideal for most users. Three key areas of concern on the home page are the search button placement, inconsistent icon labeling, and the feedback from the coupon add-on.
Search
Kroger uses a button to activate the search feature; however, placing it over other important information could lead to “human error,” or better yet, a design error, as a user could slip and click the search button while trying to interact with other information.
Recommendation
Best practice is to place the search bar at the top of the page, where users expect it. Product callouts for major grocery categories would also help users search more easily.
Labeling
Kroger uses numerous icons on their homepage, many of which are easily recognizable; however, inconsistent icon labeling can lead to many problems. Three of their icons are clearly labeled: Shop, Save & Health. The remaining icons rely on a mix of knowledge in the head and knowledge in the world. The account icon is easily recognizable for most users, but the AI icon is newer; though some may recognize it, many users are not fully aware of what it is. The pickup/delivery icon and the cart icon are somewhat recognizable; however, it is not fully clear what they are. For example, the shopping cart icon is also the Kroger brand icon, so many might not read it as My Cart.
Recommendation
To maintain consistency, all icons should have a label, even the more recognizable ones. Replacing the pickup/delivery icon with a map icon to set the user’s home store would also help, as it would make it clearer that the user is viewing information for the store they expected.
Coupon Add-ons
Kroger allows customers to add discounts directly in the app. This feature provides feedback; however, a few best practices could improve the experience. Currently, users may not know that they need to click the box to add the discount. The interface doesn’t clearly indicate this, and once clicked, other than seeing a checkmark in the box, some users may not know the coupon has been added, widening the Gulf of Evaluation.
Recommendation
There are a few ways to address this concern. First, we need a better way to inform users that they must click each box to save the offer. This can be solved in a number of ways, but for this recommendation, a simple header over the section will have to suffice. Second, the action needs better feedback. Once a user clicks the checkmark, either show a pop-up stating “Coupon Added” or display numbers on the save icon indicating the savings added.
Item Detail Page
Kroger’s item detail page does an excellent job of displaying all relevant information. The page’s clear mapping is strong, with clear signifiers throughout, including the back button to return to the main page, dots to indicate more image options and enable scrolling, and an indicator checkbox section for savings. This layout supports affordability and lets users get thorough details on each item. In the example of a user using the app in-store, adding the item location (right above the price) is very beneficial, though drawing more attention to this area would also help. This could be done by adding a color bar to help it stand out from other information on the page.
Conclusion
Kroger’s app may be causing the company to lose potential users, but a few structural layout changes could help by focusing on visual hierarchy instead of over-saturating the app with coupons and deals.