YouTube Video Ad Builder (redesign)

YouTube Video Ad Builder (redesign)

Re-design a video ad creation tool. Users choose an ad theme to guide them through creating short video scenes and photos, which are then uploaded into a template, and stitched together into a cohesive video ad.

 

The Design Process

UX research

  • Existing research.

    Met with our primary User Researcher on the project to understand existing user feedback and input, and collaborated to produce a plan for testing the usability of the current UI.

  • User testing.

    Observed all of the user research sessions conducted by our User Researchers, took notes, debriefed afterwards with the researchers, read and discussed the researchers’ final report and recommendations with the team.

  • Fixit list.

    Organized the issues from my notes and the User Research report into a list of UX issues, and prioritized the issues with the project team.

Design

  • Design requirements

    • Compatible with current backend
    • Intuitive and usable by novices
    • Inspires confidence and user trust
    • YouTube branding
  • Redesign the information architecture and user flows.

    Split the UI into two primary views: template selection and video construction. Introduced a visual hierarchy to convey relationships between elements. Streamlined and clarified the user flow by removing steps, hiding secondary features, and providing a clear path to completion.

  • Simplify the UI.

    Reduce visual complexity by removing all UI elements that did not contribute to the user flow. Simplify the color palette to direct focus to core interactive elements.

  • Address usability issue list.

    Worked primarily with the front-end engineer to redesign the UI, addressing usability issues identified in user research (within the constraints of the existing backend).

  • Wireframing and mocks

    Iterated on new design ideas with the team, stakeholders, and users, until we converged on the final designs.

screenshots of old and new designs

Before

After

 
 

Validation

  • User testing.

    Worked with the User Researcher to prepare a user testing plan to validate the new designs.

  • Instrumentation.

    Worked with the PM and backend engineer to instrument core parts of the workflow to understand how new and experienced users are using the tool, and how that use changes over time.


 

UX before the re-design

 

Original 'Select a theme' page

Usability issues

The original design lacked a coherent user flow through the product and suffered from visual clutter. Users struggled to understand how to use the app due to poor information architecture and a lack of instructions or visual signifiers (perceived affordances).

Template selection and video creation was split across several tabs on a single screen. Changing the template affected subsequent tabs, but the dependencies were not transparent to the user.

Original workflow

  • Screen 1
    • Tab 1 – Select a template (theme).
    • Tab 2 – Upload photos.
    • Tab 3 – Select background music.
    • Tab 4 – Upload videos.
    • Tab 5 – Preview and publish to YouTube.


Marketing page

The problem: The landing page was visually busy, did not clearly explain the value of the product, and the main call to action was hidden.

Original "landing page"

 

Interface

  1. Pick a theme.

    The problem: Users didn’t know where to start on this page. Most users began by clicking in the timeline at the top, which was not interactive until a theme is selected. However, the interface lacked visual indicators or feedback to convey which elements were interactive, or what actions were available.

    Original 'Select a theme' page

  2. Upload photos.

    The problem: This page had far too much going on, and due to the bold color used liberally, there were no points of focus to guide the user through the page. Due to the visual clutter, users also could not discover the preview button, so a white background had been added behind the button, worsening the visual clutter. Users still did not discover the button.

    Original "Upload photos" page without photos uploaded yet

    Original "Upload photos" page with some photos uploaded

  3. Select background music.

  4. Upload videos.

    The problem: Similar to the photos upload tab, the liberal use of strong color visually cluttered this page, preventing any distinct points of focus to guide the user’s attention. Users could not tell which screen elements were interactive.

    06_YOU_Tabs_r46_videos_empty

  5. Preview video.

    The problem: Users were unable to discover the hidden ‘preview’ button and had to be prompted to expand the preview accordion. States of video playback were unclear.

    Original "preview video" page

  6. Publish to YouTube and promote with AdWords.

    The problem: This page obscured its purpose and flow. Inputs and context kept changing as users filled in info. Instead of showing all the required steps ahead of time, new inputs kept popping up and the prompts changed, confusing users.

    Original "preview and publish video" page


 

UX after the re-design


vab.01.Start

Re-design

  • Separated functionality.

    Split template selection and video construction into two separate screens to clarify the workflow and dependencies.

  • Theme selection

    Provided sample videos to preview and select themes, and set expectations. Added filters for scalability as more themes become available.

  • Video construction.

    Added a ‘how to’ video and a printable scene instruction guide as the first step. Simplified the construction flow by reducing steps and using progressive disclosure. Designed more intuitive interactions. Allowed more than one way to perform actions. Provided better visual and interaction signifiers to convey interactivity.

New workflow

  • Screen 1
    • Select a template (theme).
  • Screen 2
    • Tab 1 – Start project (Intro video and printable shot guide).
    • Tab 2 – Upload photos and videos.
    • Tab 3 – Select background music.
    • Tab 4 – Preview and publish to YouTube.

 

Marketing page

The new marketing page is simple and clearly states what the product does. The call to action is clearly visible as a “Get started” button.

Video Ad Builder marketing page

 

Interface

The new interface provides 4 clear steps to create a business video.

  1. Pick a theme.

    The first page was redesigned to serve the single purpose of selecting a theme. Users can preview sample videos for each theme to find the best fit. A ‘show me how’ link at top right corner provides a video explaining how Video Ad Builder works.


    vab.01.Start

  2. ‘How it works’ video.

    An introductory video helps users understand the steps involved in making a video ad, providing guidance and helpful tips and tricks.

    'How it works' video screen

  3. Upload media.

    The video and photo upload tabs were combined into a single media upload tab. The timeline is shown only within the construction user interface. Users select an asset on the timeline, and details about that asset are shown below.

    video construction screen with empty timeline

    Add or remove assets by double-clicking on the appropriate timeline asset square, or by clicking the image for the selected asset below the timeline. Available actions are indicated by interactivity, icons, and text.

    Upload media asset UI with partially filled timeline

  4. Select background music.

    Modified the current YouTube music picker to include a “selected” state and to fit into a tab within the construction interface.

    Background music selection tab view

  5. Preview video.

    Improved the discoverability of the preview button by placing it next to the timeline. Improved system status feedback and messaging to convey state of the video under construction.

    Video preview view

  6. Publish to YouTube.

    Added a mini-player to review the final cut. Provided a static form so that users could preview information and steps required to complete the user flow.

    Publish video to YouTube tab

  7. Promote the video with AdWords.

    Added a success screen after publishing to YouTube. Provided links for sharing the published video with colleagues to get approval before promoting as an ad. Provided links back into the construction flow for edits, and links to AdWords to begin advertising promotions.

    Publish success and promote screen