Project Overview
In 2020, facing challenges from the COVID-19 pandemic, EA partnered with Virtual Wild and InVision studios to create a unique virtual experience promoting Super Bowl LV and Madden 21. This innovative effort aimed to reignite fan enthusiasm during a difficult year.
Overview
Recognizing the need for a more dynamic user experience, the Rooster Teeth Product & Engineering team initiated a project to enhance site functionality through "spotlight blocks." These flexible sections enable individual teams to promote their content, merchandise, upcoming events, apps, and other offerings directly on the homepage.
The Challenge
The existing homepage followed a "Netflix approach," presenting a vast amount of content to all user tiers. This one-size-fits-all strategy failed to effectively showcase the diverse content library, vibrant community, and engaging merchandise. To enhance user experience and achieve business goals, a more targeted, user-centric approach was needed—one that could better utilize homepage real estate for marketing, promoting content, merchandise, upsells, and more.
The Solution
The implemented homepage redesign for Rooster Teeth prioritizes a user-centric approach, eliminating the previous information overload. A dynamic structure now delivers targeted content based on user preferences. Personalized feeds, strategic highlighting of key content, and intuitive navigation all contribute to a more engaging experience. This redesign sought to align Rooster Teeth's rebranding efforts, showcase the site's programming flexibility and creating a welcoming entry point for new users while enhancing the overall experience for existing fans.
01
Discovery & Research
Project Goals
How might we introduce block types that create visual breaks between content carousels while also providing value for marketing, events teams, and merchandise?
Blocks can serve as visual breaks between content carousels while offering functionality and value for cross-market teams. These blocks will allow teams to market on the homepage and control block placement across the page. These blocks should be designed to minimize asset creation and be dynamic and data-driven, reducing the need for manual updates and enhancing the user experience by delivering relevant content automatically.
How might we make blocks reusable components?
Spotlight blocks should be designed as modular components that can be used across various pages on the site. These blocks should be easily integrated with the CMS, allowing for consistent application and flexible customization throughout the site.
How might we measure the success of the new spotlight blocks on the homepage?
Measuring success by tracking user engagement, click-through rates, and conversions. Monitoring user behavior, such as time spent on the homepage and interaction with blocks, will also help assess their effectiveness in driving discovery and engagement.
Applicable Insights From Existing Literature
To gain a comprehensive understanding of Rooster Teeth's past challenges and subsequent progress, we conducted a thorough review of relevant existing research. This efficient approach allowed us to capitalize on the valuable insights gleaned from previous studies and avoid duplicating efforts. View full survey here.
2021 Homepage Survey Summary
The survey revealed that users generally prefer a less cluttered homepage with relevant content. Users stated that they felt overwhelmed by the amount of content on the homepage.
User Verbatims
Some users crave personalization, wanting their favorite channels like Achievement Hunter front and center. Others enjoy browsing a variety of content for new discoveries. However, a common pain point is clutter. The current design feels overwhelming for some, prompting them to bypass the homepage altogether.
Identifying Target Users
Anonymous Users
Anonymous users, often discovering our content through platforms like TikTok or YouTube, may not know what they’re looking for when they arrive. They need more engagement and guidance. Spotlight blocks should provide company information, highlight the benefits of signing up or upgrading, and recommend content based on their viewing trends.
Free Users
Free users are typically familiar with our community and may be fans of one or two specific brands or shows. Despite their familiarity, these users still require engagement and guidance, especially when it comes to recognizing the value of upgrading their account. While compelling content and fandom are key factors in converting these users, the homepage should facilitate an easy and seamless process to encourage upgrades and introduce new content or information.
FIRST/ Premium Users
Our dedicated FIRST members need a homepage experience tailored to their fandom. Unlike free or anonymous users who browse for discoveries, FIRST members visit with a specific purpose. Their homepage should prioritize content that deepens their interests, such as upcoming live streams, fan meetups, community updates, contests, and exclusive content. This targeted approach will make the homepage a valuable hub for FIRST users to connect with the shows and community they love.
02
Ideation
Spotlight Blocks Overview
Spotlight Blocks are compact featured sections that offer remarkable flexibility. They can be placed anywhere on a webpage to strategically break up content and draw attention to specific elements. Designed to cater to different user tiers, these blocks can link to various destinations like the store, content collections, shows, Rooster Teeth's streaming service (RTTV), signup pages, promotions, or even app marketplaces. Importantly, Spotlight Blocks empower teams like marketing to recreate the homepage experience without a complete redesign, saving product design and engineering resources.
Dynamic Block Types
Featured Episode Blocks
The Featured Episode Block is a versatile tool for promoting an specific individual episode, upcoming show trailers, or highlighting series. It's entirely managed through our content management system, accommodating two titles and body copy that can feature episode descriptions or custom text. The block can display any episode, chosen within the CMS, and its specs and layout are predefined, streamlining the process without requiring asset creation.
Featured Episode Row
The Featured Episode Row Block provides flexibility by showcasing a minimum of four specific episodes uploaded into the CMS. This block empowers content management and marketing teams to effectively promote specific episode content.
Dynamic Featured Series Row
The Featured Series Row Block is a data-driven carousel that automatically populates with the most-watched content from the past 30 days. This feature reduces the need for manual updates and ensures the block remains fresh without becoming stale.
Hard Coded Community Row
The Community Row block was initially hard-coded as the MVP for this block type and showcases the top 6 community boards.
Hard Coded Devices Block
The Devices Block is utilized to promote all of Rooster Teeth's platforms and raise awareness of the app. Previous user surveys and community boards revealed that many users were unaware of Rooster Teeth's native and TV platforms.
Static Block Type
Static Blocks
Static Spotlight Blocks enable direct communication with users, showcasing events, merchandise, new releases, upcoming tentpole series releases, and member shoutouts. They are highly flexible, offering creatives the entire block container to design solutions tailored to the page. These blocks offer limitless possibilities and can be linked to any destination.
03
Design
Dynamic Block Types
Featured Episode Blocks
The Featured Episode design incorporated a default background glow to enhance vibrancy and attract users' attention, providing a contrast with the copy. This feature streamlined design work by eliminating the need for users to provide this asset in the CMS. Additionally, the cover art for the episode was derived from the existing episode card, while the title and body copy defaulted to the existing episode description but allowed for overrides if necessary.
Featured Episode Row
The Featured Episode Row leveraged existing episode card components, presenting a visual design opportunity by incorporating a second header for enhanced communication with users. We redesigned the next arrow buttons with a flashier SNES-style appearance, resonating with our gaming-oriented audience. Additionally, a frosted glass blur effect was introduced to the carousels, subtly highlighting peeking content on the edge episode cards to draw user attention.
Dynamic Featured Series Row
The Featured Row block underwent minor visual improvements during the transition from landscape series cards to portrait cards. This change helped distinguish series from episodes and playlists more effectively.
Hard Coded Community Row
The Community Row block utilized existing community cards to minimize redesign work for the initial MVP.
Hard Coded Device Promotion Block
The device block used to promote our apps received the glow treatment that was hard-coded to reduce design efforts. Unlike the static block, this block featured icon buttons for the individual apps, which were directly linked to the app store when clicked.
Merchandise Block
The merch block was used to promote featured collections for channel-branded clothing, with direct links to the shop collection within the Rooster Teeth Store. This images pulled directly from the store avoiding additional asset creation.
Static Block Type
Static Block 1.0 Final Design
The design of the static spotlight blocks featured an animated background glow for added vibrancy and user attention. While a template ensured consistency, the blocks allowed creative freedom when needed. The image design avoided containers, focusing on content with tapered edges to prevent hard cut-offs. CTA buttons were optional, and the entire block could be clickable. Static blocks were the most flexible of all block types .View full spec doc here.
Mobile Web
Responsive Design
We also prioritized designing for mobile web, recognizing that a significant percentage of our users accessed our content via mobile devices. Our design approach ensured that all blocks, including the spotlight and device blocks, were fully responsive and optimized for mobile web.
Designing The Content Management System UI/UX
CMS integration was critical in designing and iterating spotlight blocks. The CMS architecture and user experience were developed together, allowing users to create, edit, and reorder new block types easily on the user-facing side. Each block had specific criteria and fields for creation. My experience in redesigning the CMS facilitated the addition of spotlight blocks as a new feature. Additionally, he collaborated closely with backend engineers in work sessions to find solutions that reduced and maintained scope while ensuring a good user experience.
Managing Content For Different Platforms
We had to account for various user-facing platforms, including web, mobile web, native apps, and living room apps. To ensure consistency across these platforms, we designed block types that could be created and managed within the CMS for each platform. We addressed this challenge by developing a dedicated feed for each platform.
Managing Content Across Different User Tiers
With three different user tiers—FIRST, Free, and Anonymous—we needed to provide CMS users with a way to manage distinct content for each tier. To address this, we created separate feeds for each user tier, allowing for independent management of content on each homepage within the CMS.
Managing Content Blocks Within Feeds
Feeds contained the blocks in the order they were displayed on the front end, with options to add, remove, and rearrange them. This provided an easy way for CMS users to manage and customize the content on the home page.
Creating New Static Block Types
Static blocks could be created as one of the block types. Although these blocks required more effort and assets, they were flexible and served as a way to promote a wide range of content on the site.
Creating New Dynamic Block Types
Dynamic blocks required less effort and no additional assets from the CMS user. These blocks utilized existing metadata from the CMS to create specific blocks that primarily promoted content.
04
Implementation
Designing Page Experiences For Different User Tiers
At launch, we had three different homepages tailored to specific user tiers: Free (anonymous), free users, and FIRST users. The order in which the pages were structured was based on data suggesting what most users used on the existing blocks on the homepage before the redesign. We also incorporated spotlight blocks based on data learned from the onboarding spotlight blocks.
The New User Experience
The anonymous user journey featured a splash page experience where new users could land and learn about Rooster Teeth. This page highlighted the community, content, and the perks they could receive if they upgraded to a FIRST membership, using spotlight blocks to effectively communicate this information.
The Free User Experience
The free user experience on the homepage promotes FIRST upgrades, introduces users to the Live RTTV experience and community, and features series rows that highlight FIRST exclusive content to create FOMO. Additionally, the top episodes carousels, such as "Now Trending" and "Watch Later," are prominently featured, as most users indicated they use the "Now Trending" carousel to access the majority of the content they watch.
The FIRST/Premium User Experience
The premium user experience used a similar layout approach for its homepage but highlighted the perks that users get for being FIRST members using static spotlight blocks. Series rows were utilized to curate content that is exclusive to FIRST members, emphasizing the value of their membership.
Design System
Design System Integration
Spotlight blocks were designed and created within the Artemis design system, considering their various states and mobile versions. Each type was meticulously documented and available in the design system for engineers to reference and code accurately to the pixel. This enhanced cross-collaboration and efficiency, minimizing the need to recreate block types in future projects. It also enabled swift changes and versioning of new spotlight block types.
Outcomes of the Journey
Spotlight blocks became a cornerstone of our platforms, serving as a vital tool for marketing, channel managers, and content management teams. They played a key role in driving subscriptions, promoting FIRST memberships, boosting engagement with online events, and increasing traffic to our merchandise store.
Final Product
Due to the sunsetting of the site and apps following Rooster Teeth's recent shutdown, the live product cannot be viewed. However, prototypes were completed for this project. Check out the prototype here!
![[CITYPNG.COM]HD Blue Apple iPhone 12 Pro](https://static.wixstatic.com/media/8601f6_0a574c9dac0d4558bb9d8da81b5c7e52~mv2.png/v1/crop/x_309,y_140,w_1026,h_2053/fill/w_206,h_413,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BCITYPNG_COM%5DHD%20Blue%20Apple%20iPhone%2012%20Pro.png)
