Fortra

1. The Situation

Fortra launched a high-stakes, one-year cloud migration to transition JAMS—its enterprise IT workload automation platform—from a legacy desktop application to a modern React web interface. At the same time, the business wanted to create a more consistent user experience across its product portfolio to support a broader platform strategy and customer upselling.

The project had significant challenges across design and engineering. The central corporate design team was working through a slow, committee-driven process that made it difficult to provide the volume of design support the migration required. Meanwhile, the development team was working under a tight engineering timeline and was prepared to move forward without UX involvement if necessary.

The product itself presented another challenge. Years of desktop-oriented design had resulted in deeply nested screens, inconsistent interaction patterns, and layers of modal windows that made complex workflows difficult to navigate. The migration therefore required more than translating existing screens into a web interface—it required rethinking how the product's workflows, navigation, and interface patterns could work together in a modern web application.

2. The Task

As the solo UI/UX Product Designer on the project, I was responsible for establishing a consistent, accessible foundation for the new web application while helping bridge the gap between the design and engineering teams. I brought both a design background and hands-on web development experience to the role, which allowed me to work through design and implementation questions together rather than treating development as a separate handoff.

I worked ahead of the engineering team to map end-to-end user flows, develop structural wireframes, and define reusable components and their interaction states. My goal was to give developers enough clarity to keep moving while still allowing the design to evolve as we uncovered technical constraints and workflow issues.

A key part of the role was building a productive working relationship with an internationally distributed engineering team. By staying closely involved with development and providing practical, developer-ready specifications, I could help resolve questions early, protect the usability of the product, and keep the work aligned with the team's delivery schedule.

3. The Action

Established a practical component foundation. Rather than wait for the corporate design framework while development was already moving forward, I adopted MUI’s React-based Material Design system as a starting point. I adapted its components to the corporation’s typography and color requirements and established a product-specific set of reusable interface patterns.

Mapped complex workflows before designing detailed screens. I conducted a structural review of the existing application and mapped end-to-end workflows using more than 15 large-format mapping matrices, along with low-fidelity wireframes. This helped identify unnecessary complexity and clarify how legacy workflows could be reorganized for the web before moving into high-fidelity design.

Worked directly with developers throughout implementation. I stayed closely connected to the engineering team and worked ahead of their sprint schedule. Using my front-end experience, I defined component states such as default, hover, active, and disabled in an isolated sandbox and provided HTML/CSS examples when they were useful for resolving implementation questions. This reduced ambiguity at handoff and allowed design and engineering issues to be addressed together.

Reworked the workspace and navigation structure. The legacy application relied heavily on nested modal windows that made it difficult for users to maintain a sense of where they were. I replaced that approach with a more structured workspace using breadcrumbs for wayfinding and contextual slide-out drawers for configuration and related actions.

Designed for enterprise power users. When there was discussion about how much space to give data-grid rows, I considered the needs of users who work with large amounts of information at once. I designed the grid to support both looser and more compact row spacing, allowing users to choose the density that best supported their workflow and scanning needs.

Designed for errors and alternate states, not just the ideal path. I replaced some of the legacy desktop interface’s cryptic graphics with clearer text-based navigation and supporting visual cues. I also mapped alternative input states, validation and error conditions, contextual pop-ups, and toast notifications so that the interface could communicate what was happening and help users recover when something did not go as expected.

4. The Result

The work produced a comprehensive web template architecture and mapped UI component library that gave the team a structured foundation for the planned cloud migration. I documented complete interaction states alongside full-screen layouts and established reusable patterns intended to bring greater consistency, accessibility, and predictability to a highly complex enterprise application.

Although the migration work was ultimately superseded by a later business decision to sell the JAMS product, the project gave me substantial experience working through complex workflows, establishing reusable interface patterns, and collaborating directly with engineering under significant time and organizational constraints.

The project reinforced the value of combining UX design with practical front-end knowledge. Rather than treating design as a static deliverable, I was able to work alongside developers, resolve implementation questions early, and create a clearer connection between user needs, interface behavior, and what the engineering team could realistically build.

