CONTEXT

With the expansion of Kroger into new markets like Florida, where online-only shopping is prevalent, there's a need for innovative approaches to address and resolve grocery errors effectively.

DELIVERABLES - MOBILE APP

  • Research - Competitive analysis, surveys, interviews, user testing, A/B testing.

  • Design - Design an online solution for users to address grocery order errors.

CONTEXT

With the expansion of Kroger into new markets like Florida, where online-only shopping is prevalent, there's a need for innovative approaches to address and resolve grocery errors effectively.

DELIVERABLES - MOBILE APP

  • Research - Competitive analysis, surveys, interviews, user testing, A/B testing.

  • Design - Design an online solution for users to address grocery order errors.

ROLE

Product Designer

TOOLS

Figma, Lucidchart, Illustrator

INDUSTRY

Grocery Retailer

Understanding the Problem

Understanding the Problem

Understanding the Problem

Shoppers need an efficient and reliable online error resolution process for their grocery orders in the Kroger app.

Shoppers need an efficient and reliable online error resolution process for their grocery orders in the Kroger app.

Timeline

Timeline

Timeline

  • Surveys

  • Comparative analysis

  • User Interviews

  • Sketches & Brainstorming

  • Low fidelity prototyping

  • High fidelity interactive prototype

  • Unmoderated usability testing

  • Final design

  • Comparative analysis

  • Surveys

  • User Interviews

  • Sketches & Brainstorming

  • Low fidelity prototyping

  • High fidelity interactive prototype

  • Unmoderated usability testing

  • Final design

Research Overview

Research Overview

Research Overview

Research Questions

  • What are the most frustrating problems that customers experience during or after their online order experience?

  • What actions do users take to handle these frustrations or errors?

Research Questions

  • What are the most frustrating problems that customers experience during or after their online order experience?

  • What actions do users take to handle these frustrations or errors?

Survey & Interview Findings

Survey & Interview Findings

Survey & Interview Findings

  • Customers Want more Efficient and Empathetic error resolution

  • Customer Service & Communication

  • Customers Value Efficiency and Time

  • Customers Need Order Accuracy and Transparency

Personas & Journey Map

Personas & Journey Map

Personas & Journey Map

Competitive Analysis

Competitive Analysis

Competitive Analysis

Design Overview

Design Overview

Design Overview

There were 4 main phases of the design process.


  1. Sketches & brainstorming

  2. Low fidelity prototype

  3. High fidelity prototype

  4. Final Prototype

There were 4 main phases of the design process.

  1. Sketches & brainstorming

  2. Low fidelity prototype

  3. High fidelity prototype

  4. Final Prototype

Usability Testing

Usability Testing

Usability Testing

Learning Goals:

  • Does the error resolution flow make sense and is it intuitive for users?

  • Does the user understand how to report an issue?

  • Is the user properly informed and kept in the loop throughout the process?

Learning Goals:

  • Does the error resolution flow make sense and is it intuitive for users?

  • Does the user understand how to report an issue?

  • Is the user properly informed and kept in the loop throughout the process?

Main Takeaways

Main Takeaways

Main Takeaways

  1. Modals were generally not looked at; text/information is typically clicked out of immediately

  2. Users don’t care as much about confirmation screens as much as the actual reimbursement

  3. Specific wording/ copy is important to guide the users and reduce confusion

  4. Most participants (80%) prefered a full refund instead of store credit.


"Overall an honestly very user-friendly process with clear next steps at all parts”


“Nothing was hard or confusing. It was all very straightforward. On both the home screen and the order-specific screen, it was clear that the issue was resolved and I had received my reimbursement. Very easy.”

  1. Modals were generally not looked at; text/information is typically clicked out of immediately

  2. Users don’t care as much about confirmation screens as much as the actual reimbursement

  3. Specific wording/ copy is important to guide the users and reduce confusion

  4. Most participants (80%) prefered a full refund instead of store credit.

"Overall an honestly very user-friendly process with clear next steps at all parts”

“Nothing was hard or confusing. It was all very straightforward. On both the home screen and the order-specific screen, it was clear that the issue was resolved and I had received my reimbursement. Very easy.”

Final Prototype

Final Prototype

Final Prototype

The final design consists of 3 main steps


  1. Select an Item: the first step asks users to select the specific items they have issues with as well as the type of error they experienced with the specific items.

  2. Reimbursement Type: After selecting the items with errors they then are given the option to select between two reimbursement options: refund or store credit.

  3. Review: this page reiterates to the user everything they have selected to ensure they are confident in their selected items before they submit it to Kroger. It gives a general overview of reimbursement amounts as well as items and issues they have selected.

The final design consists of 3 main steps

  1. Select an Item: the first step asks users to select the specific items they have issues with as well as the type of error they experienced with the specific items.

  2. Reimbursement Type: After selecting the items with errors they then are given the option to select between two reimbursement options: refund or store credit.

  3. Review: this page reiterates to the user everything they have selected to ensure they are confident in their selected items before they submit it to Kroger. It gives a general overview of reimbursement amounts as well as items and issues they have selected.

Next Steps

Next Steps

Next Steps

  • Reorganization of the Kroger app to make finding this new process more accessible

  • Integration of a credit tracking system to allow users to see credits, not just within this error resolution process

  • Reorganization of the Kroger app to make finding this new process more accessible

  • Integration of a credit tracking system to allow users to see credits, not just within this error resolution process

← Back to home