Wave Staging Portal

Rebuilding a critical Kroger enterprise tool after legacy system was removed

• Outcome: Restored functionality to 75+ DEM users, saving 30+ hours weekly

• Role: Lead Product Designer

• Scope: Research, story mapping, UI design, usability testing, dev handoff

• Timeline: Q3 2022 - Q1 2023

• Team: PM, operations stakeholders, FE/BE engineers,

Problem:

Kroger Pickup Process Overview: order, pick, stage, de-stage, deliver

“Staging” is part of the process of preparing a customer’s online pickup order. The original Staging portal had been deprecated, leaving district eCommerce managers (DEMs) without a reliable tool to view and update store staging configurations. This created significant operational challenges, including:

  • A bottleneck for DEM processes

  • 30+ hours per week of extra manual entry work for the staging support team

  • No consistent way to track equipment types, leading to inefficiencies across stores

The goal: Design a modern staging portal that restored the essential functionality of the legacy tool while improving clarity, usability, and operational alignment. The solution needed to match the expected logic of the old system, but with a cleaner interface, improved visibility, and strong user experience patterns that enabled DEMs to work with confidence.

Our User: District eCommerce Managers (DEMs) on web

Affinity mapping of stickies into groups

User story map of needed functionality

Research Insights:

  • Staging terminology varied across teams and experiences

  • DEMs wanted a clear, at-a-glance configuration overview

  • The staging support team plans to overhaul the entire staging system, so some future-facing features could be left out of this design

What this meant for design:

  • Maintain the logic and terminology of the legacy tool

  • Focus on a clear, consolidated configuration view with feedback and summaries

  • Keep the design focused on replacing lost functionality, but save “nice to have” features for the system overhaul.

Research:

To rebuild the staging portal accurately, we partnered with district eCommerce managers, staging subject matter experts, and fulfillment teams to understand how staging configuration works in practice. Since the legacy tool was no longer available, our research focused on reconstructing the expected workflow by mapping the real-world process and uncovering the logic behind it.

What we did:

  • Interviewed staging SMEs to map the full configuration process

  • Conducted a retrospective with the staging team to understand the previous workflow

  • Organized insights through an affinity mapping exercise to identify themes and friction points

  •  Defined required functionality and built a user story map that aligned the team on scope, logic, and priorities

Retro of previous staging portal iteration

Wireframes -> Medium Fidelity Mockups

We assembled selected components into a unified dashboard layout, prioritizing clarity and dev simplicity. We ran iterative reviews with business stakeholders to ensure alignment on workflow logic, required functionality, and overall user experience.

Hi-Fi Mockup - Key Features:

  • Full parity with deprecated portal to restore all lost capabilities

  • Consolidated clarity through a dashboard-type experience with color/ letter system and drawer-style modals

  • Development-friendly implementation using Kroger Design System components to reduce build time

Design

Paper to Digital Sketching

We began with a collaborative "Crazy 8s" exercise to explore layout ideas. We synthesized the strongest patterns and translated them into low-fidelity Figma mockups of possible portal components.

Dev Handoff

Design assets were broken into clear user stories, mapped into a dependency tree, and translated into Jira tickets to guide development. This ensured accuracy, consistency, and a smooth engineering handoff.

organized into a dependency tree…

and converted into Jira tickets to guide development.

Release to Enterprise

Wave Staging launched on 3/15/23 across:

  • 1000+ grocery stores

  • 75+ district eCommerce managers

Retro:

Wave Staging was one of my first projects at Kroger, and it pushed me to quickly understand complex staging logic and processes. With the legacy tool gone and limited documentation, we rebuilt the workflow through engaging with SME’s and business stakeholders to understand and build for their experience. This, along with learning to work alongside the front-end and back-end developers was my favorite learning experience of this project.

Outcomes:

  • Provided a clear and consistent configuration experience for DEM users

  • Saved the staging support team 30+ hours of manual work each week

  • Served as a stop-gap solution that allowed for the development of the next-generation staging system (Part 2), which enabled more than $1.5 million in projected savings.

Usability Study

Mocks were broken into user stories in Mural…

We conducted moderated usability sessions with five DEM users. Key outcomes included:

  • Need for additional guidance, prompting us to add tooltips to the wave timetable form

  • Error prevention improvements, including enforced minimums and maximums on zones

  • Users reported feeling confident in setting up wave staging after testing

  • Deferred the "Equipment Capacity" feature to a post-MVP release based on feedback and scope

Wave Staging Portal - Gallery

  • Wave Staging Home

  • Editing Staging waves

  • Editing Zones

  • Configuration Saved

  • Print Barcodes

    Print Barcodes

  • New List Item