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.
Rooster Teeth
Mobile Web Experience
Designing a dedicated mobile web experience to improve new user engagement.
Overview
In 2023, as a Senior Product Designer at Rooster Teeth, I played a key role in addressing a critical need identified by the Product & Engineering team—a surge in new mobile users experiencing a subpar mobile web experience. Recognizing this as a significant barrier to engagement, the team prioritized the creation of a mobile web experience. This project was designed to seamlessly onboard new users and foster deeper connections with the Rooster Teeth brand.
Challenge
How might we introduce new users to our brand, increase app downloads for better engagement and retention, and improve navigation to the store?
The current user journey from social platforms to the Rooster Teeth ecosystem is not optimized to inform, convert, and monetize new audiences effectively. The assumption that social platforms are serving as an effective funnel for subscriptions is a myth. With nearly 73% of daily traffic coming from new users who primarily discover content on social media, mobile web serves as the most common entry point yet sees minimal engagement—especially on the homepage, which has a 66% bounce rate. To truly welcome new fans and drive growth, we need a mobile web strategy that optimizes off-platform experiences for conversion and retention.
Outcome
To improve the mobile web experience, we implemented an optimization strategy based on user research. Key improvements included streamlining onboarding, enhancing content discovery, and guiding users toward native apps to boost engagement and retention, while also enabling teams to promote content, merchandise, events, and more.
01
Discovery & Research
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 existing research. This exploration aimed to validate our assumption that the new user base visiting the mobile web platform consists of the Gen Z female demographic.
2019 User Personas
In 2019, user personas for the Rooster Teeth platforms identified three distinct types of users: first-time users, free users, and paying users.
Overall, these users struggled to find detailed content descriptions, cast information, and reviews before deciding what to watch. All three user groups found the current homepage layout confusing for content discovery, highlighting the need for a clearer user journey for new viewer.
2019 User Profile Survey
User profiles conducted in 2019 revealed that Rooster Teeth users were predominantly, mostly Millennial men aged 18-34.
The majority of all Rooster Teeth Users used Youtube as a their primary streaming platform (92%).
2019 New User Journey Map Findings
In 2019, the user journey map for a new user revealed that users typically begins on platforms like YouTube, where they discover RT content hosted off-platform. After engaging with this content, they visit the RT site, often following specific channels, brands, or content creators after multiple visits to the site.
New Research Findings
To support the hypothesis that Rooster Teeth’s platform has attracted a new demographic since 2019, I created a new user persona highlighting a recent shift towards increased engagement with content resonating more with female audiences.
2023 New User Persona
The updated user persona shifted toward a younger Gen-Z demographic among anonymous users. These users enjoyed discovering new content but quickly moved on if it wasn't relevant or easy to find. This marked a shift in demographics from the previous persona, which focused on millennial men who primarily watched gaming content.
2023 Journey Map
Despite the shift in demographics and discovery platforms, the new user journey in 2023 shared similarities with the 2019 journey. What was new was that social media engagement data indicated most users were now interacting with our content on short-form vertical video platforms like TikTok.
Existing Mobile Web Analytics Findings
To better understand how new users were experiencing our mobile web platform—and to build a case for a mobile-first design—we conducted research to analyze the behavior of both new and existing users. This research aimed to identify unique challenges specific to mobile, distinct from those on desktop, reinforcing the need for a dedicated mobile experience.
Mobile Web Traffic Data
Data highlights a shift in user behavior, showing that mobile web attracts the highest number of visitors compared to desktop and native app usage. 73% of those visitors being new users.
-
Mobile web traffic significantly surpasses desktop usage, indicating a need for mobile-first optimization.
-
On average, there are 1.3k mobile web visitors daily.
-
A Mobile Web visitor is 3x more likely to be Anon compared to a Desktop visitors
Dwell time & Bounce Rate for New Users
While mobile web had the most visitors, desktop users spent more time browsing. This suggests mobile users engaged in shorter sessions, while desktop and tablet users were more likely to consume content in longer sessions. Data also showed that first-time users were most likely to bounce on the homepage, followed by the episode page.
User Viewership
Data revealed that app users watched significantly more content compared to mobile web-only users, with the app leading at 6,952 viewers while mobile web had the lowest viewership. Free and anonymous users tended to watch more content on mobile devices, whereas premium users preferred the desktop experience. This insight supports the case for guiding users from the mobile web platform toward the mobile app to enhance engagement.
-
App users watch 7 times more content than mobile web-only users.
-
Only 14% of mobile web viewers transition to the app.The app has 13 times more viewers than mobile web-only.
-
Mobile web has the lowest viewership at 744, while the app leads with 6,952, and desktop falls in between.
-
Free users watch more on mobile web, while premium users watch more on desktop.
02
Ideation
Addressing Design Problems
Feature Prioritization and MVP
The existing experience was a responsive version of the desktop web experience. We faced a critical decision regarding the new homepage design.
-
Option 1 : Was to maintain the existing approach by, leveraging the spotlight blocks introduced to mobile web the prior year. This approach allowed us to retain the current code base and potentially iterate quicker or design without having to re-teach content ops or marketing how to promote on the homepage. However this approach required manual updates to blocks on the homepage that required asset creating and content management.
-
Option2 : Create an entirely new homepage from scratch, phasing out the old mobile web experience over time requiring more engineering resources but providing flexibility to create a new experience. In this approach we looked to reduce the amount of resources for content management and asset creating while continuing to provide flexibility.
Data Analysis For Removing or Maintain The Video Player on Mobile Web
We conducted a data analysis to determine whether to retain or remove the video player from the mobile web experience. Working closely with the data team, we evaluated potential outcomes if we maintained the player versus removing it and directing users to the native app for video viewing. This analysis enabled us to make a well-informed decision and provided valuable insights to address stakeholders' concerns.
Addressing Social Media Funneling
The user journey maps from 2019 and 2023 revealed that most anonymous users discover Rooster Teeth content on social media platforms. An audit by the product team found that many external social media accounts, including those for various channel brands and Rooster Teeth’s own platforms, had links that did not direct users to the Rooster Teeth website. As part of our solution, we conducted an audit of these platforms and recommended that content and channel managers update the links to drive more traffic directly to our owned and operated site.
03
Design
Competitor Analysis
Analysis Summary
The competitor analysis revealed that most of our competitors used their homepages as landing pages for anonymous or non-subscribed users. For example, Dropout and Crunchyroll utilized their homepage real estate to promote content, merchandise, announcements, and upsells, while YouTube adopted a more scattered approach with endless carousels of content. It was clear that our current experience, which aimed to achieve similar goals, needed a different approach—one that engages users with compelling content from the start.
Navigation Improvements
The mobile web navigation was improved based on user feedback and data. Recognizing that most users were either shopping or heading to the store, the Store button was included in the nav menu. To address frequent content searches, the Search button was added, with its input field positioned in the thumb zone for easier access. Unlike the previous top-left corner placement, which was out of reach, the bottom nav menu was designed to be within the thumb zone for better usability.
Homepage Iterations
Homepage Content Experience Iteration 1
In the initial design for the new mobile web homepage, we explored using components simialr to ones that had already been designed. This approach allowed us to reduce scope and potentially achieve a quicker release.
Home page Content Experience Iteration 2
In the second iteration, we maintained the standard scrolling feature but redesigned the blocks to occupy most of the user's mobile screen, encouraging continuous scrolling.
Vertical Video Experience Inspiration
The second iteration brought us closer to the final design, but we aimed to push the experience even further. Knowing our users were Gen Z and familiar with TikTok, we wanted to create a similar experience to encourage scrolling and discovery. The challenge was designing a solution that allowed content to update seamlessly without requiring additional time from other teams.
Home page Content Experience Final Iterations
In the third and final iteration, we decided to create an experience similar to social media shorts. Knowing that our users were younger and frequently coming from these platforms, we aimed to offer a familiar experience. We also understood that new users were visiting the site to browse, and this approach would ideally encourage discovery. The Frames could feature and serve as gateways to content, merchandise, marketing, announcements, channels, and more.
04
Implementation
Dynamic Content Frames
One of the biggest challenges in redesigning the mobile homepage was managing content and asset creation. To address this, we introduced dynamic content Frames that provide video previews and encourage app downloads by redirecting users to the mobile app or app store via deeplinking. Each Frame plays a 10-15 second preview of the first episode from the “Now Trending Carousel” on the selected channel page. It uses existing CMS content and metadata, reducing the need for additional management or asset creation while maintaining a fresh and engaging homepage with minimal maintenance effort.
Curated Custom Frames
Additionally, we wanted to give teams the option to have frames that were completely customizable.This allows teams like marketing, e-commerce, and community to promote and highlight events, announcements, and more.
Video Playback Experience
The playback experience was a key component of the new mobile web design. To secure stakeholder buy-in, we opted for a one-size-fits-all approach, removing features like comments from the playback page. We maintained the "up next" logic behind the scenes without displaying carousels while encouraging users to download the app.
Content Management System UI/UX
A New Mobile Web Feed
The new mobile web experience required a separate feed, as it would replace the old mobile web feed that previously pulled from the desktop feed. This new experience would no longer be a responsive version of the desktop experience but would instead be a standalone experience.
Creating a Content Frame
Creating a content frame within the CMS required minimal effort from the user, as these blocks were designed for quick creation. Being dynamic, they consistently provide a fresh look for the mobile web experience.
A New Mobile Web Feed
Custom frames required more effort and assets but allowed teams to promote specific content, events, merchandise, and more. Defining the type of custom frame also enabled us to track more data on usage and effectiveness, providing valuable insights for optimizing the blocks.
Outcomes of the Journey
After launch, the new mobile web experience led to notable improvements over 3 months. Sessions increased to 391,827 from 378,634. The proportion of users clicking the store button in the new global bottom navigation rose from 59% to 61%. Additionally, 16% of mobile web viewers transitioned to the app, increasing app downloads. Users also spent more time on the homepage. These changes demonstrate the redesign’s success in enhancing user engagement and overall effectiveness.
Final Product
_gif.gif)
