Interactive Content Proofing

for Workfront web app

New experience for reviewing and approving interactive digital content.

My role
Team
Company
Year

UX and UI Design
Research and User Testing

Product Manager
2 Fronted Developers
2 Backend Developers
QA Specialist

Designer

Workfront

2018

Project Overview

The Product

Workfront provides an Operational System of Records - advanced work management platform for enterprise customers. Online application dedicated for reviewing and approving digital content is an important part of the system. Thanks to this tool users can collaborate and go through review process.

The Problem

User would like to proof interactive content - live websites and banners. They need to review interactions, visuals and test projects against different resolutions. Users expect to work in one tool with all types of content (interactive, pdfs, pictures
and videos). Now, to review live content, they need to use old version of the tool that provides only very basic functionalities.

The Solution

Create a proofing experience for interactive content within proofing tool used currently for reviewing static content and videos. New solution, on top of standard functionalities, should provide ability to change resolution and resize, comment interactions in given moment and easily navigate though the live content.

The Process

Understand

Context study

Workfront Proof is an online tool dedicated for reviewing and approving digital content. This is a part of the platform where collaboration around content takes place. Ability to review content of all kinds - static pdfs, videos and interactive websites or banners is company's strategic direction. 

 

Increasing interest in proofing interactive websites, banners and html email templates created need for new, modern and rich experience. Currently, customers are using an older Flash version of the app (screenshot on the left) which has a lot of limitations and seems outdated.

 

Since launching, current version of rich media proofing experience demonstrated great market fit. In order to maintain engagement and develop customer base it is necessary to provide updated tool with less limitations using modern solutions.

Flash version of the proofing tool

User pain points

List of core problems that new solution aims to solve.

Inability to create proofs from https (secure) and iFrame protected websites.

Flash is limiting these functionalities. Currently, it is impossible to test content against different resolutions and devices

It 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. 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.

Business requirements

The most important objectives for this project.

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 amount of support work needed.

Analyse

The Problem Statement

Users need to review interactive content. Solution should deliver an intuitive way to go through their flow smoothly, test all the requirements without leaving the app and share feedback easily.

Types of rich media content

Interactive websites

Animated banners

Email templates

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.

Understand Personas

Reviewer

This type of user is concentrated on testing content, adding comments and discussing problems with others. Navigation and commenting experience are the most important functionalities.

Approver

Main goal is to find out whether all issues were solved and make decision about approving latest version of the document. The most important parts are browsing comments and adding decisions.

Sketch

Concept

Functional areas

General idea on how toolbars and functional areas should be placed.

Functionalities

The most important functionalities within the functional areas.

Changing resolution concepts

Two ideas on how to approach problem of changing resolution and choosing devices.

Resolution dropdown

Dedicated for users who change resolution once or twice.

Resolution tool

For advanced users who need to test on multiple resolutions. Easy navigation makes going thought the predefined list of devices one-by-one and compare changes on the screen. This is a floating element that can be moved around for user's comfort.

Top bar

Area dedicate for navigating the proof. It contains browser-like navigation for easy review of live websites. 

Bottom bar

Tools connected with viewing content - panning, zooming, changing resolution and opening full screen mode.

Design principles

Design principles for the Design Team included in 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 customer 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.

UX Flow

Basic flow that almost all users go through when using interactive proofing.

Key activities

Taking into consideration UX flow we managed to choose activities which are crucial for all the users.

Navigating live content

Testing against different resoultions

Adding comments

Browsing and replying to comments

Design

Navigating live content

Top bar enables navigation within the proof - thumbnails and sets - and through the live content - navigation which works exactly the same as the one in the browser.

Tesiting live content

Functionalities included in the bottom toolbar and resolution dropdown let users check content behaviour and go through all the testing requirements.

It is also possible to change resolution manually using handlers placed around the content.

Adding comments

When user clicks ‘Add comment’ button screenshot of the content current state is taken and displayed. User can add markups on the static picture to show which areas need to be changed. 

 

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

Device name or custom resolution of the screenshot are displayed in the comment box.

Browsing and replying to comments

Users should be able to easily find all necessary information about the comment. 

Test and iterate

Usability testing

Interactive proofing experience was tested in two iterations on six users in each phase.
Here are areas I was looking for feedback on:

First impression

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

Results: Users are able to correctly describe majority of functionalities. Interface looks clean and tidy for them. 

Navigation

Users had to go though the website to find ‘case studies’ subpage and then navigate back to the home page.

Results: it is clear for all the users how to use ‘browser’ navigation in the top bar. They have no problems during this task.

Navigation

Task was to test content against two devices, then come back to ‘responsive’ mode and change width value.

Results: Users have no problems with choosing device from the list. They find it difficult to come back to ‘responsive’ mode. It wasn’t clear for them that this list item was clickable. After a hint, they successfully complete the task and change content width.

Add comment

I asked users to add comment regarding text in the footer. Goal was to test whether they understand thet screenshot is taken and if they are able to navigate back to live content.

Results: users were not aware that they are commenting screenshot. 4 of 6 were confused with ‘back to live content’ box in the corner. They defined it as ‘something that works but needs to be explained first’.

Browse comments

I wanted to find out if comments are easy to scan and if users understand sorting functionality as we gather a lot of negative feedback about it so far.

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

Scenario

Turning findings into design changes

To address all the issues that came up during the user tests we decided to make adjustments to the designs and test interface once again. Results of the second iteration were great - only one user struggled with coming back to live content, rest of the tasks were 100% completed.

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

‘Back to live content’ label was added to the miniature. It made it clear to the majority of users how to exit comment mode and come back to the website.

Iteration I

Iteration II

Issue 2: Users don’t know that they can come back to ’responsive’ mode.

In second iteration, boxes with ghost text were visible even when other device was chosen. It helped people understand that option of entering custom values and switching back to ‘responsive’ mode is available. 

Iteration I

Iteration II

Issue 3: Users don’t understand that they are commenting a screenshot.

We decided to add a short animation to show that screenshot is being taken. This well-known pattern made it clear to the users that they are commenting static picture and are no longer working with the dynamic content. 

Key learnings

Always describe non-standard elements

We decided to follow pattern introduced by YouTube - miniature in the corner of the screen leads to live content. Unfortunately, it turns out that analogy was not clear for our users. Problem was solved after adding description to the small window. It is a good lesson for the future that, even when following well-known patterns, it is worth to test them as every app is different and its context can change user perception.

Users treat all types of content equally

When building the product and knowing all the technical aspects, it is easy to forget that users have very different perspective. It turns out that for majority of users, especially beginners and mid-level, it does not make any difference if they proof video, photo, pdf or interactive website. They assume that all functionalities should be available at all times. It is surprising that some of them did not notice that toolbars change depending on the type of content. They just use the tool intuitively. 

alicjasuska.gopher@gmail.com​  |  Tel: +48 502 153 663