ESPN
I kicked off the project by running a discovery workshop in FigJam with the Product Owner, Product Manager, Lead Developer, and fellow Product Designer. We identified business goals, known user pain points, platform needs, and high-level user testing goals.
Next, I evaluated the existing Gamecast experience across NFL, NBA, NHL, and soccer taking screenshots and then annotating major usability findings between pregame, live, and postgame states. In conjunction, we did a competitive analysis of comparable apps' Gamecast experiences and analyzed customer support logs. Major themes were a lack of accessibility (especially with team colors), inconsistencies between components, a desire for interactivity, integration with Fantasy, and opportunities for personalization.
From here I collaborated with our UX Research team to run a moderated user test to identify additional user needs. My colleague and I wrote recruitement criteria and objectives and used our previous findings to inform the testing plan. Next we created Figma prototypes and the UX Research team conducted moderated user testing through UserTesting.com while I observed and documented the findings. The summary of findings revealed the users' desire for speed and efficiency, betting integration, and personalization.
From here we split the project into 2 phases: quick win enhancements and large scale improvements.
Our research revealed inconsistencies between styles, modules, and the assets within them. As part of Phase 1, we updated the components to use ESPN's latest design system, called Prism, which uses a color ramp for both light and dark mode (shown above), contextually defining when to use each color. It also pulls from a type ramp that can flex between desktop and mobile breakpoints.
I also helped construct the ESPN branded Prism libraries, which include base components such as CTA Buttons, card collections (shown above), and navigation, used as the foundation to build content-rich components across our apps and website.
Alongside the Prism system, I built out the ESPN media library using Figma variants, which include team logos & color swatches to use across the 5 major pro sports leagues and NCAA, totaling 300+ teams. A major usability concern was the contrast accessibilty of team logos & colors, especially in Dark Mode and when placing a team logo on top of a team color. As a result, I rethought the logic of team color usage within data viz using a flow document. I also created team logo and color Accessibility Guidelines to use across platforms for our dev and design teams.
In order to make the Gamecast components more consistent and accessible, I created a base component set for Game Headers using Figma variants, the design system, and media library. Game Headers are the scoreboard headings found at the top Gamecast, on the homefeed cards, and on team/league pages. I then created templates (examples shown above) for each major sport & game state that flex across all breakpoints. Similarly, I created a base variant and templates for scorecells, which are dedicated scorecards found in card collections throughout app and web.
Using the Gamecast evaluation, user testing, and direction from our Product owner, I redesigned Gamecast in high fidelity. Phase 1 included making GameCast more accessible, adding consistency across modules and sports, utilizing the Prism design system, enhancing the data viz, and increasing interactivity. Modules that I redesigned included the field/court/rink graphics, play by play, team stats data viz, game headers, and game information (weather, attendance) across all breakpoints. See below for detailed examples.
I then reused the NFL modules as a template for the NHL Gamecast redesign. I focused on major modules including the NHL rink visualizations. They had notable accessibility issues on both live and postgame states, especially with the game event markers (shots, goals, penalties). I also addressed scoring summary, play by play, win probability, team stats, game information, and standings. From here we applied to same system to NBA and soccer.
I also led the redesign of the Men's and Women's NCAA March Madness brackets for ESPN.com. I utilized the Prism scorecell component in a scalable layout and flexed the logo and team color logic to create the championship banners. The project reached 20+ million users and received universally high reviews. Our team reused this bracket system for the NBA, NFL, NHL, and World Cup brackets.
