Before / After Comparison
Use the slider to explore how the interface evolves from a dense, table-based layout into a focused, task-oriented experience. The redesign reduces cognitive load and surfaces only the information needed in the moment.

Executive Summary

---

Sierra Spur Boot Company is a fictional Western footwear manufacturer based in Southern California, founded in 1969 by Richie Ventura, with operations rooted in Bakersfield, California. The company produces premium handcrafted cowboy boots at its Bakersfield workshop while partnering with manufacturing facilities in León, Guanajuato, Mexico, for its everyday product lines.

Sierra Spur distributes through select Western retailers, independent boot shops, ecommerce, and a growing number of company-owned stores, including locations in Bakersfield, Irvine, and the Fort Worth Stockyards, with planned expansion into Nashville and Los Angeles. In addition to its consumer business, Sierra Spur operates a government-focused division, Sierra Tactical, producing wildfire firefighting boots for CalFire and federal agencies.

As the company expanded across manufacturing, retail, ecommerce, and government contracts, it continued to rely on Microsoft Dynamics GP to manage inventory, finance, manufacturing, and order fulfillment. Over time, extensive customization fragmented the user experience, leading to inconsistent workflows, limited real-time inventory visibility, and operational friction between store leadership and sales-floor teams.

This case study explores how a standardized design system and experience-layer modernization strategy could improve operational clarity without requiring a full platform replacement. The concept focuses on role-based retail workflows for sales associates, floor supervisors, and store managers — adapting information density and operational visibility to user responsibilities while maintaining a shared interaction model across devices.

Additional explorations include constrained inventory coordination, in-store “try-on” tracking, lightweight retail analytics, launch support materials, and customer-assisted selling workflows designed for modern retail operations.

Design Challenge

---

Sierra Spur store associates often rely on a combination of system checks and manual verification, requiring them to leave the sales floor to confirm stockroom availability. In high-pressure retail situations, this can lead to repeated back-and-forth between inventory systems and physical inventory, slowing customer service and reducing confidence in the data.

At the same time, operational visibility varies significantly by role. Sales associates, floor supervisors, and store managers each require different levels of inventory awareness, reporting, and coordination, yet legacy systems often present the same dense workflows to every user regardless of responsibility or device context.

Inventory data is frequently fragmented across multiple tools, reports, and administrative screens, forcing employees to navigate between systems to validate stock levels, check incoming inventory, coordinate launch materials, or interpret inventory movement. This fragmentation creates gaps between system-reported inventory and real-world selling conditions — particularly during limited product launches, constrained inventory situations, or high-demand sales periods.

This case study explores how a shared design system and experience-layer modernization strategy could simplify inventory coordination through role-based operational workflows tailored for sales associates, floor supervisors, and store managers across tablet and desktop environments.

UX Context

---

Sales Associate

Assisted Selling Workflow. Sales associates require fast, low-friction access to inventory availability while actively assisting customers on the sales floor. The interface prioritizes simplified inventory visibility, queue management, and product retrieval workflows while minimizing operational noise and administrative complexity. The goal is to help associates quickly answer customer questions, request inventory from the stockroom, coordinate “test-drives”, and complete sales interactions without leaving the customer experience.

Floor Supervisor

Operational Coordination Workflow. Floor supervisors require broader operational visibility across constrained inventory, high-demand products, “in-play” merchandise, launch coordination, and customer holds. The interface introduces higher information density and operational controls while preserving the same interaction model used by sales associates. This workflow supports inventory coordination between the sales floor and stockroom while surfacing operational signals that may impact staffing, customer expectations, or limited product launches.

Store Manager

Store managers require a broader operational view spanning inventory health, merchandising visibility, category performance, replenishment awareness, and store-wide coordination. Unlike the customer-facing tablet workflows, the manager experience extends to a laptop-oriented operational dashboard for monitoring trends, inventory movement, and retail performance at the store level. The interface preserves the same shared design language while adapting to higher-density operational decision-making.

Operational Context

---

Sierra Spur Boot Company operates across multiple retail environments ranging from high-volume tourist destinations to premium lifestyle retail centers. Store teams are responsible for balancing customer service, inventory coordination, product launches, merchandising, and constrained inventory situations while relying on a heavily customized Microsoft Dynamics GP environment that has evolved over time.

As the company expanded across ecommerce, retail, manufacturing, and specialty product launches, operational workflows became fragmented across multiple tools, reports, spreadsheets, and administrative screens. Inventory visibility often varies by role, forcing employees to navigate between systems to validate stock levels, coordinate inventory requests, monitor incoming shipments, or manage limited-edition product releases.

