Fortra

1. Situation

Fortra launched a high-stakes, one-year cloud migration to transition JAMS—its highly profitable, enterprise IT workload automation tool—from a legacy desktop application into a modern React web interface. Concurrently, the business aimed to unify the user experience across its product portfolio to support customer upselling.

The project faced acute cross-functional friction. The central corporate design team was locked in a slow-moving, "design-by-committee" process that failed to deliver assets at scale. Meanwhile, the highly protective development team was prepared to bypass UX governance completely to meet their tight engineering timeline. Structurally, the legacy software was congested with nested, inaccessible sub-screens and disorienting modal layers.

2. The Task

As the solo UI/UX Product Designer, my mission was to architect a clean, accessible cloud template system and a comprehensive component library while serving as the collaborative bridge between two deeply siloed teams. Leveraging my dual background in graphic design and web development, I needed to establish end-to-end user flows, interactive component states, and structural wireframes one sprint ahead of development. My core objective was to maintain an ego-free, high-trust relationship with an internationally distributed engineering team, delivering developer-ready design specifications that protected application usability without sacrificing engineering velocity.

3. The Action

Pragmatic Component Hybridization: Recognized that waiting for the corporate design team's framework would cause engineers to build unguided code. I strategically adopted the MUI React-based Material design system, blending its baseline patterns with the corporation's typography and color constraints to build a product-specific UI library.
Systemic Interface Inventories: Conducted a comprehensive structural audit of the application's complex architecture. I mapped out end-to-end user flows and built low-fidelity wireframes over 15+ massive 32x20-inch mapping matrices to cleanly untangle legacy workflow paths before translating them into high-fidelity screens.
Embedded Sandbox Prototyping: Embedded directly with developers daily to align with sprint capacity. Leveraging my technical background, I defined all component states (default, hover, active, and disabled) within an isolated sandbox and delivered production-ready CSS styling, completely shortcutting handoff friction.
Contextual Workspace Architecture: Eradicated disorienting desktop modal stack layers. I engineered an interactive template hierarchy featuring breadcrumbs for wayfinding and slide-out drawer components to keep users anchored while configuring dense automation variables.
High-Density Grid Engineering: Navigated design friction regarding data spacing. I advocated for legacy power users by creating a customizable data grid that allowed operators to toggle row spacing between loose and tight layouts, respecting enterprise scannability.
Proactive Defensive UI States: Swapped cryptic desktop graphics for structured, text-based navigation buttons with supporting visual anchors. To prevent downstream processing exceptions, I simultaneously mapped out responsive alternative input states, contextual pop-ups, and modern toast messaging.

4. Result

Successfully delivered a comprehensive, front-heavy web template architecture and a fully mapped UI component library that empowered the engineering team to hit their cloud milestones. By mapping complete interactive states alongside full-screen layouts, the redesign brought structural consistency and accessibility to a highly complex tool. The intervention eliminated user disorientation and proved that prioritizing user utility and code-level collaboration over personal ego can successfully stabilize an enterprise application during volatile corporate transitions.

Universal Template Shell & Action Toolbar

To stabilize JAMS’ sprawling complexity, I architected a unified Primary Template Shell that establishes universal wayfinding while drastically reclaiming screen real estate. This row contrasts the original desktop interface with the new, fluid web shell. By combining a collapsible left-navigation sidebar with a streamlined, horizontal MUI-based action toolbar (Copy, Delete, Import, Export), the new layout replaces oversized, cryptic legacy graphics with clean, explicit text-and-icon components. The final slot isolates a macro-cropped design library specification, highlighting the precise padding tokens and horizontal toolbars delivered directly to the distributed engineering team to eliminate user memorization fatigue and maximize the canvas for wide data grids.

Collection of design library elements and components

Custom Dropdown Matrices & Form Architecture

Because every aspect of JAMS' workload orchestration is highly customizable, the interface required a vast array of tailored UI inputs to handle distinct technical variables. This row illustrates my integration of standard MUI/Material Design text tabs on the secondary template tier alongside an active defensive design framework displaying inline form validation error states. To support the developers, I explicitly mapped out Default, Hover, and Active component variables. The cascading sheets isolate the custom dropdown matrices and color tokens engineered from scratch—establishing a highly predictable, production-ready system that kept fast-moving development sprints aligned.

Interface Inventory and Functional Mapping Matrix

Secondary level template with component error states

Workspace Architecture & Visual Zoning

Dismantling the legacy desktop modal stack through deliberate information architecture. Shifting from a white primary dashboard to a light-gray canvas on secondary and tertiary pages reinforces the user's location, using structured 'card' components and deep vertical scrolling forms to organize multi-tabbed configuration layers. By using these tabs to do the heavy structural lifting, the interface provides a physical sense of place and predictable user wayfinding—completely replacing the disorienting historical pop-up window system with modern cloud standards.

High-Function Action Drawers & System Feedback

Deploying contextual slide-out drawers specifically to house technical action button functions without cluttering the primary workspace. This row illustrates how the drawer layout perfectly accommodates custom input widths without sacrificing primary canvas visibility underneath. To protect the engineering build from edge-case processing exceptions, the system leverages standard foreground pop-ups and toast notification layers. The final slot showcases a fanned-out matrix of the 7 comprehensive drawer spec sheets and alert components delivered directly to the distributed engineering team—ensuring robust system feedback for complex cloud workflows.

Data grid with action button selected data drawer

Collection of component states for drawer component

The legacy design

The JAMS cloud migration required balancing the expectations of corporate brand committees, the technical constraints of a fast-moving React engineering team, and the workflow velocity of legacy power users. This redesign stands as a testament to strategic design pragmatism. By embedding directly with developers, adopting robust MUI frameworks, and delivering production-ready sandbox CSS, the resulting interface replaces fragmented desktop modals with fluid contextual drawers and adjustable data grids—creating a clean, accessible visual hierarchy through collaborative engineering alignment.

Enterprise UX Design & Cloud Migration Strategy