ALICJA SUSKA
WORKFRONT WEB APP FEATURE

Proofing interactive content

A new experience for reviewing and approving interactive digital content
Proofing tool interface with open comments panel

PROJECT DETAILS

Company
Year
2018
Platform
Web
My role
Product Designer
Team
Product Manager, 4 Developers, QA Specialist

PRODUCT

Workfront
Workfront provides an Operational System of Records - an advanced work management platform for enterprise customers.
Proofing app
Online application dedicated to reviewing and approving digital content is an important part of the system. Thanks to this tool users can collaborate at scale using complex workflows.

CURRENT SOLUTION

Legacy tool interface
Currently, customers are using an older Flash version of the app to proof interactive media (websites, interactive banners, etc.). It has many limitations and looks outdated. We provide a new html5 version of the app but it supports only pdfs, photos, and videos so far.

PROBLEM SPACE

User needs

Review and approve interactive content
by...
  • Adding and replying to comments in context
  • Viewing the content and testing against numerous resolutions and devices
  • Moving the proof through the stages of approval

PAIN POINTS

Inability to create proofs from HTTPS (secure) and iFrame protected websites
Flash is limiting these functionalities. In addition, it is impossible to test content against different resolutions and devicesIt is crucial when reviewing interactive responsive websites.
Unintuitive navigation
Users would like to easily navigate through complex websites within the proofing tool. Now, it requires a lot of effort.
Outdated look and feel
Customers are used to high visual standards of products available on the market. The current version is not meeting their expectations, they describe it as ‘not fun to use’. Also, it is not consistent with the experience for pdfs and video proofs.
Overall experience is not smooth
UX flows, interactions and performance should be improved. Users sometimes need extra training to fully accomplish their tasks.

PROJECT OBJECTIVES

Increase customer retention
Eliminating Flash and introducing new functionalities should convince existing customers to keep using the product.
Land and expand
If users love our app they recommend it to other departments within the company and overall amount of licences increases.
Less customer support requests
Users identify lack of functionalities as bugs and constantly request new features. Changes in the product should decrease the amount of support work needed.

Our users

Reviewers
  • Focused on testing content, adding comments and discussing problems with others 
  • Navigation and commenting experience are the most important functionalities
Approvers
  • Main goal is to find out whether all issues were solved and make a decision about approving the latest version of the document
  • The most important parts are browsing comments and adding decisions

Why solve these problems?

Customers articulated an extremely low level of satisfaction with the current solution because of the technical limitations of the tool. To maintain, and eventually increase customer retention, it is necessary to react quickly and adjust our proofing viewer to the changing customer needs.

Customer value chart

Diagram showing creating a potential opportunity to add customer value

Solution SPACE

Flow

The basic flow that almost all users go through when using interactive proofing goes between two areas: collaboration and content review.

FlowFlow

Key activities

Taking into consideration UX flow I've chosen activities that are crucial for all the users:
  • Navigating live content
  • Adding comments
  • Testing against different resolutions
  • Browsing and replying to comments

SUPPORTENT CONTENT

Users upload those three types of content as interactive proofs. It is important to remember that all types of assets may be elements of the same project or campaign. Users treat proofing experience the same no matter which type of content they review.
  • Interactive websites
  • Animated banners
  • Email templates

Design
principles

Design Team principles included in the UX Operating Agreement.
Unbiased validation
We must validate any assumptions we make. We have to validate the design as early and ongoing as possible.
Enable customer success
Increase customer satisfaction as a result of our efforts. Our priority is successful user outcomes, not design.
Intuitively innovative
Reuse patterns the customer already knows and introduce new interactions that are enjoyable, delightful, and set new industry standards.
Thoughtfully automate
Relieve customers from the tasks we can easily automate or suggest in the product.
Simplicity at scale
We can help users come to believe that enterprise software doesn’t have to be hard, but delightfully simple. Customers want flexibility and not complexity.

FUNCTIONAL AREAS

How toolbars and functional areas should be placed in the interface to ensure optimal navigation and access to key features.

Sketch of functional app areas

Navigating live content

Top bar enables navigation within the proof (thumbnails and sets) and through the live content (browser-like controls).

App header

TeSTing live content

