The Evolution of a Tool

big_OT_700

The Challenge

WEM is an in-browser editing tool, designed to offer easy WYSIWYG editing options to Production Specialists, Editors, Contributors, and Translators.

The 8.1 version, colloquially known as “The Floatie,” was the source of many complaints by users, and internal field and sales 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.

WEM_floatie

The Process

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. Frequently I would listen in on these calls. Using the results of the tests as our guide, the 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.

ptr_flow

 

Above is a demo of part of the drag & drop functionality.

 

Above is a demo of the Edit bar showing the different design modes.

Above is a demo of the finished product made by OpenText.

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 clues – 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.

DnDstoryboardGrid

Excel Spreadsheet with Interaction Grid

Conclusion

This product was released August 2013, and was considered a great success. The toolbar model was even extended across other products. My participation on the project ran about 9 months.