Retail employees also operate under very different workflow conditions depending on their responsibilities. Sales associates require quick, low-friction access to inventory while actively assisting customers on the sales floor. Floor supervisors require broader operational awareness to coordinate inventory movement, monitor high-demand products, and support launch activity. Store managers require a wider operational view focused on inventory health, merchandising visibility, replenishment trends, and store-wide coordination.

his concept explores how a shared design system and an experience-layer modernization strategy could simplify retail operations by tailoring role-based workflows to different operational responsibilities while preserving a consistent interaction model across devices.

Note: The project intentionally focuses on customer-facing and store-level operational workflows rather than building a full retail ERP replacement. While the system assumes coordination with back-of-house inventory processes such as RFID/barcode tracking, stockroom fulfillment, and inventory synchronization, dedicated warehouse and receiving workflows were intentionally excluded to maintain focus on assisted selling and operational visibility.

Problems Identified

---

• Inventory visibility is fragmented across multiple tools, reports, and manual verification processes.
• Sales associates often leave the customer experience to manually confirm stockroom inventory.
• Legacy ERP workflows impose the same operational complexity on employees, regardless of role or responsibility.
• High-demand and limited-edition products create inventory coordination challenges during peak sales periods.
• Customer-facing teams have limited visibility into inventory movement, inbound shipments, and constrained inventory states.
• Operational workflows rely heavily on verbal communication between the sales floor and stockroom.
• Product launch materials, merchandising instructions, and VIP customer requests are often disconnected from inventory workflows.
• Existing workflows provide limited insight into why customers reject products after try-on interactions.
• Store leadership lacks lightweight operational analytics connecting customer behavior, try-on activity, and inventory demand.
• Legacy interfaces create unnecessary cognitive load during fast-paced retail interactions.

Proposed Solution

---

Rather than replacing Sierra Spur’s existing ERP environment, this concept explores how an experience-layer modernization strategy could improve operational clarity by building role-based workflows on top of existing inventory and operational systems.

The proposed solution introduces a shared design system tailored to three distinct retail roles: sales associates, floor supervisors, and store managers. While each interface adapts information density and operational visibility based on user responsibility, all workflows maintain consistent interaction patterns, navigation behaviors, and visual language across tablet and desktop environments.

The system focuses on simplifying customer-facing inventory coordination by surfacing real-time width and size availability, constrained inventory states, in-play inventory tracking, launch materials, queue management, and lightweight operational analytics within a unified operational workflow.

Design System Characteristics:

• High-contrast UI for fast scanning
• Clear visual hierarchy for rapid decision-making
• Inventory data visualization
• Robust iconography for status communication
• Multi-device responsiveness (tablet and laptop)
• Accessibility and durability for retail environments

This retail design system solution connects system-reported inventory with real-time selling conditions to a fast-paced, high-priority retail environment.

Try-On Feedback Loop

SierraTrack also explores the possibility of lightweight in-store behavioral analytics. When inventory is removed from the in-play queue, associates can record simple try-on outcomes such as purchased, fit issue, style issue, price concern, or customer undecided.

Over time, this creates a retail feedback loop similar to behavioral analytics in ecommerce environments, helping store leadership and merchandising teams better understand customer preferences, fit trends, inventory gaps, and sales friction points.

Potential operational insights could include:

• Try-on conversion rates
• Fit-related inventory trends
• Product preference signals
• Price resistance patterns
• Width and sizing demand gaps
• Regional merchandising behavior
• Product launch performance
• Associate-assisted selling trends

What this work represents

---

Legacy enterprise systems are long-lived, operationally critical platforms that cannot be easily replaced. Rather than pursuing full system overhauls, this work demonstrates how targeted experience-layer modernization can improve usability, reduce cognitive load, and support better decision-making within existing constraints.

My approach centers on:

1. Pattern-Based UX Assumptions

Since this case study focuses on a fictitious organization, no formal user interviews or usability testing were carried out. Instead, the redesign follows well-known UX best practices typically used when updating legacy ERP systems. These assumptions are based on patterns I observed in a prior project where I designed and implemented a design system for a legacy ERP.

Configure before customizing:
Instead of extensive custom coding components like Data Grids, adopt “out of the box” components like datatables.js. helps maintain upgrade paths and reduces technical debt.

Universal metaphors and design patterns:
To reduce training costs, adopt universal design patterns, such as semantic colors (red for danger, green for success), and standard icon metaphors that users already recognize in modern applications.

