As part of a bigger campaign, Medalla Light– Puerto Rico's largest beer brand, asked for a website redesign. The campaign was aimed to represent people who want change, non-conformists in a positive way.
To represent the brand’s “nonconformity” with the normal, we were tasked with the creation of a 360° video website. The sections were specified beforehand: campaign videos, lyrics, behind the scenes content, interviews and a profile picture mask tool. Every couple of weeks, new content would be released.
For this project I was given the role of UX Designer. User research was already done and the content was specified, so my research was focused on finding what could actually be built within the current capacities and limitations of 360° technology in web development, while still allowing an intuitive experience for the user.
Research
The experience was planned to be the same regardless of the device. The request was to design a 360° video website with buttons to access additional content. However, in mobile devices, video can’t play without a user action to initiate it. Being an alcohol brand, it is required to confirm the visitor is not under-aged, so that button click was also used to start the javascript function to play the video. Audio was disabled in the background video both for user experience reasons as well as mobile support, since it does not display in Safari if it has sound.
There are two ways to experience panoramic video: by swiping or by moving a device with a gyroscope. However, tapping buttons in gyroscope mode can be challenging for some users. This website was designed to load in gyroscope mode when viewed from a compatible device, with an option to toggle to swiping mode for easier navigation. A fixed menu was also included for accessibility.
UX Design and wireframes
To visually represent a 360° space in a 2d wireframe, I decided to design the wireframes based in equirectangular projections, a common panoramic video format which could be seen like an unfolded box.
For easier user experience, navigation elements would be fixed in the screen, while allowing the panoramic video to be controlled by dragging or using the device gyroscope. Being a mobile first website, there would be no hover state in the 360° space. All buttons were designed to be clear and easy to click while moving with the video background.
Being a mobile first website, there would be no hover state for buttons in the 360° space. All buttons were designed to be clear and easy to tap while moving.
Section: Join the non-conformists
The campaign consisted of urban poets declaiming poetry dedicated to the non-conformists. Offline promotion of the campaign included hand painted murals of selected verses. Initially, the website would include a section to share the verses, and other section to “join the non-conformists” with a tool to add a graphic mask to your social media picture. To integrate better with offline efforts, these sections were merged. A tool was created to allow users to add a selected verses in a hand painted style to their pictures. Two muralists were commissioned to design the artwork and a custom typeface.
