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
Rooster Teeth, a trailblazing entertainment company established in 2003, became renowned for its innovative series like "Red vs. Blue" and "RWBY." Evolving into live-action productions, podcasts, and gaming while prioritizing community interaction, the company garnered a global following, attracting millions of fans worldwide. In 2021, the Product & Engineering team undertook a mission to enhance the signup process for new and existing users across desktop and mobile platforms.
The Challenge
Our previous sign-up flow had a 46.6% conversion rate, but it struggled to effectively communicate the value of our premium membership, leading to low user engagement and understanding among our target audience. Additionally, there was no capability to create custom campaigns for different Rooster Teeth brands. Compounding these issues, the lack of comprehensive data events limited our ability to gather insights into user behaviors and preferences within the sign-up process, further hindering our efforts to optimize the experience.
The Solution
To address these challenges and enhance our platform's appeal, we revamped our sign-up experience with a focus on clarity, engagement, and personalized communication of our premium membership benefits. We redesigned the sign-up flow and implemented tailored messaging, interactive elements, and personalized content recommendations. Our engineering team prioritized performance optimization, data-driven personalization, Through these strategic enhancements, we increased conversion rates, drove higher engagement, and created an industry leading sign up flow.
01
Discovery & Research
Project Goals
How might we improve the flow and improve overall conversion rate?
Focuse on making each step of the sign-up process clear and engaging, while effectively educating users on the value of their membership. By clearly highlighting the benefits of our premium membership, we ensured that the value proposition was compelling and easily understood, leading to a more seamless and persuasive sign-up experience.
How might we give the marketing team and channel managers the ability to create custom campaigns?
Introducing the ability to customize the sign-up process for different brands within Rooster Teeth, allowing for targeted messaging and personalized campaigns.
Analyzing The Existing Sign Up Flow
With the current sign-up flow at a 46% conversion rate, our first step in the design process was to assess the existing five-step flow, page by page. We discovered that each page had a different layout, which failed to effectively communicate or personalize the user experience throughout the process.
1
2
3
4
5
Account Creation
Plan Selection
Billing
Profile Customization
Return the user to the homepage or proir page.
1
Account Creation Page
The first page in the sign-up flow, was underwhelming. It lacked compelling visuals, relied too much on text, and didn't showcase our living room apps or modern brands.This may have not resonated well with new users unfamiliar with recognized content.
2
2
Plan Selection Page
The plan selection page displayed all three plan types on a new page with a different layout and additional supporting copy, potentially overwhelming users and diminishing the effectiveness of showcasing the value of the FIRST membership. This page needed a redesign due to recent plan consolidation.
3
4
Billing Page
The billing page featured a layout where the form occupied most of the screen, displaying all three plans without clearly showing the value of each plan to the user. Additionally, there was no way for the user to easily return to the previous page where the plans were displayed.
Profile Customization Page
The profile page again had a different layout. By default, the avatar was set to the image of a female character, and users were required to disclose their preferred gender, although this information was not utilized for any data-related benefit.
Identifying Target Users
To effectively revamp the sign-up flow, we identified distinct user tiers based on membership status across the website and apps. This segmentation allowed us to tailor the redesign specifically to cater to the unique personas and motivations of each tier, ensuring a more personalized and targeted approach to the sign-up experience.
Anonymous Users
Anonymous users are individuals who discover our content through social media platforms such as TikTok or YouTube. These users are likely to create a free account after multiple visits to the site. Given their less familiar status with our content and community, these users require more engagement and guidance once they reach the sign-up flow.
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 sign-up flow (SUF) should facilitate an easy and seamless process to encourage upgrades for these users.
Competitor Analysis
(SVOD/AVOD) Account Creation Prior To Plan Selection
Crunchyroll's approach of collecting users' email information before requesting payment details is effective for reducing initial friction. The platform lacked clear options for users to view and change plan types. Additionally, there was no SSO option or clear and intuitive way to skip the payment page and continue with a free account. These usability shortcomings were worth noting as they impact user experience and could be addressed in our new sign-up flow.
(SVOD) Plan Selection Prior To Account Creation
The Netflix sign-up flow guides users through each step with clear summaries before each action, ensuring they understand what’s next. Although this may lengthen the process, these summary pages are quick to review. Netflix captures plan selection first, before user information or payment, as it's a crucial step in setting up an account. The design is minimalist, using ample white space to focus attention on key elements, creating a clean and straightforward user experience. This approach aligns with modern design trends, enhancing usability and content hierarchy throughout the signup journey.
(SVOD) All forms Featured On a Single Page
Dropout's signup page integrates the plan selection, plan descriptions, user information input form, and payment form all on the same page. This consolidated layout allows users to choose their desired subscription plan, input their personal details, and enter payment information seamlessly within a single interface. However, while this approach streamlines the user flow, it limits Dropout's ability to guide and communicate effectively with users through the signup process.
02
Ideation
Establishing Information Architecture
Overview
The new sign-up flow would guide users with clear, concise instructions at each step, avoiding complexity to maintain an engaging and straightforward experience. The flow will consist of multiple pages with a consistent, premium layout, ensuring seamless transitions and enhancing usability. Form fields will occupy a set portion of the screen, leaving space for progress indicators, visuals, or concise text to guide users through each step, improving orientation and engagement.
03
Web Design
Defining Functionality and Flow
Wire-framing
Wireframes were crucial in our sign-up flow case study as they allowed us to visualize and refine the structure and layout of each step before diving into detailed design. By creating wireframes, we ensured that each page had a consistent and intuitive flow, which helped identify and address potential issues early on. This approach streamlined the design process, facilitated clearer communication among team members, and ultimately contributed to a more effective and user-friendly sign-up experience.
Designing Forms and Functionality
Account Creation Design
The user enters their information to create their account. They have the option to log in directly using the Single Sign-On (SSO) feature or by email. To enhance the user experience, an interactive tooltip is used for the password, providing feedback on whether the password meets all the requirements.
Plan Selection Form Design
On the plan selection form, each plan offers the same benefits and are presented as interactable cards. The best deal is pre-selected by default and labeled with a banner to indicate this to the user. Additionally, a clearly labeled secondary call-to-action (CTA) allows the user to skip the plan selection and proceed to create a free account.
Plan Selection Form Design
On the plan selection form, each plan offers the same benefits and are presented as interactable cards. The best deal is pre-selected by default and labeled with a banner to indicate this to the user. Additionally, a clearly labeled secondary call-to-action (CTA) allows the user to skip the plan selection and proceed to create a free account.
Payment Form Design
The user is provided with a payment form to select their preferred method of payment. Additionally, a clearly labeled secondary call-to-action (CTA) allows the user to return to the plan selection page if they want to change plans or review plan perks.
Account Customization Form Design
The user enters their information to create their account. They have the option to log in directly using the Single Sign-On (SSO) feature or by email. To enhance the user experience, an interactive tooltip is used for the password, providing feedback on whether the password meets all the requirements.
Left Region Visual Design
By keeping the form field on the right-hand side and occupying only 20% of the page, we were able to utilize the remaining 80% of screen real estate on the left-hand side for messaging and engaging with the user. This layout maximized the space available for communicating important info and guiding the user through the sign-up process.
Iteration 1 ( Displaying Content)
In the initial iterations, we explored using a wide variety of our content series art to visually showcase the amount of content we have to offer, paired with text to communicate with the user. This approach was inspired by visuals seen on well-known SVOD platforms. However, this approach proved to be distracting and created an imbalance on the page, drawing too much attention to the left side of the screen instead of focusing on the form field.
Iteration 2 (Tent Pole Characters & Content)
In the second round of designs, we explored using animated characters from our flagship series, paired with titles and subtext to communicate with the user and provide information. From this exploration, a design pattern was established that would carry over to the final round of iterations. The placement and overlap of the characters with the form field were utilized as a visual cue for the user, with the characters pointing at the form field to guide the user's eye towards it.
Iteration 3 (Cast Members)
In the third and final round of iterations, we incorporated popular cast members to enhance user connection. Our approach aimed to ensure that on the default sign-up flow (not a specific campaign), users would likely recognize one of the featured cast members on one of the form pages. Using familiar faces made the experience more personalized and relatable for users.
Stakeholder feed back revealed that :
-
Based on stakeholder feedback, "the sign-up flow should incorporate groups of people on each step to evoke a clubhouse-like atmosphere and less of an SVOD feel."
-
Asset creation could potentially lead to infrequent updates due to limited resources and assets, as each page would require copy, background, and midground assets.
Final Web Design
Responsive Mobile Web Design
The design of the right-hand side form field allowed us to adapt the layout for mobile web while preserving the same flow and similar experience as the desktop version. This ensured consistency and usability across different devices.
Account Creation
Payment
Plan Selection
Profile Customization
04
iOS/Android Native App Design
For native platforms, we designed a treatment compatible with both iOS and Android, ensuring consistency with the new Sign-Up Flow. While we preferred web sign-ups to avoid app store fees, we also aimed to provide a positive experience for engaged native app users.
Specifications
Page Designs
Account Creation
Plan Selection
Account Customization
05
Content Management System Design
Summary
In addition to designing the user-facing components, I developed the CMS for managing assets used by marketing and other teams for each page of the sign-up flow. This involved creating an intuitive and efficient system for internal users to upload assets based on design specifications, ensuring consistency and quality throughout the sign-up process.
06
Custom Campaign Design
Custom Campaign Sign Up Experiences
As a follow-up, we aimed to address the needs of channel managers and the marketing team by implementing the ability to create individual Sign-Up Flow (SUF) campaigns for each brand. This allowed them to direct users to specific campaign SUFs tailored to different brands or shows. This customization ensured that users who were fans of specific brands or shows would recognize and engage with the brand throughout the sign-up process.
Creating Specifications
Integrating The Internal Content Management System
Summary
Additionally, I designed the functionality within the CMS to enable channel managers and the marketing team to create and manage individual campaign-specific Sign-Up Flows (SUFs). This included providing them with the ability to generate new URLs with campaign-specific names, edit and update existing campaigns, add new ones, and conduct testing before launching them into production. This streamlined process empowered the marketing team to efficiently manage and optimize SUF campaigns for different brands or shows.
Outcomes of the Journey
Following the launch, the sign-up flow saw significant improvement, with conversion rates increasing from 46.6% to 58.7%, a 12.3% overall improvement. Data events were added to track user interactions for better insights and future SUF updates. Additionally, the implementation of data events allowed the marketing team and channel managers to create custom brand-specific flows, enhancing user engagement and personalization throughout the journey.
Final Product
![[CITYPNG.COM]HD Blue Apple iPhone 12 Pro](https://static.wixstatic.com/media/8601f6_0a574c9dac0d4558bb9d8da81b5c7e52~mv2.png/v1/crop/x_326,y_155,w_1026,h_2052/fill/w_370,h_740,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BCITYPNG_COM%5DHD%20Blue%20Apple%20iPhone%2012%20Pro.png)