Design Shifting:
Whenever possible, avoid duplicating legacy UI workflows; instead, prioritize modern, process-driven methods by redesigning workflows to leverage platform capabilities rather than merely reskinning outdated ones.

2. Platform Constraints

The design system was implemented as a front-end standardization layer within a legacy .NET enterprise environment, where direct control over markup and component behavior was limited. Rather than rebuilding the platform, the solution focused on creating a unifying experience layer that could improve consistency, readability, and usability across existing applications.

Bootstrap 4.5 was used as a foundational framework, paired with a global CSS layer to establish standardized spacing, typography, iconography, surface styles, and component treatments. This approach allowed visual and interaction patterns to be applied consistently without requiring changes to underlying server-side architecture.

Data-heavy interfaces were implemented across two parallel paradigms. Legacy modules relied on ASP.NET Web Forms GridView controls, which generated server-rendered tables with limited flexibility and inconsistent markup. In parallel, a more modern pattern using DataTables.js was introduced to support enhanced interactivity, including sorting, filtering, and improved usability.

Due to distributed development teams and established implementation habits, adoption of modern patterns was inconsistent. As a result, the design system was required to support both paradigms simultaneously. This constraint necessitated flexible styling strategies capable of normalizing the user experience across fundamentally different rendering approaches.

Rather than functioning as a strictly enforced component framework, the design system operated as a unifying experience layer—bringing visual and interaction consistency to a fragmented system while working within the constraints of legacy architecture.

3. Implementation

Instead of rebuilding the ERP system, the solution focused on introducing a lightweight design system that could standardize interface patterns while remaining compatible with the existing framework.

The legacy environment relied heavily on table-based layouts, inline styles, and .NET-rendered components that often appeared as native OS elements rather than semantic HTML. These constraints limited direct control over markup and required the design system to be implemented as a front-end layer applied to existing pages without modifying server-side code.

This approach established a consistent foundation across the system, but more importantly, it enabled targeted, modular modernization. Rather than attempting to redesign the entire platform, individual workflows and screens could be rethought as standalone experience-layer improvements.

The Store Inventory Availability System represents one such modular enhancement—designed to solve a specific operational gap at the store level. By leveraging standardized components and patterns from the design system, this interface could be introduced without disrupting existing system architecture.

This implementation strategy enabled incremental modernization, improving usability and decision-making at critical touchpoints while maintaining system stability.

4. Design System Foundation and Standardization

To establish consistency across a fragmented legacy environment, a structured foundation layer was introduced using Bootstrap 4.x. This provided a baseline for layout, spacing, and interaction patterns, enabling a more predictable and maintainable interface across applications.

Rather than relying on default framework styles, Bootstrap was extended through a global CSS layer to better align with enterprise application needs. A semantic color system was introduced to communicate system states clearly, while non-essential visual treatments such as rounded corners and shadows were removed to prioritize clarity in data-dense environments. Typography and heading scales were adjusted to improve readability, and core interface elements—including navigation, forms, and buttons—were standardized.

Because many native components were rendered through .NET controls, additional strategies were required to ensure consistency. Native form elements such as checkboxes and radio buttons were restyled using a “hide and replace” approach, allowing them to visually align with the broader design system while preserving underlying functionality.

To support adoption across teams, reusable component patterns and usage guidelines were established. These included standards for button hierarchy, alert behavior, and data grid presentation—ensuring that information was consistently structured and easier to interpret across the system.

Where possible, modern layout techniques such as CSS Grid, Flexbox, and Bootstrap utilities were introduced alongside legacy structures. These improvements enhanced layout flexibility without requiring changes to backend architecture.

This foundation enabled targeted, experience-layer improvements—such as the Store Inventory Availability System—by providing a consistent set of patterns that could be applied incrementally without disrupting existing workflows.

5. Adoption Reality

Due to ongoing application demands and distributed development teams, the adoption of newer patterns was inconsistent. As a result, the design system was built to support multiple paradigms simultaneously, requiring flexible styling strategies to maintain a unified experience across differing rendering methods.

Why This Matters

---

In a retail environment, speed and accuracy directly impact revenue. When store associates cannot confidently determine whether a product is available—or must leave the sales floor to verify inventory—sales opportunities are lost, and customer experience suffers.

This solution shifts inventory from a passive system of record to an active decision-support tool. By presenting real-time availability, including in-play inventory, and enabling stockroom requests directly from the sales floor, associates can respond to customer needs immediately.

