Last Update: January 2025

Last Update: January 2025

Last Update: January 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

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

  1. Determine which product requirements are essential for the Compare Drafts MVP.

  2. Gain a better understanding of the ideal user experience for both clients and PMs.

Key Findings

Key Findings

  1. Comparing drafts side-by-side in Creative Studio greatly reduces review time compared to manual, off-platform methods.

  2. Clients prefer to view the asset as a complete product rather than frame-by-frame.

  3. 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, olrder 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

Entry Point

Side Panels Expanded (Portrait)

Side Panels Collapsed (Landscape)

Side Panels Expanded (Landscape)