Interactive Content Proofing
for Workfront web app
New experience for reviewing and approving interactive digital content.
UX and UI Design
Research and User Testing
2 Fronted Developers
2 Backend Developers
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
General idea on how toolbars and functional areas should be placed.
The most important functionalities within the functional areas.
Changing resolution concepts
Two ideas on how to approach problem of changing resolution and choosing devices.
Dedicated for users who change resolution once or twice.
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.
Area dedicate for navigating the proof. It contains browser-like navigation for easy review of live websites.
Tools connected with viewing content - panning, zooming, changing resolution and opening full screen mode.
Design principles for the Design Team included in UX Operating Agreement.
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.
Reuse patterns the customer already knows and introduce new interactions that are enjoyable, delightful, and set new industry standards.
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.
Basic flow that almost all users go through when using interactive proofing.
Taking into consideration UX flow we managed to choose activities which are crucial for all the users.
Navigating live content
Testing against different resoultions
Browsing and replying to comments
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.
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
Interactive proofing experience was tested in two iterations on six users in each phase.
Here are areas I was looking for feedback on:
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.
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.
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.
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’.
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.
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.
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.
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.
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.