YouTube FanFest Case Study
YouTube FanFest rapidly expanded in the last few years from holding a single festival to an annual worldwide tour. To better present itself to their growing fan base, they went through a global rebranding exercise.
Following suit, YouTube FanFest’s website had to be revamped to highlight its fresh identity, accommodate the new brand architecture and promote their varied events while uniting their multi-national audience under one umbrella. Our biggest challenge was emphasizing the global reach of the brand yet designing a universally easy-to-use website that would fit the needs of the varied intended audience.
We started out gathering ground while the rebranding team were still engaged. It then progressed into a 5 week full on design-sprint approach working intimately with the client and conducting user tests to reduce risk and uncertainty. My role was to lead the user experience and interface aspect of the website’s development.
Discover
To build empathy at the start of the project, we conducted usability testing surveys on a group of users to identify insights and pain points with the existing site. From there we gathered a couple of crucial findings. These details were later developed into two main user archetypes that would govern our UX process — the superfan and the value-seeker. Not forgetting to take our secondary audience from the B2B aspect, the same was also conducted with the business partners. A user journey map was then developed to clearly define the user’s mindset from awareness to the event itself.
The user engagement flow was created to map out a fan’s process from awareness to information sourcing, to decision making and finally the event day itself. From this we managed to locate opportunities where the website would be able to add value and potentially elevate the brand experience for the user.
Competitor analysis was also conducted to survey the market and better understand how to position the brand within the digital space. On analyzing the site’s annual current audience data through Google Analytics, it revealed 74% of our audience as predominantly mobile users. This solidified our decision to design with a mobile-first approach.
The site analysis provided clear outcomes to streamline information by funneling the user through the site, as apposed to overwhelming them with information. To create a space to educate users on what the event is about and to add dynamism into site to engage the user better. Our proposal was to turn it from its initial starting point as a simple guide into an immersive platform that could truly add value to the brand.
Define
The business objectives from the client were straightforward. The website was to function as a repository of information for FanFest, a Call-to-Action to buy tickets and feature the event live streams. Having gathered insights from the users and the business partners, these three main design principles were established as supporting pillars to further expand that vision in line with the brand’s greater objective of connecting Creators with their community globally. This led us to our UX value proposition.
The new YouTube FanFest website aims to showcase the influence of YouTube powered by our fans and creators. An easy-to-use platform that brings alive the most exciting festival content, updates and provides an opportunity to meet the creator in person, for our fans.
The main challenge remained being able to accommodate for the ever expanding brand architecture, ensuring that the website was scalable for all event formats. Our key metrics of success were defined as improved brand perception, increased ticket sales and repeat visitors.
Ideate
To begin, the initial site map was drawn up to provide the barebones for our discussion. To create the Minimal Viable Product, we mapped out the main user needs, along with nice-to-haves from the survey and the business must-haves to come up with a feature list that had engagement quality yet reasonable investments.
The site map was then expanded to include the variations and features list as planned. A focused experience was also mapped out on how users are driven to the site and given the scenarios where they would land on.
One of the biggest challenges was making a big site seem small, how could a user be aware of the scale yet feel like the page was specifically tailored for him/her? We utilized cookies for first time users and prioritized messages with the help of toasts.
The next challenge was figuring out the system to ensure that the different types of events would seamless fit in the navigation. We worked closely with the technical team and the client from the start to iron out logic and features, prioritizing the necessities over flair.
Prototype
The design process started with sketches and wireframes, from mobile up to desktop. These were also brought to an intimate group of users to test specific features. Sticking with material design’s principles, we made a design decision to adapt to the 8pt grid system.
The wireframes were framed around the use cases discussed earlier to identify loopholes and solidify the different user journeys. A click-through prototype was also created using Principle to better understand the site flow.
On UX sign off, these wireframes were then developed into digital high-fidelity design and testing. The frames were created based on user needs, with the Event Page being the main focus, it expanded to the Tour Page, About Page and lastly the Archive Page.
The navigation alone took a conscientious effort to nail, from grids to sliders to timelines, we tried multiple iterations to classify our various events — Single City / Country Tours / Single City with Multiple Stages / Community Events / Country Tours with Multiple Stages. These ended up being simplified in favor of a clean typographical approach.
The design’s main guideline was to be inline with the rebranding. It needed to display dynamism and freshness yet maintain structure and usability. This was carefully balanced throughout the site by incorporating the light brush strokes symbolic of the new identity.
Managing typography through the site also proved to be a challenging feat, ensuring web-friendly brushstroke fonts were available in the myriad of languages YTFF would be touring.
Key interaction points were then envisioned and put together in an aspirational mock for a better grasp of the experience.
Summary
As much as effectiveness and usability is priority for the user, our secondary audience, the business end, also needs to be cared for. Managing these two arms to an agreement was particularly challenging given a global client of such scale. This I found was overcome by including both voices early on and actively engaging them in the process. From the business end I truly learnt that creating a platform is easy but user experience is not solely a frontend product but also important to the CMS that governs it.
I am currently working on improving the interaction elements in Phase Two of the project, gathering feedback, our metrics and analytics tracking for further improvements.
Credits
Kudos to the Toaster team who worked on this project together.
Back-End: Dominic Santos / Oliver Dooley
Front-End: Darius Baker / Kencana Kesuma
