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
-
The site would have two distinct phases: voting for a contestant & announcing the winners.
-
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
Focus vs. Immersion Concepts
With the feature requirements defined and the macro UX defined via the site map, it was time to start concepting.
The Work
Information Architecture
-
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.
-
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:
-
Figma, Sketch, Adobe XD, InDesign, Invision
-
Jira, Confluence, Trello, Slack, Zeplin
-
Google Analytics, Google Suite, Miro, LookBack, Dovetail, UserInterviews.com, UserTesting.com