Newsfeed
Role
UI /UX design, page experience, content recommendation, design system, typography ramp, design language
Collaborated with
Creative director, product owner, frontend dev, design system manager, content team
Overview
Description
I was tasked to recommend and implement a new design system for displaying news content on the NFL App to combat complaints about the stale feel and lack of personalization.I needed to make sure the new design system was responsive to all devices, as well as other NFL products.
Problems
The old NFL App’s News page did not feel personalized to the user because the static layout did not give much flexibility to the content team for creating more unique layouts. The news feed also did not display the user's favorite team on the main page; instead, that content was programmed in a separate tab.
Solution
Once users land on the News page of the NFL App, they are greeted with a large hero image featuring the top news around the league or breaking news about a team or player.
I created modular content cards to give the content team flexibility for more unique layouts. Each card displays articles and videos, and shows a “read” state for content that users have already viewed.
Users can “favorite” a team during the on-boarding of the app’s first launch or in the settings menu, which personalizes their feed by featuring a content block for that team.
I recommended new header tags with color coding to separate different articles and videos for users to easily scan and see which content they want to tap on.
At the bottom of the news feed I added a carousel displaying video playlists for all the NFL Network shows and video content for users to discover after finishing each article.