Client
CBS Sports
Role
Lead Designer
Tools
Figma / Photoshop
Deployment
Up To 2.6M+
Soccer League Matchups ⚽️ Redesign For HTML Email Transition
Paramount+ is the exclusive home for all UEFA Champions League live matches in the US and also offers coverage of other soccer leagues such as NWSL, Italy's Serie A, etc. Emails are of vital importance to reach growing numbers of subscribers and soccer fans. The open rates and click-through rates on these matchup emails are consistently high. Some user research has shown that soccer fans tend to check these matchup schedule emails more than once—something unheard of with other types of emails.
See how my sports-centric designs and system helped CBS Sports increase deployment volume from 800K to 2.6M per email, making it a definitive success design journey.
325%
Increase in deployments
100%
Stakeholders/Devs satisfaction
△ The early design of the UEFA matchups in 2021. I designed these based on the existing workflow at the time, when there was no HTML framework (these were image-based emails). I liked them visually, but the designs could only be built as one-off units. This approach was time-consuming and unproductive when faced with business demands to reach a higher number of growing subscribers and soccer fans. The heavy image-based emails didn't meet accessibility best practices—either causing longer loading times on poor connections, or if images didn't display, users would miss all the matchup information. The player image usage was limited to only the Championship matches due to the impracticality of swapping images last minute if a player was injured. There were real needs to improve user experience, changing the framework to be more productive and expand the flexibility of dynamic content.
▽ Phase 1: I began the overhaul by redesigning these soccer matchup emails to be more HTML/CSS friendly. The first deployment launched in early 2022. My priorities were to create modular HTML schedule matchup tables for easy customization, reduce the number of images used in the builds, and develop new components that adhered to each league's brand style, font, and color guidelines.
△ I simplified the structure to ensure the essential matchup schedule appeared above the fold, even on small mobile devices. The only image needed in the hero section was the header, for which I offered two options—featured players or an evergreen header. This approach proved valuable, as headers could be easily swapped at the last minute if a player was injured or changed. We conducted A/B tests on several design variations, with contrast improvements visible in the right-most version below. This HTML-friendly design automatically inverts colors when users enable dark mode settings.
▽ Phase 2: In late 2022, I began designing a solution to feature matchups from multiple soccer leagues per CBS Sports stakeholders' request. The challenge: each league has unique style guidelines, and development resources were limited to support individual deployments.
Building on our new HTML framework, I developed a modular card system. Each league received its own card—the featured league at the top with a seasonal banner image containing its logo and brand graphics, while secondary leagues used thinner headers. Matchup tables and fonts were built in HTML/CSS using each league's brand colors, with cards that could be interchanged based on weekly priorities.
△ The result was exceptional. This sports-centric design system united different leagues' matchups cohesively, delighting both developers with its easy customization and stakeholders with its visual impact. The system helped CBS Sports increase deployment volume from 800K to 2.6M per email, making it a definitive success.
Later on, I made some adjustments to the matchup tables to add team logo shields and stacked longer team names.
▽ For the handoff, I created documentations with detailed specs on the new components, typography, league's colors, league's graphics, spacings etc. for both design and dev teams to adhere and refer to on future builds.
My Role
Lead UI/UX Design, Visual Design, Prototype, Test QA
Tools
Created for
Desktop / Mobile
Timeframe
2021-2023
Conclusion:
🎯 The result was exceptional. This sports-centric design system united different leagues' matchups cohesively, delighting both developers with its easy customization and stakeholders with its visual impact. The system helped CBS Sports increase deployment volume from 800K to 2.6M per email, making it a definitive success.
325%
Increase in deployments
100%
Stakeholders/Devs satisfaction