Crafting a Modern ERP Portal for a Leading Retailer

Overview

The client, a prominent grocery retail chain with over 400 stores nationwide approached PwC following a successful IPO for a digital overhaul to support future growth.

As the sole UI/UX designer, I worked alongside a Product Manager, a Creative Director, and key client stakeholders to design a new Enterprise Resource Planning (ERP) portal envisioned to be the cornerstone of their evolving back-office operations.

Challenges

Antiquated and Fragmented Systems

The primary system, AS400, posed challenges with its outdated command-line interface often lacking a modern equivalent. Users also resorted to workarounds using spreadsheets and custom webpages due to its limitations, leading to unintuitive flows and inconsistent experiences.

To tackle this, we categorized the screens based on modern UI analogs, such as Tables or Forms. We then determined where they might fit in our information architecture (IA) by classifying them as top-level dashboard screens, mid-level list screens, or bottom-level detail screens. This assessment deepened our understanding of the existing process and guided us in selecting appropriate UI patterns to create a unified experience that current users can easily adapt to.

UI pattern mapping exercise for command line style screens

Current AS400 system screen

Redesigned UI for the same screen

Extensive Project Scope

Over an intensive 8-month period, the project encompassed a vast scope—over 60 capabilities, 20 user flows, and integrations with SAP. Navigating this scale required an iterative Agile approach segmented into three distinct phases.

Summary of project requirements

Phase 1 (Foundational): We aligned on design principles, personas, and requirements with stakeholders to minimize future confusion. We then co-designed the MVP wireframes with core Buyer and Planner users through ethnographic research and collaborative workshops to foster user ownership of the product.

Observing how a user interacts with the system in a real environment

Example of a design principle

Proposed wireframes and flows alongside IA

Phase 2 (Added): In collaboration with client stakeholders, users, and marketing team, we established the visual direction while utilizing our initial designs to depict clear product visions. At the same time, we incorporated feedback from Assistant Buyers and specialized departments to broaden portal capabilities and refine designs, ensuring a comprehensive solution.

Visual direction concepts

A General Merchandise Buyer looking at trends for a longer time period due to the need to plan for import and delivery

Sales Report with the ability to modify time increment to accommodate different user types

Phase 3 (Expanded): We crafted a tailored, simplified Purchase Order (PO) management experience taking into account user needs and SAP UI and flows. This design facilitates seamless integration between the portal and SAP while reducing the learning curve when the user needs to perform certain tasks on the SAP platform.

SAP PO form

Portal PO form

Outcome

Our project's culmination was marked by an online design repository that housed final designs for 60+ screens, interactive prototypes, and related documents. A standout feature was the 200+ page design documentation detailing key information such as personas, IA, and interactions. This document was a product of continuous refinement driven by collaboration and feedback from stakeholders and developers throughout our design journey.

Client feedback was overwhelmingly positive. Stakeholders were struck by their team's ability to "pick up on it themselves" due to the design's intuitiveness. And they eagerly volunteered to lead the final presentation to top-level leadership. This endorsement prompted the CIO to personally extend my team for an additional 6 months, focusing on store-side operations, underscoring the project's success and its potential for further impact.