Pickup - Logged In - Post-Order Copy 12.

Native Home Redesign 

View entire case study here.

 

Kroger partnered with it's first AOR and finally had a true brand. My job was to turn around a new homepage re-design that minimally impacted the user experience in 2 weeks.  Knowing that, I proceeded to assess all current components and found all the opportunities we could refine the UI to get maximum impact with minimum lift for developers and least experience change for users.

The Problem

The current home screen was lacking in

typographical hierarchy, it used imaegry that was

not reflective of the brand, and generally felt

cluttered, inconsistent, and hard to navigate.

Screen Shot 2021-05-01 at 8.48.58 AM.png

Content Restructure

One opportunity for improvement without causing too much of a technical lift was to re-order the existing components in a way that fit the experience we wanted to build for our customers. I landed on Inform, followed by Shop & Save, and finally Explore. This ordering reflects what customers need to see, followed by what they want to see, and lastly what they might enjoy seeing.

 

Inform is the core of personalization. Time sensitive content like order status, personal content like previous orders, and personalized savings like Fuel Points & Kroger Pay are surfaced here. Quicklinks here offer a flexible way for customers to easily access these items, and also the ability for business to potentially add a temporary new link as needed for any urgent priorities.

 

Shop & Save is ultimately why the customer is here. Leading with Start My Cart and My Sale Items both ties in nicely from the previous section that is heavily personalize, but also elevates items customers are most likely here to purchase, providing a better UX. Ending with the more browsing mode of shopping by department then leads smoothly into the Explore section.

 

Explore is the space where business can best elevate their needs and additional resources for the customer can be added. This belongs at the bottom as it is typically not why the customer is there.

Screen Shot 2021-05-01 at 9.00.45 AM.png

Design Ideation 

Redesigning existing components was the quickest way to improve the experience and bring visual consistency.

 

Consistency

Key opportunities were bringing consistency to typography, layout, and color application.

Branding

Key branding elements like color-blocking, falling food photography, and elevation were all great opportunities to infuse the new brand while requiring little development effort.

Pickup - Logged In - Post-Order Copy 12.

Final Design

Typography

Left aligned all copy, introduced heavier weight variants into the home screen, right-aligned all carousel CTAs to allow for easier accessibility, and streamlined type sizes.

Elevation

Consistently indcates that something is interactive in a way that is not intrusive or adding complicated UI elements.

Color Blocking

Ties content together to tell a story of connected components. Also, using the brand blue helps introduce a subtle branding element.

New Photography

Applying the new photography styles sparingly & intentionally freshen the experience.

Frame 9.jpg