Yahoo Fantasy
.png)
1. Similar Aesthetic and UI Elements as Mobile App
Problem: Mobile app and Desktop version have very different design aesthetics. Leads to inconsistent user experience across platforms and an unclear brand image
Feature: Incorporate player photos, uniform stat line layouts, and vertical scoreboard setup that are found in the mobile app.
Where to Find: These can be found throughout the design.
Overview
As a fun side-project, I decided to re-design the Yahoo Fantasy basketball website with the following goals and objectives in mind:
Overall Redesign Goal:
Create a Yahoo fantasy desktop version that complements the mobile app and serves as a tool for deeper player analysis and more comprehensive matchup viewing
Objectives for the Redesign
1.) Improve the visual aesthetic of the desktop version
2.) Reduce information clutter
3.) Add more player analysis features
Personal Objectives:
1.) Learn how to design and prototype through Figma
2.) Gain a better idea of UI/UX principles and how to incorporate them into user flows
2. Player Profile Cards
Problem: To view a specific player’s game log, status, and injury report, the user currently has to click on the player and is redirected to an external Yahoo sports page that is not native to the Yahoo Fantasy page.
Feature: A player tab section to the left of any player list that allows the users to view specific player information and status updates without having to be redirected to the external yahoo site.
Where to Find: These can be found on player analysis pages.
3. Basketball-Reference Link Within Player Profile
Problem: There is currently no way to view a player's historical stats or advanced statistics in the fantasy app or desktop version.
Feature: A button within the player profile section that directs users to the player's basketball reference site, a widely used site for advanced and historical player statistics.
Where to Find: These can be found on any player profile card.
4. Compare Player 1 v 1
Problem: There is currently no functionality to compare qualitative players' statistics in the desktop version such as player status updates, upcoming games, and injury reports, alongside quantitative stats.
Feature: A side-by-side two-player profile card pop-up that allows the user to view both player's qualitative and quantitative stats at the same time. Also has a built-in stat comparison feature that highlights which stats each player has the advantage in.
Where to Find: Can be found as a setting on the "Players Page" on picture 7 and 8.
New Features
alex hu
5. Compare List
Problem: When viewing players from the traditional player's list, if a user wants to compare players A, D, and H, they must scroll through players B, C, E, F, and G too which can make it hard for them to examine the players they actually want to look at
Feature: A separate mode that when turned on, replaces the player profile card section with an empty list section that users can add players to. Players in this group specifically can then be sorted based on certain statistics.
Where to Find: Can be found as a setting on the "Players Page" on picture 9 and 10.
Design
1. Home Page
Redesign
.png)
Real Page
2. My Team Page
Redesign
Real Page
3. Matchup Page
Redesign
Real Page
4. Matchup Page Pop-Up
Redesign
Real Page
5. Players Page
Redesign
.png)
Real Page
6. Players Page (Scrolled)
Redesign
%20(1).png)
Real Page
7. Players Page (Comparing 1 v 1)
Redesign
.png)
Real Page
Compare 1 v 1 Feature Functionality
By clicking on the "Compare" ticker in the top right and then clicking on another player in the list, another player profile appears next to the previous player profile with the player list then being blurred out in the background.
Compare with X Player
The "Compare with X Player" option if clicked, highlights in green, the categories that the player is doing better in comparison to the other player, and highlights in red, the categories that the player is doing worse in comparison to the other player. Having this subtle color coding can be useful in getting a quick snapshot comparison. The stats specifically can be horizontally scrolled within the player profile tab to view all the stats. Lastly, on the top right of each player profile, is an "X" button which allows the user to click out of either profile and select another player from the list to compare to the remaining player.
8. Players Page (Comparing 1 v 1)
Redesign
Real Page
9. Players Page (Compare List)
Redesign
.png)
Real Page
10. Players Page (Compare List)
Redesign
.png)
Real Page
Compare List Feature Functionality
By clicking on the "Compare List" ticker in the top right and then clicking on another player in the list, that player is added to the "Compare List" section on the left. This user can then sort players within this list however they like to determine which player to add. Players can be removed from the "Compare List" by clicking the "X" icon next to the player.