I've started with two ideas on how to approach problem of changing resolution and choosing devices: floating resolution tool and resolution dropdown attached to the bottom bar

Option A: floating resolution tool
Sketch: resolution tool placement
Sketch: resolution tool
✅ ability to test many devices quickly
✅ user can move the window around to see the details of the design without losing the context of the tool
🤔 useful alternative for testing multiple devices but not that handy when changing the device size only 1-3 times. The latter is the most common use case so a simpler solution should be prioritised for V.1
Option B (selected): resolution dropdown
Sketch: resolution dropdown placement
Sketch: resolution dropdown
✅ comfortable for changing the device size 1-3 times (the most common use case)
✅ dropdown is a well-known UI solution to the majority of users
🤔 going thought the whole list of devices would require a lot of clicks. To mitigate this we've decided to keep the dropdown open after selection and enable keyboard navigation for power users.
Resolution dropdown open
Secondary flow: manual resizing
Resize content manually

Adding comments

When the user clicks the ‘Add comment’ button, the content's current state screenshot is taken. This screenshot is displayed as a static representation of the dynamic content to which users can add markups and comments.

Commenting experienceComment
Navigating back to live content

To navigate back to live content user can click on the miniature in the corner or cancel the comment.

'Back to live content' widgetDimensions of the 'back to live content' widget

Browsing and replying to comments

We've introduced a system of annotations and filters to help users find the comments they are looking for. We've incorporated those elements into the existing workflows to be intuitive and predictable.

Desktop app interface with comments panel openComments panel with filters

USABILITY TESTING 🧪

Interactive proofing experience was tested in 2 iterations with 12 users (6 in each phase). I've conducted the sessions via Zoom. Users were sharing their screens while going through the interactive prototype.

TASKS

First impression
I asked users to describe what they saw on the screen and what they would use every panel for.

Results: Users are able to describe the majority of functionalities correctly. The interface looks clean and tidy for them.
Navigation
Users had to go through the website to find the ‘case studies’ subpage, then navigate back to the home page.

Results: It is clear for all the users how to use the browser-like navigation in the top bar. No problems recorded during this task.
Test resolutions
I've asked participants to test content against two devices, then return to the 'responsive' mode and change the width value.

Results: Users have no problems with choosing a device from the list. They find it challenging to come back to the 'responsive' mode. It wasn't clear to them that this item was clickable. After a hint, they complete the task and change the content width.
Add a comment
I asked users to add a comment regarding text in the footer. The goal was to test whether they understood that the screenshot was taken and if they could navigate back to live content.

Results: users were unaware that they were commenting on the screenshot. 4 of 6 were confused with the 'back to live content' box in the corner. They defined the flow as 'something that works but needs to be explained first.'
Browse comments
Users were tasked with finding a specific comment and replying to it. I wanted to find out if comments are easy to scan and if users understand sorting functionality, as we have gathered a lot of negative feedback about it so far.

Results: metadata is clear for all the users. They had no problem with finding and replying to comments. They admitted that sorting defaults should be different.

Turning findings into design changes

Interactive proofing experience was tested in 2 iterations with 12 users (6 in each phase). I've conducted the sessions via Zoom. Users were sharing their screens while going through the interactive prototype.

Here are the main issues detected after the first iteration. They were fixed and tested again in the second iteration with a 100% success rate.

Issue 1: Users don’t know how to come back to live content.

‘Back to live content’ label was added to the miniature to help users find a way to exit comment mode and come back to the live website.

Comparison of changes to the 'go to live content' widget between iterations
Issue 2: Users don’t know that they can come back to ’responsive’ mode.

In the second iteration, custom resolution inputs with placeholders were still visible even when a device was chosen from the list. It helped people understand that entering custom values and switching back to ‘responsive’ mode is available.

Comparison of changes to the resolution dropdown between iterations
Issue 3: Users don’t understand that they are commenting on a screenshot.

It was challenging to understand the distinction between browsing the live website and adding comments to the screenshot. We've added a short animation to show that a screenshot is being taken. This well-known pattern made it clear to the users that they are commenting on a static picture and are no longer working with the dynamic content.

Desktop app interface with screenshot animation
Back to top