Last Update: March 2025

Last Update: March 2025

Last Update: March 2025

Company

VidMob

Roles

UX/UI Design

User Research

Prototyping

Team

1 Product Designer

1 Product Manager

3 Developers

Timeline

3 months

(Jun—Aug 2021)

Compare Drafts

Compare Drafts

I led the design for Compare Drafts, a collaboration tool that streamlined interactions between brands and creatives within a unified UI.

Overview

Compare Drafts streamlines creative feedback by enabling side-by-side video review within VidMob’s Creative Studio.

Compare Drafts streamlines creative feedback by enabling side-by-side video review within VidMob’s Creative Studio.

Previously, users had to download assets and manually resize windows to compare drafts. Now, brands and creatives can review, comment, and finalize ads seamlessly in one place—eliminating friction and improving collaboration.

Background

Company

VidMob provides an end-to-end technology solution for all of a brand’s creative needs.

VidMob provides an end-to-end technology solution for all of a brand’s creative needs.

It is an integrated platform combining AI- powered creative analytics with a production workflow system connected to a global network of expert creators.

Problem

VidMob’s Creative Studio feedback tool is a key feature for clients. However, it lagged behind competitors and caused inefficiencies.

VidMob’s Creative Studio feedback tool is a key feature for clients. However, it lagged behind competitors and caused inefficiencies.

Clients struggled with comparing feedback on multiple creative drafts, while internal stakeholders wasted time manually setting up side-by-side comparisons.

Old UX

Before, users had to download video drafts and manually arrange windows side-by-side.

Before, users had to download video drafts and manually arrange windows side-by-side.

Research

Summary

Research goals

Research goals

Determine which product requirements are essential for the Compare Drafts MVP.
Gain a better understanding of the ideal user experience for both clients and PMs.

Key findings

Key findings

Comparing drafts side-by-side in Creative Studio greatly reduces review time compared to manual, off-platform methods.
Clients prefer to view the asset as a complete product rather than frame-by-frame.
Project Managers typically compare the latest approved draft with a rejected one, focusing their feedback on the rejected draft.

Discovery

User interviews

User interviews

I conducted chats with Project Managers at VidMob, responsible for facilitating collaboration between brands and creatives.

Requirements

Requirements

1

Draft Order

More recent drafts on the right, older draft on the left

2

Client Feedback

Restrict feedback to only the most recently approved draft for clients

3

PM Feedback

Restrict feedback to only the most recently rejected draft for PMs

4

Feedback Panel

Ability to view feedback for both videos simultaneously

5

Buttons

Add download, share, and accept as final buttons for all approved drafts

6

Affordances

Allow fullscreen and individual audio adjustment for each draft

Competitors

I also conducted a competitor audit

I also conducted a competitor audit

Cons

No option to view past comments or feedback during draft comparison

Pros

Easily toggle audio for each video clip
Intuitive selection and switching of clips in compare mode

Cons

The single feedback panel doesn’t clearly indicate which draft it belongs to
No option to playback drafts in compare mode

Pros

Toggle feedback for all versions
Sort feedback by date
Draw on screen

Cons

Screen real estate is cluttered with buttons, assets, and feedback panels, reducing the view of the assets

Pros

Feedback panels for both drafts are visible in compare mode
Clear indicators for possible actions and button associations with drafts

Cons

No option to view past comments or feedback during draft comparison

Cons

The single feedback panel doesn’t clearly indicate which draft it belongs to
No option to playback drafts in compare mode

Cons

Screen real estate is cluttered with buttons, assets, and feedback panels, reducing the view of the assets

Explorations

Wireframes

I focused on identifying the most important on-screen elements at any given time.

I focused on identifying the most important on-screen elements at any given time.

I mocked up a low-fi prototype and conducted user testing sessions with each interviewee.

I mocked up a low-fi prototype and conducted user testing sessions with each interviewee.

Testing

I developed an interactive prototype for Project Managers to walk through the draft comparison journey.

I developed an interactive prototype for Project Managers to walk through the draft comparison journey.

Results

User testing findings

User testing findings

1

Users want feedback panels and video playback visible together

2

Users easily identified actions and accessed Compare Drafts

3

Users want a shortcut for quick Compare Drafts access

4

Users want a visual separator for video players in shared space

5

Make the older draft dropdown menu more subtle

6

Users found the draft ordering intuitive

Final Designs

Final Designs

Entry Point

Side Panels Expanded (Portrait)

Side Panels Collapsed (Landscape)

Side Panels Expanded (Landscape)

Summary

Compare Drafts streamlined creative collaboration, making it easier for brands and creatives to review ad iterations.

Compare Drafts streamlined creative collaboration, making it easier for brands and creatives to review ad iterations.

The feature shipped into production shortly after my internship, enhancing feedback workflows for both clients and internal teams.

Thanks for reading!

Thanks for reading!

Interested in more? Feel free to check out another case study.

Contact

Let's make something special together

ryanyee00@gmail.com

Unify

I designed growth pages for Unify's marketing website.

Contact

Let's make something special together

ryanyee00@gmail.com

Back Home