Surfacing Product Recommendations

Making product savings visible

Impact: Bringing a personalized saving experience to grocery shoppers for payment and services products.

Methods: UX/UI design, workshop and survey

Timeline: 4 months

Certain details of this case study have been modified to protect proprietary information.

Product recommendations design screenshot

Background

At a national grocery retailer payment products and services like credit cards, money orders, check cashing and money transfers were buried deep in the website and mobile app. Customers may not have known that these products existed and the potential savings that were tied to these products.

At a national grocery retailer, employees calling into stores to report they won’t be able to work was a demanding process. Employees were making multiple calls to stores trying to reach managers and sometimes going through customer service to reach them. Managers had to go through a multi-step process to find a replacement.

The impact of having an unfilled shift can cause stress on the store and create a potential negative customer experience. Beyond operational pains, there wasn’t any standardization around how employee absences were documented.

Goal

Bring more visibility to these products while making it easy for customers to understand the savings tied to them, by recommending relevant products. Present savings in a way that is meaningful to customers.

Aligning on product direction

Since this was a new feature that was going to be added to the Kroger website and app, it was important for our immediate team to align on product direction. As lead designer on this project, I collaborated with the product manager to facilitate discovery activities with our development team that helped explore what other companies were doing in terms of product recommendations and possible solutions. I also gathered my own design inspiration in the early project stage.

I worked in partnership with the Design Lead on the team. I led the research and also contributed to the early product definition and workflow design.

Advocated for in-store research before project kickoff workshops took place.
Lead research efforts in creating interview guides and synthesizing findings in Dovetail and presenting to the business.
Translated research insights into workflow requirements.
Developed current state and future state process flows, helping identify and address risks and gaps.
Defined interaction requirements needed for shift call out and replacement workflows.

Cross-functional collaboration

Designing a product recommendation feature that also presented customized savings to customers required many teams to come together. Aside from working closely with business partners, I also collaborated with copy writing, legal, marketing, and data science.

I worked in partnership with the Design Lead on the team. I led the research and also contributed to the early product definition and workflow design.

Advocated for in-store research before project kickoff workshops took place.
Lead research efforts in creating interview guides and synthesizing findings in Dovetail and presenting to the business.
Translated research insights into workflow requirements.
Developed current state and future state process flows, helping identify and address risks and gaps.
Defined interaction requirements needed for shift call out and replacement workflows.

Challenges with card design

Individual products were going to be recommended to customers and I though the best way to do this was by having individual product cards. Because there wasn't an existing card element that could fit this use case, I designed a new one. With starting with a mobile-first design, it was essential to show the customer enough text to understand the product to engage further with it.

A big constraint was the limited space to work with. Bringing in project partners such as UX writing and Marketing was important in helping make sure the messaging and content was on brand and concise.

I worked in partnership with the Design Lead on the team. I led the research and also contributed to the early product definition and workflow design.

Advocated for in-store research before project kickoff workshops took place.
Lead research efforts in creating interview guides and synthesizing findings in Dovetail and presenting to the business.
Translated research insights into workflow requirements.
Developed current state and future state process flows, helping identify and address risks and gaps.
Defined interaction requirements needed for shift call out and replacement workflows.

Showing savings in a meaningful way

One way to appeal to customers is to show them the savings they could save with each product. In partnership with the research team, a survey was sent out to customers and non-customers of the store to learn more about savings and budgeting habits. This would help with design decisions such as how to display the savings on the cards and answer critical question that our business partners had.

"Do customers value seeing savings from all products or from individual products?"

Survey research showed it was best not to show a total product savings, since it wasn’t easily understood by most customers.

We also learned from the survey, showing a savings on a per month basis was also best since over half of participants manage their budget on a monthly basis

I visited local grocery stores and interviewed a total of 11 employees and managers. One finding that impacted the design was that in order for a manager to fill a shift it wasn't as simple as picking any employee.

There were many factors that needed to be considered such as employees with the right skillset or considering some roles have specific contracts tied to them. Finding out this information early meant that it could be addressed early during requirements gathering and weaving this into the chatbot’s design.

This is an example of showing the total of savings across products.

Research impacts and final designs

The final designs include designing for iOS, Android, mobile web and desktop. There were many iterations of the designs that built upon each other. The initial design did not include any product savings and over time the team was able to develop a way to show savings based on individual household.

Our business partners had a general sense of the call-in experience, but the research our team did, uncovered nuances and details that they hadn’t considered.

To translate a manual process into a digital format, I created a current state journey map and a future state journey map to show what new processes needed to take place.

I walked the business and the development team through both maps, and showed where I found gaps in the new process and segments in the process that needed input. This brought clarity for product requirements and reduced risk of missing processes during the development stage.

Survey research showed it was best not to show a total product savings, since it wasn’t easily understood by most customers.

We also learned from the survey, showing a savings on a per month basis was also best since over half of participants manage their budget on a monthly basis

A custom card component was created to accommodate the product layout.

With a logged out user experience, I included a Sign-In button and UX writing provided copy to encourage people to sign in so they would get a more personalized experience.

Outcomes

This tool was shipped and visible both in the Kroger app and in the Payments and Services section of the website. With the launch on the website, it was also present on 18 affiliated Kroger owned branded sites.