Overview
ESPN Player page, a strategic initiative aimed at providing sports enthusiasts with a streamlined and user-friendly interface to access detailed player information. By meticulously incorporating user insights and industry best practices, the platform seamlessly integrates features such as News, Stats, Bios, Splits, and Game Logs. An intuitive system was implemented for users to effortlessly follow their favorite players and receive personalized alerts.
A successful migration of player pages for 14 sports to a new technology platform, strategically reducing cost by retiring legacy templates. This initiative not only optimized operational efficiency but also showcased a commitment to innovation.
GOAL: To craft a product that is simple, intuitive, and aesthetically pleasing, designed to meet the diverse needs of sports fans. This involves creating a seamless user experience that caters to fan requirements while simultaneously aligning with and advancing key business objectives.
SOME CONTEXT
My role: Lead Designer, UX/UI Designer, Prototype
Platforms
IOS • Android • Web
The Challenge
- Create a template that works for all sports: NFL, MLB, Soccer, NHL, UFC, Cricket, Rugby, etc.
- Legacy page was from the 90’s so a complete redesign and backend update needed, which required a very close communication and collaboration with Front-end and back-end developers.
- Ensure a lively and consistent user experience across all platforms, filled with relevant and engaging content.
- Introduce novel features seamlessly within the user’s context for a more intuitive and user-friendly experience.
- Provide information with ease through both light and dark modes, ensuring accessibility and user comfort in various viewing environments.
- Implement strategies to boost website traffic, elevate user engagement, and improve retention rates for a more compelling and sustained online experience.
Challenge Statements
- What key details do sports fans prioritize when seeking information on a player page?
- Do sports fans generally gravitate more towards following individual players or supporting teams as a primary preference?
- In regards for the Player Strip what information is most relevant for users?
- How can we deliver sports information that is both engaging and easily digestible, avoiding overwhelming details for sports fans?
- How can we effectively utilize team colors in a design that seamlessly transitions between light and dark modes, ensuring visual coherence and accessibility?
Scenario
- User wants to find information ( Bio, latest news, status, next games)from a specific NFL players.
User Frustration
- Challenged by the difficulty in locating relevant and organized player information.
- Limited by a single entry point through global search, hindering efficient navigation and exploration.
- Nor able to follow a player.
- Missing personalized updates on a specific player’s latest news, matches, and injuries due to a lack of notification options.
- Challenges with inconsistent and scattered statistics presentation.
User Testing
- User testing in Framingham Massachusetts avid sports fans.
- Focus on player information relevancy on the Player Strip: is the Player information relevant to the user?
- Are Season stats data points clear and relevant?
- Are modules: Player Status, Stats, Previous, Next or Upcoming games, etc organized in a way easy for users to scan and consume.
- Investigating if users would follow a player.
- Can users find easy entry point to get to the player page, and from there find more players they like?
PROTOTYPING TOOL: Principle
PROTOTYPE: Lead Designer
USER TESTING: ESPN User Research team
UX & UI DESIGN
Mobile
The App Web view showcases the main header with team color, logo, and player name, allowing users to receive alerts. The Player Strip features key player information, stats, player image, team logo, and an intuitive follow button.
- Users can access Player pages through diverse channels including the Home feed, Follow player cards, global search, and the switch player module.
- Implementing a sticky navigation for effortless user navigation and streamlined consumption of desired information.
- Incorporate a clear and intuitive ‘Follow’ button to prevent user confusion and encourage seamless engagement.
- Ensuring minimalistic utilization of team colors with thorough color accessibility testing for an inclusive design.
Player Page KPIs
Desktop
Compare Legacy Desktop Player Page (Left) with Redesigned Player Page (Right), featuring editors customizable navigation items such as Overlay, News, Stats, Bio, Game Log, and Photos that can be tailored to specific sports.
TYPO & COLORS
Design System
The project features a cohesive design with the utilization of SF Pro Display and Text font family, along with a defined minimalist style and color palette.
COMPONENTS
Modules
- Implementing a modular design that empowers editors to dynamically rearrange modules based on user data and behaviors, ensuring adaptive and personalized content placement.
- Enabling users to access real-time data for up-to-the-minute information.
- The Switch Player module facilitates seamless navigation, allowing sports fans to effortlessly discover players from the same or other teams.
SHOWCASE
Final Project
The versatile Player Page, spanning across all sports (NFL, UFC, NBA, MLB, etc.), seamlessly extends its templates to various devices and is integrated into the ESPN Fantasy Sports App.
