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.

Diagram showing creating a potential opportunity to add customer value

Flow

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

FUNCTIONAL AREAS

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

Navigating live content

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

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

✅ 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

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

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.

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

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.

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.

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.

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

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.

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.