theScore Sportsbook Icons
Goal
Create stylized icons for all sports in line with Alley-oop guidelines, with the goal of helping users easily navigate different leagues and sports within the app, leading to increased engagement and bets.
Overview
Contributed 18 new illustrated icons and 47 outlined and filled icons to the design system library, Alley-oop. These icons are used in the navigation carousel in the theScore BET app (previously ESPN BET).
Process
My first week at PENN, I was introduced to the Design Systems team and jumped headfirst into this project. The team had drawn a handful of icons for some of the biggest sports already, but needed help creating the remaining icons on the list of sports for the app. The existing set drawn by the Design Systems team, shown below, established the style for the icons - dynamic, sporty, and most importantly, illustrated.
The challenge? I had never created tokens for an app, and had never worked within a design system with a documentation site like Alley-oop. And a lot of the sports that needed icons weren't shaped like circles, so things like shadows and highlights needed exploring. But I love a challenge and learning new things!
After a brief crash course from the Design Systems team and armed with the Alley-oop documentation, I created 18 new icon tokens that were added to the library. All icons went through a phased review process:
-
I made tweaks based on feedback from the Design Systems team, ensuring all icons met guidelines
-
Pitched the icons to leadership and made iterations based on their feedback
-
Finalized each icon per Alley-oop guidelines so they were optimized for use in-app
Once the illustrated versions of the icons were approved, I partnered with the Design Systems team to draw 47 total outlined and filled versions of the icons, which are used in search and the Parlay Lounge.
I also learned additional steps like componentizing the icons in Figma and preparing them for addition to the library to help take some workload off the Design Systems product designers.
Outcome
The icon work that has been completed ensures all sports have icons as they're added into the app as seasons start. We also built the foundation for additional sports icons to be added in the future for categories like Olympics, esports, and more.