-Background-Navigation-Feed-Article-Customization-Design System-Analysis
đź”®
WorkAbout
Yahoo Sports
iPhone 12 screenshot of the yahoo news app depicting a favorited topic module in the main feed, specifically the celebrity news topic
iPhone 12 screenshot of the yahoo news app depicting the main feed with a breaking news banner on top of the main headline of the day
iphone 12 screenshot showing the win probability chart for the pirates v cubs game
I joined Yahoo Sports for my second rotation in the design associate program. Since joining, some of my main responsibilities have been to find ways to incorporate more excitement to the fan experience, leading initiatives to add helpful data visualizations, and making fans feel more connected to their favorite teams and players. The projects below are just a handful of projects I have worked on with these guiding principles in mind.
Timeline
April 2019 - present
Credits
Talia Knobel, Mika Jiang, So Young Han
Before Yahoo News existed, there was Newsroom.
Newsroom was Yahoo's social network centered around news. It was failing for a multitude of reasons. The interface was outdated and difficult to navigate, the search functionality was severely limited, and the comments section was flooded with trolls.

As problems with Newsroom kept piling up, it became clear that the initial vision for the app wasn't resonating with users and it wasn't the right direction for the company. Therefore, Yahoo decided to pivot and relaunch Newsroom as Yahoo News- a news app that lets you build your news feed around what matters to you. We invested hours of work and research into our core experience- the main feed, customization features, and news articles. As a result of our efforts, Yahoo News is easy to navigate, customize, and consume. 
Making the player page informative and engaging.
The player page is where users can go to find information on their favorite athletes, whether it’s their upcoming games or their most recent stats. The existing player page felt thrown together, disorganized, and stale. When I took on this project, I wanted to make the athletes look celebrated like in sports trading cards. I also wanted to highlight important stats that users would commonly look for when searching their favorite players.

Before

The player page header wasn't very functional. It showed a small athlete headshot and the team stadium, which isn't very relevant for...anything.
iphone 12 screenshot of the yahoo sports player page. shows lebron james' page with outdated UI
iphone 12 screenshot of the updated player page. shows klay thompson's page with updated UI, a larger header, and stats in the header

After

While the header takes up much more screen real estate, it feels much more premium. It also contains recent stats and an entry point to the team page by clicking the team icon.
Dynamic header
The new header features a fresh design and stats for the player’s respective sport and team. For sports like soccer, users can cycle between an athlete’s club and national team stats.
iphone 12 gif showing a user switching marcus rashford's player stats from his club stats to team stats
Career timelines
Selected veteran athletes also have a career timeline under their bios that highlights their team histories, championships, and other major accomplishments.
iphone 12 screenshot of a timeline documenting kevin durants career
Flexible design
The header design is flexible enough so that it can be reused for both team and player pages across all sports.
gif cycling between player pages of various sports
Background
Bringing augmented reality to the Sports app.
Play AR is a new augmented reality feature in the Yahoo Sports app. Using player tracking data, each key play is enriched with advanced stats and allows users to see every angle of the game as it happened. 
‍
As the sole product designer on this quick-turnover project, my role was to create a branded identity and design system for AR content in the Sports app (I did not work on the actual AR content). These assets included various carousel styles, badges, landing pages, and promotional material.
In-game AR
Users can zoom in and pivot around an AR football field to see how critical moments in the game played out. The experience is also supplemented with relevant player stats.
Game page cards
Users can see a short description of the AR play on the game page before tapping into the play.
iphone 12 screenshot of the super bowl final result. shows three blue holographic cards indicating users can tap to see AR content
AR branding
While most of the Sports design system is grayscale, AR content in the Sports app is easy to find thanks to its unique bright blue holographic branding.
iphone 12 screenshot of the yahoo sports home page showing a carousel of AR content with a tooltip indicating users can tap to see AR content
New and in-depth data visualizations.
The Sports app gets tons of data on athletes and games but we weren’t taking advantage of it. We either did not surface it at all or was presented in outdated nebulous modules. I led several design initiatives to introduce engaging data visualizations to various parts of the Sports app.
Game leaders
The refreshed game leaders module feels more in line with our current design system and places more emphasis on the main stats. It is also easier to compare the teams’ stats at a glance.
iphone 12 gif showing the game leaders animation of the warriors v raptors game
Win probability
The win probability chart shows a team’s chances of winning at a given moment. Users can follow the chart during a live game and go back and scrub through the chart when a game is completed.
iphone 12 gif showing the win probability chart of the live warriors/nuggets game. the user is scrubbing through the chart and seeing the win probability update as they scrub
MLB plays
The MLB plays feature originally didn’t have any added details under each play. Now, users can expand each inning to see the result of each pitch, the pitch type, speed, and location.
iphone 12 gif showing the plays tab of the giants vs mets game. the user is tapping the inning to expand the module and reveal additional information about the pitch
A design system for charts and data.
As we added more data visualizations to the Sports app, we quickly began to realize we needed to put a design system in place. We were creating extra work for ourselves- trying to make each chart unique when a unified system would satisfy all our needs (and make our devs’ lives easier). We used my design from the win probability chart as a template and built a cover probability chart and a line movement chart using the same system.
the yahoo sports chart design system
Introducing Fantasy to Yahoo Sports.
The Sports app began an initiative to introduce more fantasy content in our product since we have a myriad of data available from the Yahoo Fantasy app. Our goal was to drive fantasy-curious people to a new fantasy tab and eventually convert them to Fantasy users. We also hoped to bridge the apps and foster more unity between their design systems.
‍
We began this process by introducing a fantasy leaderboard for each major league. Our assumption was that showing the top fantasy leaders provided an intriguing low barrier to entry for fantasy-curious users. They would then have the option to dive deeper in the Fantasy app.
Live updates
If there are live games, the leaderboard will update with changes in an athlete’s fantasy points. The fantasy points will briefly flash green or red depending on if the athlete has gained or lost points.
iphone 12 screenshot of the fantasy leaders module. lebron james gains points and move up the leaderboard
Position filtering
Within each league, users can choose to view all the athletes in one list or filter between different positions for a more granular understanding of the fantasy points rankings. 
iPhone 12 gif of the fantasy leaderboard. the user is filtering between showing all basketball players and just guards
Fantasy ticker
A preview of the leaderboard appears on the league scores tab. Users can get a small preview of the module then head to the fantasy tab to see the full leaderboard with additional news.
iPhone 12 gif showing the scrolling fantasy leaders ticker
Thoughts and learnings.
I know saying “I learned so much working on this product” is cliche, but I really learned so much. Coming into this team, the only sports knowledge I had revolved around basketball and tennis. I quickly learned the lingo and basic rules of other sports so I could do my best design work. I also became better at thinking in terms of design systems rather than individual designs. On a sports app, almost anything you design for one sport has to work for all of them. I approach my work much more holistically now than I did before my time on this team.
‍
Furthermore, even though it wasn’t always easy, I became a much better storyteller, communicator, and design advocate during my time here. On a product where the focus is constantly shifting from one sports season to the next, you really have to speak up and advocate for your work to be included in product roadmaps. If you can’t successfully sell your ideas and work with PMs and engineers on timelines and requirements, “we’ll get to it for the 2023 season” becomes a common phrase thrown at you. 
Article
Article pages also received a massive refresh during the redesign. The old Newsroom design felt cluttered and distracted users from the contents of the article. We took the time to make articles more readable, more accessible, and more focused on the news itself.
Timeline
April 2018 - 2019
Timeline
April 2018 - 2019