Modernizing a 30-Year-Old Retail System into a Tablet-First Experience
PROJECT TYPE
Legacy system modernization
Tablet-first internal retail tool
CONTRIBUTION
High-fidelity prototype
Legacy flow mapping
Interface refactoring
Engineering handoff
MY ROLE
UX/UI Designer
OUTCOME
Refactored key store workflows
20+ SWO functions reorganized
TARGET USERS
Store associates
TIMELINE
2026
Service advisors
In-store operations teams
OVERVIEW
Summary
I redesigned key workflows of a 30-year-old internal automotive retail system as it moved from a desktop executable to a browser-based, tablet-first experience.
The work started as a UI modernization, but stakeholder reviews showed that a visual refresh would not solve the real problem: critical workflows were overloaded, difficult to scan, and still dependent on legacy behavior.
My contribution focused on refactoring complex screens, improving hierarchy, reorganizing actions, applying design system patterns, and aligning each decision with engineering constraints.
Background
The product was an internal system used by automotive retail store teams to manage sales, services, parts, sourcing, inventory actions, and daily store operations.
The original system had been used for decades as a desktop application. The new direction was to move it into a browser-based tablet experience, making it easier to update, scale, and use in-store.
The main constraint was that backend behavior and core business logic were mostly fixed. With 400+ screens, limited documentation, and development already in progress, the redesign had to improve usability without breaking the operational rules behind the interface.
%20(1)_edited.png)
My Contribution
I worked on interface refactoring, high-fidelity UI, design system usage, and developer-ready handoff.
My responsibilities included mapping legacy flows, identifying hidden actions, reorganizing overloaded screens, documenting interaction states, and validating feasibility with frontend engineers.
Because the system was highly backend-driven, my role was not only to make screens cleaner. I had to decide where the experience could be simplified, where existing behavior had to be preserved, and how to make complex workflows easier to understand within real technical limits.
PROBLEM
Defining the problem
Overloaded screens
Critical workflows exposed too many actions at once, making it hard to understand what mattered first.
Hidden actions
Important functions existed, but were difficult to discover without prior knowledge of the legacy system.
_edited.png)
Fixed backend logic
Some flows could not be fully redesigned because they were tied to existing APIs, data structures, and business rules.
Tablet-first transition
The interface had to work better in-store, on a browser-based tablet experience, without rebuilding the product from scratch.
Goal
"How might we modernize critical store workflows without breaking the legacy logic behind them?"
PROCCESS
Key Decisions
Improve clarity before reducing steps
In many flows, the main issue was not only the number of clicks. Users struggled to understand what actions existed, where they were located, and what state the order was in.
So I focused first on grouping, hierarchy, clearer labels, and action visibility.
Simplify only where the system allowed it
Some flows could be reduced aggressively. Others had to preserve legacy behavior because changing them would create technical risk.
This helped the team avoid unrealistic redesigns and focus on improvements that could actually be implemented.
Use the design system as a delivery tool
The design system was not only a visual layer. It helped make the redesign more consistent, easier to hand off, and more realistic for engineering to build.
KEY DESIGN SOLUTION
Service Work Order Refactor
Before
The original Service Work Order screen exposed too many actions at once. Purchased items, requested services, technician assignment, printing, order actions, and completion tasks lived too close together, without a clear hierarchy.
Users had access to the functions they needed, but the interface depended too much on previous knowledge of the legacy system.
_edited.png)
After
I reorganized 20+ functions into a clearer interaction model, grouping actions around service, parts, and order-related tasks.
The goal was not to remove functional depth, but to make the screen easier to scan and operate. Key actions became reachable within a maximum of three interactions while preserving the backend logic behind the flow.
Sourcing Integration
Before
Sourcing opened through a separate hosted web layer inside the desktop application. This made stock and inventory-related tasks feel disconnected from the rest of the workflow.
Users had to mentally switch between experiences during the same operational task.
After
The final production screen is not available due to project access and confidentiality constraints, so I recreated the flow direction as a simplified diagram.
I helped integrate sourcing into the browser-based experience, making it feel like part of the same operational workflow instead of a separate system.
This created a more continuous experience for store teams by keeping customer, vehicle, stock, and inventory actions connected within the same task flow.
Oil Change Simplification
Before
The Oil Change flow required 12 steps, even for a relatively focused service task. The process was functional, but unnecessarily fragmented where the system allowed simplification.
After
I reduced the flow from 12 steps to 4 where the system allowed it.
This became a good example of the project’s approach: simplify when technically feasible, preserve when necessary, and balance usability improvements with implementation risk.
IMPACT
Phase 1
This phase has not gone through full field validation yet, so I avoid presenting it as a fully measured outcome.
Still, the redesign created clear product and delivery improvements:
20+ functions reorganized
Service Work Order actions were grouped into a clearer interaction model.
Clearer operational workflows
Critical screens became easier to scan, discuss, and hand off to engineering.
More scalable foundation
The browser/tablet direction created a stronger base for future releases.
RECOGNITION
Internal Recognition
The project team received internal recognition for collaboration and delivery excellence during the ShopX NextGen initiative.
Reflection
This project taught me that redesigning legacy systems is not about replacing everything that looks outdated.
Good design also means understanding dependencies, respecting constraints, and choosing where change creates real value.