Kroger App Redesign
Kroger App
We all need to shop for food. I, personally, shop at Kroger because I love their savings. However, the Kroger app is extremely difficult to navigate, especially when you are trying to utilize coupons offered. Here’s a redesign idea for Kroger’s app with a focus on adding coupons to membership cards through the app.
Original Home Page
Immediately, the user is overwhelmed with options to click through which all take you through different user journeys throughout the app. This is another app that does not include a logo on the Home Page. The tab navigation options are redundant.
New Home Page
I added the Kroger brand logo to the main page and designed a cleaner layout for the user to focus on featured options. I created a new tab navigation which is more aligned with other shopping apps with clear, individualized options. I added a new feature in the tab menu to take the users to the coupons page with a focus on utilizing a QR scanner to scan items to search for coupons while shopping in the store. This is one feature I would love to see in all shopping apps and I’m happy to present it here.
Original Coupon Page
The coupon clip option in the current Kroger app requires a lot of user scrolling with what seems like endless options. There is no option to search or filter coupons which is frustrating for the user who knows what they want to purchase with a coupon. A separate tab takes the user to the weekly adds page. The weekly adds can be visually overwhelming and hard to read which limits accessibility to differently abled users.
New Coupon Page
The new coupon page I have created allows users to type-search items they want to purchase or scroll through items broken down into departments. This page is easier for the user to read and is more visually appealing. The user can also choose to scan the bar or QR code of an item to load the discount for the item onto their member card used at checkout for an improved user experience.
Original Search Page
The original search pages for the Kroger app are visually overwhelming with options to click through and the elements compete for users attention. Too much and too small of type-font limits accessibility for users with visual and mobile impairments.
New Search Page
I redesigned this page with accessibility in mind. I wanted to create a cleaner layout and limit the clickable elements to make space for users with limited mobility and limited visualization.
Reflection
Redesigning the Kroger app with the end user in mind was beneficial for me. I had to think outside of the box when adding a new feature of scanning codes to add discounts to the member card at checkout. I had to brainstorm how to incorporate this feature into a design that emphasizes the desirability of such a feature. This was a delightful redesign experience. I hope all stores that offer discounts can incorporate a new scanning feature like the one listed above moving forward.