Universal Template Shell & Action Toolbar

The legacy application used a large amount of screen space for navigation and visually heavy controls, leaving less room for the data and configuration work users needed to perform. I redesigned the primary template shell around a collapsible left-navigation sidebar and a streamlined horizontal action toolbar.

Common actions such as Copy, Delete, Import, and Export were represented as consistent text-and-icon controls rather than the more cryptic graphics used in the desktop application. This made the available actions more explicit while establishing a reusable pattern for the new web interface.

I also documented the component specifications, including spacing and padding values, so the distributed engineering team could implement the pattern consistently across the application. The resulting shell provided more usable canvas space for wide data grids while creating a clearer and more predictable navigation structure.

Collection of design library elements and components

Custom Dropdown Matrices & Form Architecture

JAMS required a large number of configurable inputs because users could customize many aspects of workload orchestration. The challenge was to make these technical options manageable while maintaining consistent interaction patterns across a large and complex interface.

I used standard MUI/Material Design patterns for elements such as secondary navigation tabs, while developing custom form and dropdown patterns for areas where the standard components did not meet the product's needs. I also incorporated defensive design practices, including inline validation and clearly defined error states, so users received useful feedback when an input required attention.

To support consistent implementation, I documented component states such as Default, Hover, and Active, along with the relevant spacing, color, and interaction specifications. The resulting patterns gave the engineering team a repeatable foundation for implementing the many specialized forms and controls required by the application.

Interface Inventory and Functional Mapping Matrix

Secondary level template with component error states

Workspace Architecture & Visual Zoning

The legacy desktop application relied heavily on modal windows, which made it difficult for users to understand where they were within a complex configuration workflow. I reworked the workspace structure to create clearer visual distinctions between the primary workspace and secondary and tertiary areas of the application.

Secondary and tertiary pages use a light-gray canvas against the primary dashboard's white workspace, creating a subtle visual cue that users have moved deeper into the application. Structured card components and vertically scrolling forms organize dense configuration content, while tabs provide a consistent way to move between related configuration layers.

This approach replaced the previous pop-up-heavy interaction model with a more predictable workspace hierarchy. The goal was to make navigation and context easier to understand while giving users a consistent structure for working through complex configurations.

High-Function Action Drawers & System Feedback

I used contextual slide-out drawers to contain technical actions and configuration controls without taking users away from the primary workspace. This allowed the application to accommodate more complex inputs while keeping the underlying workspace visible for context.

The drawers were designed to support different input widths and content requirements while maintaining a consistent interaction pattern. I also defined system feedback patterns using contextual pop-ups and toast notifications to communicate actions, validation issues, and other system states without disrupting the user's workflow.

To support implementation, I created seven drawer specification sheets along with the related alert and notification components. These documented the structure, behavior, and interaction states for the distributed engineering team, giving developers a consistent reference as they implemented the patterns across the application.

Data grid with action button selected data drawer

Collection of component states for drawer component

The legacy design

The JAMS cloud migration required balancing three competing needs: corporate design standards, the technical constraints of a fast-moving React engineering team, and the workflow needs of experienced power users who were accustomed to the legacy desktop application.

The existing interface had grown around a desktop model, with deeply nested screens and layers of modal windows that made it difficult to maintain context while working through complex configurations. At the same time, the new web application needed a consistent visual and interaction language that could be implemented efficiently within the migration timeline.

I approached the redesign by working directly with engineering and using MUI as a foundation for reusable components and patterns. Rather than simply reproducing the existing screens in a web format, I reworked the workspace structure, replacing much of the modal-heavy interaction model with contextual drawers and clearer navigation. I also designed adjustable data-grid density to accommodate the scanning needs of experienced users.

The result was a more structured design foundation that connected visual consistency, accessibility, interaction behavior, and implementation considerations. The work was less about applying a new visual style and more about determining how a complex, established product could be reorganized into a more coherent web experience.

Enterprise UX Design & Cloud Migration Strategy