Compare Drafts

VidMob

Overview

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

Slides

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


The current workflow for clients involves giving feedback on multiple drafts of an asset, a meticulous task that consists of revisiting previous assets numerous times to see if feedback was addressed from draft to draft.


Simply put, the Compare Drafts tool makes it possible to view two different assets + their 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. 

As a result, a plethora of pain points had already been voiced by the time I arrived on the scene. Existing feedback platforms have features that VidMob has not yet introduced into ACS. Furthermore, VidMob clients were frustrated with the process for reviewing feedback on previous drafts. Finally, stakeholders within VidMob (Project Managers) said they were spending unnecessary time 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 are spending unnecessary time to bootstrap their own way to compare drafts

ideation

Let's do some User Research!

At this point, I recruited three Project Managers at VidMob to conduct user interviews. Their insights produced several use cases which I used to guide my wireframes.

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.

Additionally, I conducted a competitor audit to explore current solutions and gain inspiration from shipped designs of compare modes.

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.

Using the data from user & market research, I explored some solutions in low-fidelity wireframes.

Looking at the pros and cons of each solution, I decided to prototype 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 & Usability Testing

After developing the hi-fi prototype, I crafted protocols for usability testing sessions which were conducted via Lookback. I sent the test to six Project Managers at VidMob, three of whom did user interviews; the other three were a fresh set of eyes.


The usability testing sessions helped validate key assumptions regarding user experiences. On the other hand, this testing session invalidated a key assumption that I had initially 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 accordingly and omitted the overlay exploration. After a meeting with my PM, I handed the final designs to the engineering team. 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!

learnings & key takeaways

Compare Drafts was the first end-to-end design initiative I have ever helmed. It taught me how to empathize with multiple stakeholders, communicate with PMs and engineers, and work quickly to conceive and test my ideas. Additionally, this experience exposed me to the underbelly of B2B SaaS products and provided me with opportunity to design for desktop and mobile. Overall, I have my incredibly patient and gracious managers to thank for their guidance, support, an trust throughout this process.

 

Using Format