The UI and UX patterns were inconsistent to our new design system, even some were obsolete costing teams time and affecting quality.
An enterprise company for grocery stores, the design of the first 15 web applications for financial tooling at Kroger became outdated. No one knew how to use the legacy library as the build was also hardcoded.
The Mission
Finance needs a shared legacy library to deprecate 100+ old components and 15 web apps for rebuild in order to increase Finance and downstream teams' workflow speed as well as consistency with Kroger's new design system.
Design's Effort
Addressing Kroger's Legacy Tech Debt, the project was a collaborative effort with two other product designers and a reverse engineer brought-in to evaluate the legacy applications, identify which apps will require improvements. Prepare documentation informing redesign roadmap for development and provide documentation used for governance going forward.
Impact
Deconstructed 100+ Legacy Components: Audited and reverse-engineered 15 fragmented, hardcoded financial applications to map undocumented workflow logic and convert massive technical debt into a clean migration roadmap.
Orchestrated Cross-Functional Governance: Led "Bulls-Eye" workshops and affinity mapping with PMs, Designers, and Engineers to prioritize high-leverage components, successfully aligning leadership on a phased deprecation strategy.
Unified 15 Fragmented Apps into 1 Platform: Translated user personas and business-flow overlaps into a scalable, low-fidelity design blueprint that consolidated disjointed internal tooling into a single, cohesive application framework.
Design new designs part for functions and features part of legacy apps consistent to the new design system.
To start reverse engineering, we focused on learning "what is the desired action?" and "how does the user complete the action?"
User interviews for general questions and demos (understand users, responsibilities and high-level processes per platform).
Usability testing to walkthrough the legacy apps and any other existing tools to understand design, technicality and purpose.
Breaking down component flow and building the roadmap before any design
After research, Design audited each app suite from the demos to analyze differences and overlaps in the legacy systems. By reconstructing undocumented workflow logic, sitemaps, and component design and behaviors, I established a single source of truth for the legacy footprint, transforming technical debt into an actionable, engineer-ready roadmap for migration to the new design system.
We used affinity mapping to filter out obsolete pages and components and narrow down to the most used and shared features and functions.
We broke down the common themes into recommended components and workflows for rebuild, new components that would add value, and app opportunities & Improvements. And, prioritized the components in a bulls-eye workshop.
After we mind-mapped the most common and highest priority components, for each of the components that weren't available in the new design system, we ideated future state app workflows.
Moving forward
Design presented which components to deprecate and what Finance apps to ultimately redesign and reverse engineer first. Leadership adopted our recommendations and roadmap.
Redesign for the Legacy Apps
Aligning Leadership on a vision to unify the 9/15 separated systems into one home application, we brainstormed lo-fi prototypes built from our target persona and user research.
Reverse Engineering First
The legacy applications had to be first reverse engineered by our developer, taking our proposals and artifacts, then include design for any rebuild decisions. Most of the applications were decided to be hosted by existing platforms owned by different domains.
