Tori Breitling
UX/Product Designer

Updating enterprise software

The redesign of the browser interface for a flagship enterprise product.

The project

OpenText's WEM (Web Experience Manager) is an in-browser editing tool, designed to offer easy WYSIWYG editing options to Production Specialists, Editors, Contributors, and Translators. I worked with the lead designer and researchers on the OpenText team for about 9 months.

In browser editing CMS

In browser editing CMS

The challenge

The 8.1 version, colloquially known as “The Floatie,” was the source of many complaints by users, and internal field and sales people alike. The most frequently voiced one was that it was somehow always in the way and require constant repositioning on the page. Additionally it was slow to load, and lacked extensibility.

The new design needed to rectify that, incorporating all existing functionality as well as new competitive features like drag and drop and responding to task flow in context.

Design Iterations

Design exploration 1: Here I try to make the footprint smaller using expanded menus. My primary goal is to explore frameworks at a fidelitythat allows me to judge if it can elegantly (inasmuch as possible) contain a super complex back end.

Design exploration 1: Here I try to make the footprint smaller using expanded menus.

My primary goal is to explore frameworks at a fidelity

that allows me to judge if it can elegantly (inasmuch as possible) contain a super complex back end.

Design exploration 2: Here I explored a collapsible drawer.

Design exploration 2: Here I explored a collapsible drawer.

Design exploration 3: We landed on a “bar” model, which divided functionality into  five modes. With lead designer Robin Silberling, I designed and prototyped the underlying functionality to work with the new “in-context“ bar model.

Design exploration 3: We landed on a “bar” model, which divided functionality into five modes.
With lead designer Robin Silberling, I designed and prototyped the underlying functionality to work with the new “in-context“ bar model.

"Interesting moments" grid

Mapping interaction states

One of the most complicated aspects of this project were ironing out the details around drag and drop. There were a multitude of possible states: the validity of an object, the validity of said object being dropped into a valid field, the positioning of objects and whether they went above or below an existing object, and so forth.

For each of those state were micro interactions – the cursor would change when over a draggable object and the draggable object itself had different states depending on context. Using Bill Scott’s “interesting moments” grid as a guide, I created a storyboard grid that showed all the possible elements in all the possible states. This screen shows a part of that document.

Usability Testing with prototypes

OpenText WEM
Using Axure, I built prototypes to support the user testing of the outlined use cases. Then OpenTexts’ UX research team ran a series of remote tests with current users. Using the results of the tests as our guide, UX Lead Robin Silberling and I would collaborate on new approaches, as well as how to integrate the new user stories for each round.

In all, I prototyped and we tested five rounds.

Example of final coded product. In the following years, OpenText extended this bar model into their other web-based products.

Example of final coded product.

In the following years, OpenText extended this bar model into their other web-based products.