Native Home Redesign
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.
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.
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.
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.
