theScore: Icon Redraw
Design systems,
Iconography
Overview
Alley-oop 🏀 is a design system hosting hundreds of icons used across theScore and ESPN platforms.
I worked closely with two fellow designers in an initiative to improve Alley-oop's icon identity and make it easier for feature designers and developers to work with our design system, creating over 20 icons and 45 graphics for Alley-oop's design guidelines.
DISCOVERY
The problem 🔍
With icon libraries scattered across files and the icon themselves lacking consistency, feature teams often struggled with efficient usage.
Scattered icon libraries…
… and inconsistent iconography!
The outcome
We refactored the entire icon library into a centralized location to ensure consistency and reliability, and established design and usage guidelines. Having a singular source of truth dissolved ambiguity around icon usage, and greatly streamlined the process for both developers and designers.
Our new icon system and documentation website decreased inquiries about icon locations by 64%
THE TASK
Deceptive simplicity
I designed and vectorized new icon within our guidelines. The challenge was… icons are tiny! With such little available space, it's not an exaggeration when I say that every pixel matters.
Icons play a key role in communicating information and can cause incredible friction if poorly designed.
In other words, I got really good at squinting 👀
OLD
O
NEW
Many icon designs were entirely changed.
Adherence to our style guide was vital.
Step-by-step
Sketching was often my first step!
I always ideated until I was completely out of ideas— an arduous but fun challenge…
… like completely out of ideas.
In other words, my team got really good at squinting too 😅
I was often torn between designs. My team was my anchor and I thrived on their feedback.
The final step was prepping our icons for dev handoff. We standardized our vector formatting process for smooth integration with Github pipelines.
Documentation
I created documentation for our icons, covering best practices, accessibility, and much more for Alley-oop's docsite.
I ended up creating 45 graphics for the design guidelines page alone.
The outcome
I designed 20 new icons and the guidelines page for our new documentation site, creating over 45 graphics!
Having a singular source of truth dissolved ambiguity around icon usage, and greatly streamlined the process for both developers and designers, decreasing inquiries about icon locations by 64%
Thank you for scrolling!
© Coco Wang 2025