Dolby Vision 

Filmmaker Challenge

Handling web UX for a multiphase microsite 

Overview

While at Envoy, I was asked to define a UX strategy, information architecture and prototype a fully responsive microsite for the AFI Conservatory Challenge sponsored by Dolby & Vizio. I led the UX efforts for both phases to elevate the brands and increase user engagement for the contest.

Hats worn

  • Feature Requirements

  • Concepting

  • Information Architecture

  • Wireframing

  • Prototyping

The Brief

  1. The site would have two distinct phases: voting for a contestant & announcing the winners.

  2. Deliver a responsive web experience that drives users to participate in a film voting contest for the American Film Institute and elevate the VIZIO brand.

Constraints

  • Limited project timeline for UX & budget for execution.

  • Leverage the voting & sweepstakes capabilities of the previous year's site, the UX for this portion could not be modified but adapted into the overall approach.

UX Goals

  • Celebrate the Filmmakers with an immersive user experience that gives their film the spotlight.

  • Generate user participation in voting for their favorite Films and returning to see the winners.

  • Educate users about Dolby Vision & Vizio's HDR technology.

Observed Painpoints

  • The previous year's site assumed that users would take a single path to access the voting call to action which was not true based upon analytics.

  • The voting mechanism of Phase 1 needed to be modular for the development team to quickly configure from on to off for Phase 2, removing the risk of additional rework.

Explorations

Feature Documentation

1/8

Focus vs. Immersion Concepts

With the feature requirements defined and the macro UX defined via the site map, it was time to start concepting. 

Vizio AFI Concept

The Work

Information Architecture

  1. Proposed a clearly defined macro UX approach for both phases as a site map diagram, accounting for user flows through the various required screens of the project scope.

  2. Delivered an interactive prototype for desktop & mobile to account for the micro UX per page that adhered to the vision laid out by the site map per phase.

Site Map for Phase 1 & 2

Prototype Video for Desktop: Phase 1 Voting

Prototype Video for Mobile: Phase 1 Voting

Phase 2 Desktop Final

Be sure to explore the Phase 2 site, the microsite UX defined continues to be used for the same yearly contest. https://filmchallenge.vizio.com/

Takeaways

Preparing all the UX features across 2 phases up front and investing the time to create a clear site map along with page level requirements saved time during the design phase. By planning the macro & micro UX agnostic of design, it allowed for quick concept explorations of multiple concepts that retained the same requirements - this control variable leads to a clear focus for the project's execution.

Credit to the Envoy creative crew for their collaboration on this project.

 

Allow me to introduce myself.

I’m a UX professional with 10 years of experience. I utilize user-centered design to craft digital products. My past work covers every type of digital product type: from apps for iOS & Android, to responsive websites, to smart home devices and in flight entertainment systems for airlines.

My favorite tools of the trade:

  • SketchApp, InVisionApp & Zeplin

  • Keynote, Google Analytics & Lighthouse  

  • Confluence, Jira & Basecamp

 

stay in touch.

Bye now!

Woodwardux@gmail.com

(949)-542-2491