Rivals
Rivals
Enhancing user subscriptions with add-ons while increasing business revenue
Enhancing user subscriptions with add-ons while increasing business revenue
ROLE
Senior Designer
CLIENT
Yahoo Sports
SKILLS
UX Research, User Flows, Prototypes, Responsive Design
ROLE
Senior Designer
CLIENT
Yahoo Sports
SKILLS
UX Research, User Flows, Prototypes, Responsive Design
Rivals (owned by Yahoo Sports) is a leading online sports network that focuses on college football and basketball recruiting. It is widely known for its extensive coverage of high school athletes and their recruitment by college programs.
Rivals (owned by Yahoo Sports) is a leading online sports network that focuses on college football and basketball recruiting. It is widely known for its extensive coverage of high school athletes and their recruitment by college programs.
The Problem
The Problem
Rivals currently only allowed users to have one subscription which included access to one team site and the Rivals National site. If users wanted to access content from additional teams they needed to create a separate account and pay for two subscriptions in order to gain access. While some users did this many users found it inconvenient and frustrating.
Rivals currently only allowed users to have one subscription which included access to one team site and the Rivals National site. If users wanted to access content from additional teams they needed to create a separate account and pay for two subscriptions in order to gain access. While some users did this many users found it inconvenient and frustrating.
User Goal
User Goal
✧ Create a way for users to subscribe to other team sites to gain access to other teams content
✧ Create a way for users to subscribe to other team sites to gain access to other teams content
Business Goal
Business Goal
✧ Market and upsell add-ons to users, leading to an increase in revenue
✧ Market and upsell add-ons to users, leading to an increase in revenue
My Role
My Role
I was the sole designer on this project and worked with my project manager and client. We would occasionally include developers in design reviews to gain their feedback as well.
I was the sole designer on this project and worked with my project manager and client. We would occasionally include developers in design reviews to gain their feedback as well.
Problem Statement Framework
Problem Statement Framework
We started this scope of work by filling out a problem statement template from this framework. By filling out this framework we:
We started this scope of work by filling out a problem statement template from this framework. By filling out this framework we:
✧ Align our team on the problem we are trying to solve
✧ Align our team on the problem we are trying to solve
✧ Increases team collaboration to explore solutions
✧ Increases team collaboration to explore solutions
✧ Ensures we are solving the right problem
✧ Ensures we are solving the right problem
✧ Provides measurable solutions
✧ Provides measurable solutions
Framework Questions
What’s the business problem we’re solving?
What’s the business problem we’re solving?
What change in customer behavior indicates the business problem is solved?
What change in customer behavior indicates the business problem is solved?
What’s the customer problem we’re solving?
What’s the customer problem we’re solving?
Which customer type should we focus on first?
Which customer type should we focus on first?
Framework Final Statement
How might we help #4 _______________________________________
How might we help #4 _______________________________________
that want #3 _______________________________________________
that want #3 _______________________________________________
to #2 _____________________________________________________
to #2 _____________________________________________________
so that #1 _________________________________________________
so that #1 _________________________________________________
Answers
Increase revenue by designing a way for subscribed users to subscribe to additional content outside their team content
Increase revenue by designing a way for subscribed users to subscribe to additional content outside their team content
Customers subscribe to additional content outside their team
Customers subscribe to additional content outside their team
Customers frustration with only being able to subscribe to content of 1 team
Customers frustration with only being able to subscribe to content of 1 team
Subscribed content users
Subscribed content users
Final Statement
How might we help (#4) subscribed content users
How might we help (#4) subscribed content users
that want (#3) to subscribe to other teams
that want (#3) to subscribe to other teams
to (#2) to subscribe to additional content
to (#2) to subscribe to additional content
so that (#1) we increase Rivals revenue by creating happy subscribed users
so that (#1) we increase Rivals revenue by creating happy subscribed users
Research
Research
With our problem defined we wanted to look into how other subscription services solved similar issues. I decided to research other subscription services. While researching I also kept these questions in mind:
With our problem defined we wanted to look into how other subscription services solved similar issues. I decided to research other subscription services. While researching I also kept these questions in mind:
✧ How and where did they upsell additional subscription services?
✧ How and where did they upsell additional subscription services?
✧ How did they upsell additional content to new users in a sign up flow?
✧ How did they upsell additional content to new users in a sign up flow?
✧ How did they upsell additional content for existing subscribed users?
✧ How did they upsell additional content for existing subscribed users?
✧ How were the additional subscription services presented in their account?
✧ How were the additional subscription services presented in their account?
I then put together my findings in a slides presentation to review with my team.
I then put together my findings in a slides presentation to review with my team.
Hulu
Hulu
One of the sites I looked into was Hulu. Hulus use the following:
✧ Add-ons you could toggle on off in your account and also presented as option when signing up
✧ Bundle and save on add-ons
✧ Free trial of add-ons
One of the sites I looked into was Hulu. Hulus use the following:
✧ Add-ons you could toggle on off in your account and also presented as option when signing up
✧ Bundle and save on add-ons
✧ Free trial of add-ons
Amazon
Amazon
Amazon is a different subscription service but they include a lot of upsell tactics throughout their site including:
✧ Frequently bought together - upselling similar items along with the item you are viewing
✧ Bundling items together and saving on all them at a discount
Amazon is a different subscription service but they include a lot of upsell tactics throughout their site including:
✧ Frequently bought together - upselling similar items along with the item you are viewing
✧ Bundling items together and saving on all them at a discount
SlingTV
SlingTV
SlingTV is tv channel streaming service that I researched as well. Their following upsells included:
✧ 2 different plans to subscribe to with different benefits
✧ An option to bundle both plans
✧ Individual extra add-ons for each plan
SlingTV is tv channel streaming service that I researched as well. Their following upsells included:
✧ 2 different plans to subscribe to with different benefits
✧ An option to bundle both plans
✧ Individual extra add-ons for each plan
FuboTV
FuboTV
FuboTV is another tv channel streaming service. They also include several upsell tactics such as:
✧ Different subscription tiers
✧ Add-ons
✧ Upsell add-ons at checkout
✧ Upsell add-ons in user account settings
✧ Discount and additional channels for quarterly rate vs monthly
FuboTV is another tv channel streaming service. They also include several upsell tactics such as:
✧ Different subscription tiers
✧ Add-ons
✧ Upsell add-ons at checkout
✧ Upsell add-ons in user account settings
✧ Discount and additional channels for quarterly rate vs monthly
Brainstorm
Brainstorm
After presenting the research of how other subscription sites upsold additional services I conducted a brainstorming session with my project manager, client, and myself. Below are the following ideas we brainstormed.
After presenting the research of how other subscription sites upsold additional services I conducted a brainstorming session with my project manager, client, and myself. Below are the following ideas we brainstormed.
User flows
User flows
I created user flows based on our ideas and made different flows based on whether the user was new user or an existing subscribed user.
I created user flows based on our ideas and made different flows based on whether the user was new user or an existing subscribed user.
New Users
New Users
Existing Subscribed Users
Existing Subscribed Users
Current Sign Up Flow for New Users
Current Sign Up Flow for New Users
Currently new users were directed to create an account and confirm their subscription. After that they were presented with a confirmation page where they could either go to the homepage or forums of their team.
Currently new users were directed to create an account and confirm their subscription. After that they were presented with a confirmation page where they could either go to the homepage or forums of their team.
Updated Sign Up Flow with Add-ons
Updated Sign Up Flow with Add-ons
Signing up already requires a significant amount of information from new users. We didn’t want to overwhelm new users during the sign up flow. With this in mind, during sign up the only add-on we promoted was an ad-free option that is checked by default.
After successfully signing up, we decided in addition to directing users to the homepage or forums we would promote additional add-ons.
Signing up already requires a significant amount of information from new users. We didn’t want to overwhelm new users during the sign up flow. With this in mind, during sign up the only add-on we promoted was an ad-free option that is checked by default.
After successfully signing up, we decided in addition to directing users to the homepage or forums we would promote additional add-ons.
Users were able to purchase add-ons from here and would be taken through a flow in modals to confirm their purchase.
Users were able to purchase add-ons from here and would be taken through a flow in modals to confirm their purchase.
Add-on Details Modal
Add-on Details Modal
Subscription Changes Modal
Subscription Changes Modal
Add-on Purchased & Billing Modal
Add-on Purchased & Billing Modal
Add Button Changes to Purchased
Add Button Changes to Purchased
Current Subscriptions Page for Subscribed Users
Current Subscriptions Page for Subscribed Users
The current subscription page for subscribed users had a card of the user’s subscribed team site and an upsell button to upgrade to an annual subscription if the user was paying on a monthly basis.
The current subscription page for subscribed users had a card of the user’s subscribed team site and an upsell button to upgrade to an annual subscription if the user was paying on a monthly basis.
Updated Subscription Pages with Add-ons
Updated Subscription Pages with Add-ons
I kept the card design we already had in in place but expanded upon it by doing the the following:
I kept the card design we already had in in place but expanded upon it by doing the the following:
Subscriptions with No Add-ons
Subscriptions with No Add-ons
✧ Separated out the monthly/yearly subscription type with it’s own card
✧ Separated out the monthly/yearly subscription type with it’s own card
✧ Used a horizontal rule to visually separate the billing information
✧ Used a horizontal rule to visually separate the billing information
✧ If monthly subscription, I included an upsell to upgrade to annual
✧ If monthly subscription, I included an upsell to upgrade to annual
Subscriptions with Add-ons
Subscriptions with Add-ons
✧ Used the same visual style as the monthly/yearly subscription card for the add-on cards
✧ Used the same visual style as the monthly/yearly subscription card for the add-on cards
✧ Included add-ons as a separate section
✧ Included add-ons as a separate section
Monthly Subscription with No Add-ons
Monthly Subscription with No Add-ons
Monthly Subscription with Add-ons
Monthly Subscription with Add-ons
Furthering Upsells with Bundles
Furthering Upsells with Bundles
Beneath the users team subscription card I included the different types of add-ons you could add to your subscription.
However when a user clicked the Add button for one of their rival teams, they were prompted with a modal that included options to either get all all access pass, bundle and save, or just get the one rival team add-on.
Beneath the users team subscription card I included the different types of add-ons you could add to your subscription.
However when a user clicked the Add button for one of their rival teams, they were prompted with a modal that included options to either get all all access pass, bundle and save, or just get the one rival team add-on.
Add-ons
Add-ons
Upsell Modal
Upsell Modal
Below is a prototype of the bundle checkout flow.
Below is a prototype of the bundle checkout flow.
Iteration
Iteration
While working on the add-ons I went through some iterations. Below are examples of the visual iterations I put together for the upsell modal.
While working on the add-ons I went through some iterations. Below are examples of the visual iterations I put together for the upsell modal.
Editing Subscription Add-ons
Editing Subscription Add-ons
With the inclusions of add-ons to users subscriptions we needed a way to users to edit and remove add-ons.
I created an Edit subscriptions page that looked similar to the Subscriptions page except each card offered to either upgrade or cancel your main subscription and the ability to remove add-ons.
When these buttons were clicked the user would be prompted with a modal to confirm their subscription changes.
With the inclusions of add-ons to users subscriptions we needed a way to users to edit and remove add-ons.
I created an Edit subscriptions page that looked similar to the Subscriptions page except each card offered to either upgrade or cancel your main subscription and the ability to remove add-ons.
When these buttons were clicked the user would be prompted with a modal to confirm their subscription changes.
Edit Subscriptions Page
Edit Subscriptions Page
Subscription Changes Modal
Subscription Changes Modal
Responsive design
Responsive design
Below are some of the responsive designs I created for the subscriptions add-on feature.
Below are some of the responsive designs I created for the subscriptions add-on feature.
Results
Results
Implementing the add-on features to Rivals subscription resulted in positive impacts for both the business and subscribers.
Implementing the add-on features to Rivals subscription resulted in positive impacts for both the business and subscribers.
✧ Increased business revenue
✧ Increased business revenue
✧ Improved customer retention by allowing users to tailor their subscription needs
✧ Improved customer retention by allowing users to tailor their subscription needs
✧ Enhanced the user experience by allowing users more control over their subscription choices
✧ Enhanced the user experience by allowing users more control over their subscription choices
✧ Provided a competitive edge to Rivals against their competitors
✧ Provided a competitive edge to Rivals against their competitors
Overall the feature was a success and is still being used by Rivals today and can be seen in their sign up flow here: https://n.rivals.com/subscribe?plan=annual.
Overall the feature was a success and is still being used by Rivals today and can be seen in their sign up flow here: https://n.rivals.com/subscribe?plan=annual.