top of page
Picture1.png

Service Design, Mobile UI - Student Project Fall 2022
Sponsor: Poppe Guthrie (Kroger UX Designer)
Role: UX Designer (research & service and UI design)

Kroger is a company of grocery retail stores that are primarily based around the Eastern United States. Kroger's mission is to provide fresh and good quality food for consumers at a reasonable price. Kroger is also making positive environmental and sustainability efforts, including the goal of eliminating food and operational waste.

Screenshot 2024-03-28 at 11-36-08 Impact – The Kroger Co.png

Mission

Kroger is taking large leaps towards their Sustainability Initiative, which is defined by their "Zero Hunger Zero Waste" Action Plan. One of Kroger's goals to help achieve this is to go completely bagless by 2025, in part by introducing a reusable tote program for shoppers.

 

For this project, my team specifically focused on reducing bag waste in the store curbside pickup process by offering a reusable tote for groceries that customers could borrow for a set amount of time. Implementation of this program includes educating users about the initiative and incentivizing use with a reward program.

Final Design

Part 1: Educate users about Kroger's goal to go bagless

New Customer Home Screen & Checkout

kroger1.png

Implemented Calls-to-Action:

  • The main banner on the homepage introduces the program.

  • After completing a pickup order, the CTA on the checkout page allows customers to learn about the program and join after checkout or to learn about it the next time they checkout.

Information + Customer Responsibilities

  • The onboarding screen briefly explains the program and the customer benefit

  • After completing the onboarding process (detailed below), customers are presented with FAQs to answer any additional questions.

New Customer Onboarding

(KroGREEN service)

kroger2.png
kroger3.png

Onboarding steps screens:

  • These screens walk the customer through the steps they will take when using the tote exchange program

  • Includes relevant links for the customer to read more in-depth about each step (these align with the desired user journey detailed above).

After viewing the onboarding screens:

  • Customers are shown the Tote program FAQs that are specific to the tote program and customer value.

  • Customers are able to select their preferred reward option that includes Fuel Points, Cash Back, Future Discount, or Donations for a selected cause.

Returning Customer Checkout

kroger4.png

What a returning customer would see after they have completed an order:

These screens include:

  • A summary of the order and the number of totes in the order

  • An overview of the totes in the customer's possession from the current order and from past orders

  • The return options provided for the customer (return at next pickup, renew tote for 2 additional weeks, and receiving a penalty for not returning the tote)

  • Finally, the customer is shown the FAQs about the program that include information about the fee and how to earn rewards

Final Design

Part 2: Provide incentives to inspire users to take part

New Customer Dashboards

kroger5.png

New Customer Donation / Return Dashboards:

  • When a customer first joins the tote exchange program, they are given a blank dashboard that allows them to select their preferred community cause if they chose "Donate" as their reward option

  • The customer is able to see their tree grow towards redeeming their reward (there is a minimum number of returns required before a customer can redeem their reward).

  • They are also able to see their reward streak that is earned with each on-time (with their next order pickup) or early tote return

  • The return dashboard also includes both sections of FAQs for customers to utilize until they have completed an order

Returning Customer Dashboards

kroger6.png

Tote and Reward Organization

  • The savings home screen page includes a banner that shows the number of rewards earned in the past (in this case, it was a donation.) It also shows the number of bags saved, which appeals to environmentally motivated customers.

  • The KroGreen home screen allows customers to view their rewards and returns.

  • The Donation Dashboard tracks earnings towards a reward and shows how many returns a customer must complete before a reward.

  • The Return Dashboard shows the customer's tote return streak and allows customers to view and manage their totes from past orders.

  • One feature is showing the specific tote barcode for each order so that customers know which set of totes relate to which order. Another feature is allowing customers to renew their tote within the return dashboard (detailed below).

Unreturned/Overdue Totes System

kroger7.png

Tote Renewal:

  • The first screen shows the tote renewal process, which is simplified to reduce cognitive load on the customer. The pop-up includes the order number, original return date, number of totes in the order, and the new tote return date that is 2 weeks after the original return date.

  • The second screen shows the Return Dashboard with the indication that an order has been renewed.

kroger8.png

Reimbursement:

  • The first screen shows the Return Dashboard when a tote is overdue and the return streak has been lost.

  • This requires the customer to complete a reimbursement report if they would like to get their security deposit back. The reimbursement report allows the customer to learn about the reimbursement report details and submit the reason they were unable to return their tote on time.

  • After completing the reimbursement report, the customer is given a new return date that must be met in order for them to receive their deposit back.

bottom of page