Case Study

Building the Bridge: UX Engineering for Enterprise Modernization

Overview

I served as the UX Engineer during the migration of a legacy ERP platform from a desktop-only system to a modern, responsive web application.

Client
Enterprise Project Management Software Company

Role
UX Engineer (front-end implementation, design system, accessibility)

Timeline
13 months

Tools
Figma, Blazor, React, Sass/HTML, Git, Azure DevOps

Challenge

Inconsistent UI patterns across modules with drastically different layouts
Poor accessibility including font sizes below ADA standards and hidden navigation
Technical debt from Bootstrap and Syncfusion dependencies that constrained customization
No responsive design capability for modern cross-device workflows
Knowledge gaps in the engineering team around modern CSS architecture and accessibility practices

Goals

Modernize the ERP user experience for responsive, web-first use.
Establish a reusable Design System and scalable front-end framework.
Improve accessibility compliance and ensure front-end best practices.
Streamline collaboration between Designers, Engineers, and Leadership.

Scope

Own all front-end code and implementation during migration.
Partner with an in-house designer and a third-party design team to align on interaction and visual standards.
Build, document, and roll out a responsive design system.
Facilitate accessibility and best-practice training for engineers and leadership.

Constraints

Fixed migration timeline due to end-of-life support for legacy framework
Blazor framework limitations and team learning curve
Split design resources between in-house designer and external agency requiring coordination
Feature parity requirement to avoid disrupting thousands of daily users
Diverse user expectations from senior users with muscle memory to newer users expecting modern interfaces

Approach

I implemented a systematic, user-centered approach that balanced technical foundation-building with meaningful UX improvements informed by persona research and user needs.

Research & Collaboration

I contributed as a UX consultant embedded within the product team, collaborating closely with both in-house and external designers. My role was to bridge research, design, and engineering perspectives while also working directly with executive leadership. I provided guidance on web accessibility and interaction design, ensuring that design concepts were not only visually compelling but also technically feasible and inclusive. This cross-functional collaboration helped align product vision with implementation strategy.

Together with the design teams, I helped create research-based personas informed by customer focus groups and input from SMEs. These personas revealed critical usage contexts that shaped our design priorities. For example, project managers working on-site in bright sunlight or executives needing quick approvals while traveling. We identified which tasks should be optimized for mobile like quick approvals or progress insights, and which were better suited for desktop like detailed roadmap planning. These insights grounded our Beta in real-world scenarios and informed both design and technical decisions.

Foundational Front-End Code

I owned the front-end implementation for the Beta, including refactoring legacy code, replacing outdated libraries, and establishing scalable patterns. I authored an HTML/CSS style guide and created an accessibility guidelines document addressing semantic HTML, touch target sizing, and animation best practices. Together, these became the foundation for reusable, compliant components that aligned closely with the design team’s Figma libraries.

Training & Organizational Alignment

To support modernization, I led training sessions for developers and executive leaders. I introduced SMACSS principles through a bento box metaphor: containers as layouts, food as modules, and states as the dynamic changes to food (hot, cold, eaten). This analogy helped teams understand how reusable, flexible elements fit into the design system and clarified how the new codebase aligned with design artifacts.

Results

The Beta release of the ERP migration launched successfully, demonstrating the viability of the responsive, web-first approach.

I established the front-end foundation by refactoring outdated libraries, building a scalable framework, and authoring the style guide and accessibility guidelines that shaped ongoing development. These deliverables ensured the engineering team had clear, reusable patterns that aligned with design intent and could scale into production.

Equally important, I helped the organization adopt a shared language between design and engineering. Through training sessions with developers and executives using the bento box metaphor for SMACSS, I created lasting understanding of modular design principles. This alignment positioned the team to sustain and evolve the product well beyond the Beta, setting them up for the live launch and future iterations.