Document Editor Redesign

A desktop computer uses label design software to create and print a warning label.

Design Ops

This project is part of a larger desktop software design epic.

(9 weeks)

Situation

Previous UX research showed that a template editor was unpopular because it was confusing. The software was primarily marketed by 3rd party vendors, so finding real end users for usability testing was unrealistic.

Task

Combine the template editor and document editor into a unified experience.
Support workflows for solo users or a team of users.

Action

First I recruited several test participants from in-house who had enough background knowledge to operate the legacy software, but were not experts. Then I created several prototypes in Axure and tested them against the in-house participants using usertesting.com.

Concept A

This design combined all of the template and document controls, but contained the experience in separate “modes”. The user could switch between designing and previewing a template. Only some usability testers discovered that templates could be populated in preview mode, and then printed using the Print Options screen. On the SUS scale, Concept A scored 53.33% (D).

User flow diagram A — Concept A user flow allowing the user to switch between design mode and preview mode.

Sketch of a label design editor, showing a text field with several controls for setting permissions. — Early wireframe of Design mode

Sketch of a label design editor, showing a preview of a field where the user has entered the test data "Hello world!" — Early wireframe of Preview mode

Concept B

This design was the same as Concept A, except templates could also be populated on the Print Options screen. On the SUS scale, Concept B scored 71.07% (C+).

Sketch of a label design print options screen, showing field prompts. A user has entered Hello, World! as test data. — Early wireframe of test data being entered on the Print Options screen.

Concept C

This design simplified the user flow by keeping both documents and templates in the same editor experience by combining both of their respective tool sets into the same tool palette.

I also eliminated the need for a separate test mode by allowing the user to type values directly into their newly created objects in a WYSIWYG fashion.

Concept C tested extremely well, scoring 81.75%(A-).

User flow diagram showing concept C. — Concept C user flow allowing all work to be done within a single editor screen.

Label design editor showing a tool palette with extra tools shown in flyout menus. — New tool palette reveals more object types that provide template functionality.

Label design editor where a user has populated a text field with the words Hello World! as test data. — User has the ability to draw a field, format it, and populate it on the same screen.

Result

Concept C was selected for development. When implemented, users were able to begin building and using templates as intended. Although the separate template editor was eliminated from the product catalog, usage and sales of the document editor increased by 41%.

Through this process I also learned that certain in-house employees can be a good proxy for actual usability testing participants.

A color-coded graph showing scores for multiple concepts graded on the System Usability Scale. — Chart comparing SUS scores of the legacy product and each of the design iterations.