The introduction of a standardized design system ensures that these improvements are not isolated to a single screen. Instead, it establishes a scalable foundation for consistent, usable interfaces across the organization—reducing training time, improving system trust, and enabling future enhancements.

The result is a more efficient store operation, where associates remain customer-facing, decisions are made with confidence, and the gap between system data and real-world selling conditions is significantly reduced.

The Store Inventory Availability System

---

The following screen represents a targeted experience-layer solution built on top of the design system.

Designed for fast-paced store environments, this interface enables associates to quickly assess the real-time availability of a specific style, size, and width, and initiate stockroom requests without leaving the sales floor.

This example highlights how standardized components and patterns can be combined to solve a critical operational gap between system-reported inventory and real-time selling conditions.

Design Before

---

The original inventory screen was designed as a generalized system view rather than a store-level tool. While it provided access to a broad range of inventory data, it required interpretation and manual filtering, making it difficult for store teams to quickly determine whether a specific product was available for sale.

Legacy Inventory Interface (Before)
The interface exposes all data equally, without guiding attention to what matters most. As a result, associates must perform the work of filtering, interpreting, and validating inventory in real time.

Key Observations

Table-based layout prioritized structure over usability
Information was organized for system output rather than real-time decision-making, increasing cognitive load.

Non-actionable data density
“Total” columns and aggregated values lacked clear relevance for store-level decisions.

Fragmented information hierarchy
Product details, such as specifications, were pushed into secondary areas, reducing visibility during customer interactions.

Cross-location inventory visibility introduced a distraction
While access to inventory across stores and distribution centers was technically valuable, it often led to inefficient behaviors (e.g., ad hoc transfer requests) rather than structured inventory management.

Lack of a clear availability signal
The system displayed inventory counts but did not communicate whether an item was actually available for immediate customer use.

Design After

---

Universal Start Screen (iPad Pro 11″)

The universal start screen serves as a lightweight operational entry point shared across retail roles. Designed for fast access and minimal cognitive friction, the interface prioritizes product discovery, barcode scanning, and category navigation while adapting downstream workflows based on user responsibility and device context.

Start Screen Credits: 1. Men’s Vaccari Python Cowboy Boots 2. Men’s Ray-Ban Aviator polished silver 3. Men’s Space Rustler Hooey T-shirt 4. Men’s Tecovas Lakeside Camp Shirt 5. Men’s Stetson Tobias Cowboy Boots 6. Hooey Ball Cap 7. Wrangler Retro Slim Straight 8. Ariat Lether Western Belt 9. Tecovas The Garrett Cowboy Boots.

Store Associate – Inventory Item Detail (iPad Pro 11″)

The Sales Associate Edition focuses on assisted selling workflows designed for fast-paced customer interactions on the sales floor. The interface prioritizes simplified inventory visibility, queue management, and product retrieval coordination while reducing operational noise and minimizing cognitive load during active customer engagement.

Floor Supervisor – Inventory Item Detail (iPad Pro 11″)

The Floor Supervisor view provides broader operational visibility, with a focus on inventory coordination, constrained product management, and sales-floor support workflows. While preserving the same interaction patterns used by associates, the interface surfaces additional operational signals, such as in-play inventory, launch materials, transit visibility, and VIP hold coordination, to support real-time retail decision-making.

Floor Supervisor – Item “In-Play”

The In-Play feature provides temporary visibility into inventory currently being handled on the sales floor during active customer interactions. When a boot is requested from the stockroom, the system can flag the item as “in play,” indicating that the item may be temporarily unavailable while a customer is trying on the product.

Store Manager View

The Store manager interface maintains the same shared design system and interaction language used across associate and floor leader workflows while adapting to the broader decision-making responsibilities of store leadership. The goal is to provide managers with a lightweight operational command surface for monitoring inventory movement, constrained product demand, category visibility, and retail coordination without adding unnecessary complexity.

Store Manager Visibility (After)
The Store Manager view provides higher-density operational visibility, focusing on inventory health, merchandising coordination, replenishment awareness, and store-wide performance monitoring.

Westbound Design System

The Westbound Design System concept uses a shared design system to maintain consistency across sales associate, floor supervisor, and store manager workflows. Common interaction patterns, typography, spacing, inventory states, and operational components were standardized to create a unified experience across tablet and desktop environments while allowing information density and workflow complexity to adapt based on user role and operational responsibility.

Design System Standardization
Rather than rebuilding the system, a front-end design layer was introduced to normalize inconsistent UI patterns across legacy applications. This approach improved clarity and usability while working within the constraints of existing .NET components and rendering limitations.