Compare Drafts

VidMob

Overview

Led an end-to-end design process from user research to shipping final designs for the “Compare Drafts” initiative.

Roles

Product Design Intern

Team

Andres Maza, Senior Designer

Emily Rinehart, Director of Product Design

Michael Jeong, Product Manager

Timeline

June 2021

to

August 2021

background

What is Compare Drafts?

Compare Drafts is a design initiative that added a tool to VidMob's primary platform, Agile Creative Studio (ACS). ACS allows VidMob clients to give feedback on creative assets, such as video ads or marketing assets. The current workflow for clients involves providing feedback on multiple drafts of assets, a meticulous task that consists of revisiting previous assets numerous times to see if the designer/animator addressed their feedback. 

Simply put, the Compare Drafts tool makes it possible to view two different assets + feedback on the same screen. During my internship, I was responsible for leading this design initiative from user research to engineering handoff.

problem

How can we improve the ACS Feedback experience for stakeholders?

The feedback tool on ACS is the most frequently used feature by clients on VidMob's platform. However, other platforms on the market have additional features and affordances that VidMob has not yet introduced into ACS (such as the ability to view two assets on the same screen). Furthermore, VidMob clients have voiced pain points about the current process for reviewing feedback on previous drafts as inefficient. Finally, stakeholders within VidMob (Project Managers) who use ACS for their work have articulated they are spending unnecessary time reviewing assets by bootstrapping their own side-by-side feedback layouts. To summarize:


1. The current features on the ACS feedback tool are falling behind competition

2. Inefficient workflow for Client who want to check the changes on previous drafts

3. Internal stakeholders (Project Managers) are spending unnecessary time to bootstrap their own way to compare drafts

ideation

Let's do some User Research!

I recruited some internal stakeholders at VidMob (Project Managers) to conduct user interviews. These interviews produced various insights and use cases which I used to guide my preliminary wireframes. Additionally, I conducted a competitor audit to understand how other platforms have designed their compare modes. Overall, the goals of this research were to determine which product requirements were essential for the MVP and gain a better understanding of the ideal user experience for VidMob's clients and project managers.

Key Findings:

1. Ability to compare two drafts side-by-side on the ACS platform would greatly reduce the amount of time it takes now to review drafts when doing it manually/off-platform

2. Clients want to see the asset as a whole product and don't need to see each frame

3. Project Managers typically compare the most recently approved draft with a new draft that they rejected. In this case, they want to leave feedback on the rejected draft, not the approved one

wireframes

Crafting the interface.

Below are some solutions I explored in low-fidelity wireframes. Looking at the pros and cons of each solution, I decided to go with a design that made the left feedback panel an overlay. This decision aimed to preserve the limited screen real estate of the feedback tool.

Prototyping & User Testing

After developing a prototype of the high-fidelity designs, I sent out user testing sessions via Lookback to Project Managers around VidMob. The user testing sessions helped validate key assumptions regarding user experiences. On the other hand, this user testing session invalidated a key assumption that I had originally made:

Stakeholders would rather see both feedback panels and both assets at the same time, rather than one feedback panel as an overlay.

results & metrics

A new way to compare drafts.

Due to the discovery made during user testing, I iterated the final designs to include feedback panels and assets on the same screen. After one last meeting with my PM, I handed the final designs to the engineering team via Zeplin. The final designs will be shipped onto the VidMob platform by the end of this year. I hope that the Compare Drafts initiative can streamline the workflow for both VidMob's clients and internal stakeholders who use the feedback tool on ACS. 

There are a lot more decisions and detail that went into this project than I mentioned here. If you'd like to learn more, please reach out!

 

Using Format