Soon after I started working at MRI Software, we began migrating a rich ecosystem of outdated (but very capable) Windows products to the web. Many products were already available on the web, but the bulk of the Windows line hadn't yet been migrated. It was a huge undertaking.

One of the central products to MRI's platform on Windows was WebDesign—a tool for building web pages and forms. WebDesign had a very loyal contingent of users, who used MRI's platform tools to build all sorts of interesting (and sometimes scary) applications. Unfortunately, the way that users built pages in WebDesign wasn't really compatible with modern web application structure. HTML is a nested and modular structure, whereas WebDesign pages were drawn on a 2D canvas and rendered as a flat list of elements.

Early experiments

When we realized that WebDesign might be a major limitation on the platform's progress, some developers on the platform team began experimenting with a web-based version of WebDesign. I consulted with them, providing mockups and pairing up with them often to guide the direction of the tool and its output. Some design and technical challenges we faced were:

• Producing a web-based canvas that would show a preview of the page, but also allow users to interact with it
• Hooking up page elements to backend data and client-side scripting
• Creating design patterns and components that eventually coalesced with our design system
• Making the tool easy for legacy WebDesign users to understand and adopt, without constraining it to WebDesign's information architecture

Formative research

I conducted a series of user and stakeholder interviews to understand as much as I could about WebDesign. On a whiteboard-sized sheet of paper, I worked with my UX Design Manager to map out users' flows, prioritize functionality, and highlight pain points with the current system.

Then, as our experiments turned into a prototype and then an MVP, I conducted moderated user interviews with internal users in one of MRI's conference rooms, which were broadcast to another conference room where the development team could watch and listen. I conducted these once a month for about a year until I was placed on another project, but they proved to be immensely helpful to the team as they solidified a design direction for the product.

Connecting the dots

After some time, I came back to the project to map out some big and exciting new features:

• JavaScript-based expressions in property fields
• Actions—Promise-based functions that could be configured into chains and run in parallel or series
• Improvements to the usability of the editor, which had grown a little unwieldy as more and more functionality was packed in

I prepared designs for these features in Figma which could be viewed from Agile cards created by the product management team. Around this time, I also helped conduct focus groups and usability sessions with clients, who were eager to get their hands on the tool and see what it could do.

Continuing to iterate

Over time, the framework for the application solidified, and we continued to add functionality to fill in the gaps that internal teams were reporting as they used the tool to develop pages and applications. Before making the tool generally available, we overhauled a few key areas of the product that would need to be more usable before it could be used by clients as a self-service portal. Over several years of development and shifting priorities, this project gave me a wealth of experience in:

• Analytical and synthetic thinking, learning to decompose UIs or IAs and rebuild them to suit a changing set of constraints
• Designing tools that would see daily, intensive use
• Elegant visual design for densely-packed functionality, mostly by using design patterns and progressive disclosure
• Attention to detail when developing components and patterns from scratch—cutting small corners up front can lead to major constraints later on

When the tool was released in beta to select clients and then made generally available, it was highly anticipated by clients and formed the foundation for a few major projects at MRI as application teams created new products or re-platformed outdated ones.