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 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.
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.
Redesigning existing components was the quickest way to improve the experience and bring visual consistency.
Key opportunities were bringing consistency to typography, layout, and color application.
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.
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.
Consistently indcates that something is interactive in a way that is not intrusive or adding complicated UI elements.
Ties content together to tell a story of connected components. Also, using the brand blue helps introduce a subtle branding element.
Applying the new photography styles sparingly & intentionally freshen the experience.