Rivals
Rivals
Designing a Personalized Sports Feed & Growing Engagement
Designing a Personalized Sports Feed & Growing Engagement
ROLE
Senior Designer
CLIENT
Yahoo Sports
SKILLS
User Testing, Prototypes, Web/Mobile
ROLE
Senior Designer
CLIENT
Yahoo Sports
SKILLS
UX Research, User Interviews, Prototypes, Web/Mobile
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 users were having a hard time tracking what was happening with the athletes they had interest in. The only way they could find out information was to navigate to the athlete's page.
Rivals users were having a hard time tracking what was happening with the athletes they had interest in. The only way they could find out information was to navigate to the athlete's page.
Problem Statement Framework
Problem Statement Framework
We utilized the problem statement framework in order to:
We utilized the problem statement framework in order to:
✧ Align our team on problem we a trying to solve
✧ Align our team on problem we a trying to solve
✧ Increase team collaboration to explore solutions
✧ Increase team collaboration to explore solutions
✧ Ensure we are solving the right problem
✧ Ensure we are solving the right problem
✧ Provide measurable solutions
✧ Provide 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 free registered users to funnel them into paid subscribed users
Increase free registered users to funnel them into paid subscribed users
Increase in registrations/subscriptions
Increase in registrations/subscriptions
Users have a hard time tracking what is happening with the athletes they are interested in
Users have a hard time tracking what is happening with the athletes they are interested in
Unregistered users
Unregistered users
Final Statement
How might we help (#4) unregistered users
How might we help (#4) unregistered users
that want (#3) to track athletes they are interested in
that want (#3) to track athletes they are interested in
to (#2) register or subscribe
to (#2) register or subscribe
so that (#1) we increase Rivals registered numbered of users and funnel them into becoming subscribers.
so that (#1) we increase Rivals registered numbered of users and funnel them into becoming subscribers.
Brainstorming & Ideation
Brainstorming & Ideation
To tackle this issue, our team gathered to brainstorm ideas and explored several potential solutions:
To tackle this issue, our team gathered to brainstorm ideas and explored several potential solutions:
We collectively agreed on the assumption that following could help users track athletes because:
We collectively agreed on the assumption that following could help users track athletes because:
✧ It allows users control of content by following/unfollowing
✧ It allows users control of content by following/unfollowing
✧ Less likely to get lost in email newletters
✧ Less likely to get lost in email newletters
✧ Less likely to get ignored as a notification
✧ Less likely to get ignored as a notification
Defined User Goal
Defined User Goal
✧ Allow registered users to follow a prospect on web and mobile would allow them to track what is happening with the athletes they are interested in.
✧ Allow registered users to follow a prospect on web and mobile would allow them to track what is happening with the athletes they are interested in.
Defined Business Goals
Defined Business Goals
✧ Attracting more users to register for free accounts will allow Rivals to upsell them to eventually become subscribed paid users.
✧ Attracting more users to register for free accounts will allow Rivals to upsell them to eventually become subscribed paid users.
✧ Increase user engagement with the app as registered and subscribed users will return more often to check on their followed athletes.
✧ Increase user engagement with the app as registered and subscribed users will return more often to check on their followed athletes.
Initial Design Sprint
Initial Design Sprint
User Flows
User Flows
We wanted to understand how users were going to find the follow button and what would happen after they click on it if they were a registered user or not so I put together flow showing how this could happen.
We wanted to understand how users were going to find the follow button and what would happen after they click on it if they were a registered user or not so I put together flow showing how this could happen.
Wireframes & Initial Prototype
Wireframes & Initial Prototype
I created low-fidelity wireframes that included designs with a Follow button to follow athletes from the Top Targets list on the homepage.
After, I created an interactive prototype for usability testing.
I created low-fidelity wireframes that included designs with a Follow button to follow athletes from the Top Targets list on the homepage.
After, I created an interactive prototype for usability testing.
Usability Testing Round 1
Usability Testing Round 1
Goal: Do users understand the flow of following something? Are they then able to find the followed content?
Goal: Do users understand the flow of following something? Are they then able to find the followed content?
Test Group: 5 participants (UserTesting.Com)
Test Group: 5 participants (UserTesting.Com)
Findings
✅ 5/5 users easily locate an athlete and the follow button.
✅ 5/5 users easily locate an athlete and the follow button.
✅ Everyone understood that they would need to create an account in order to follow something - this workflow was well understood
✅ Everyone understood that they would need to create an account in order to follow something - this workflow was well understood
✅ Several users mentioned following prospects on Instagram and Twitter and mentioned they would like to see some of that content in the following tab.
✅ Several users mentioned following prospects on Instagram and Twitter and mentioned they would like to see some of that content in the following tab.
❌ Almost no one was able to find followed content easily - only one user found it right away, several never found it at all. Those who couldn’t find it were looking for it.
❌ Almost no one was able to find followed content easily - only one user found it right away, several never found it at all. Those who couldn’t find it were looking for it.
Next Steps
Next Steps
✧ Reconsider the location for followed content
✧ Reconsider the location for followed content
✧ Mock up designs for mobile web
✧ Mock up designs for mobile web
Iterations
Iterations
After discussing the user testing feedback our team decided to try out 2 solutions:
After discussing the user testing feedback our team decided to try out 2 solutions:
✧ Create a followed content page
✧ Create a followed content page
✧ Add a followed content module to the homepage
✧ Add a followed content module to the homepage
Here you can see the Following link in the web and mobile app menus.
Here you can see the Following module on the homepage.
Here you can see the Following link in the web and mobile app menus.
Here you can see the Following module on the homepage.
Usability Testing Round 2
Usability Testing Round 2
Goal: Learn if users can find the location of followed content.
Goal: Learn if users can find the location of followed content.
Test Group: 5 participants (PlaybookUX)
Test Group: 5 participants (PlaybookUX)
Findings
✅ 3 users found the Following page via the navigation menu
✅ 3 users found the Following page via the navigation menu
✅ 1 user found the Following module via the homepage and then found the link in the navigation menu
✅ 1 user found the Following module via the homepage and then found the link in the navigation menu
✅ 1 user verbalized that they would look in the navigation menu or search but did not attempt to test her hypothesis
✅ 1 user verbalized that they would look in the navigation menu or search but did not attempt to test her hypothesis
✧ 3 users expected to find following via the account icon
✧ 3 users expected to find following via the account icon
Next Steps
Our team moved forward with the tested solution of the Following page
Our team moved forward with the tested solution of the Following page
I continued to flesh out responsive designs for the following page
I continued to flesh out responsive designs for the following page
Second Design Sprint
Second Design Sprint
Following the success of the following feature the client wanted to expand on the feature by creating a personalized feed where users could view more updates about their followed athletes, teams, and forums discussions.
We first brainstormed different event updates we thought users would be interested to see in their feed.
Following the success of the following feature the client wanted to expand on the feature by creating a personalized feed where users could view more updates about their followed athletes, teams, and forums discussions.
We first brainstormed different event updates we thought users would be interested to see in their feed.
Designing Cards
Designing Cards
I took the the different type of event updates we brainstormed and started to mock up what each would look like as a card in the feed.
I took the the different type of event updates we brainstormed and started to mock up what each would look like as a card in the feed.
Prototyping & Usability Testing
Prototyping & Usability Testing
I created a prototype of the personalized feed in order to test our designs.
I created a prototype of the personalized feed in order to test our designs.
Goal: Test if the personalized feed successfully displays relevant content based on followed athletes and if users could tell the difference between the Teams tab and the My Feed tab.
Goal: Test if the personalized feed successfully displays relevant content based on followed athletes and if users could tell the difference between the Teams tab and the My Feed tab.
Test Group: 5 participants (PlaybookUX)
Test Group: 5 participants (PlaybookUX)
Findings
✅ 5/5 users could tell the difference between the two tabs; Teams/My Feed
✅ 5/5 users could tell the difference between the two tabs; Teams/My Feed
✅ 3/5 Found they would visit the My Feed tab more often
✅ 3/5 Found they would visit the My Feed tab more often
✅ 5/5 Liked the app and found it intuitive and would return frequently to seek out updates
✅ 5/5 Liked the app and found it intuitive and would return frequently to seek out updates
Results
Results
✧ Increased sign ups with following feature prompting users to create accounts
✧ Increased sign ups with following feature prompting users to create accounts
✧ Improved user engagement with the app by creating a personalized feed of content tailored to each user
✧ Improved user engagement with the app by creating a personalized feed of content tailored to each user
✧ Validated designs with user testing
✧ Validated designs with user testing
Reflections
Reflections
✧ While we did user testing with UserTesting.Com and PlaybookUX.com it would be nice to test & validate with actual Rivals users.
✧ While we did user testing with UserTesting.Com and PlaybookUX.com it would be nice to test & validate with actual Rivals users.