Alley-oop
Documentation Site
Design systems
Overview
Alley-oop 🏀 is a multi-theme, multi-brand design system housing the foundations that facilitate beautiful, consistent, and accessible experiences across theScore Bet platforms.
During my internship at theScore, I was given the opportunity to spearhead the development of the design system's brand new documentation site.
Timeline
2 months
July - August 2024
Team
5 developers
4 product designers
Role
Product designer
Just want to see the final product? Click here!
DISCOVERY
Understanding our users
At the beginning of our documentation site project, I conducted a survey with a fellow designer to gather insights about how feature designers interacted with our design system.
Together, we finalized a set of 10 questions, gathered responses from sportsbook designers across 4 different teams, and analyzed the responses.
Key insight 🔍 … poor documentation
Feature designers struggled with:
Lack of usage documentation
The design systems team would often get clarifying questions about certain components.
just checking if im using this icon correctly? 😅
should I use #625F5F or #5C5858 for this button?
Theming
There was confusion about how certain components and tokens behaved on brand or device change.
General uncertainty
Designers were unsure of where to seek information regarding specific questions or topics.
???
But we have documentation!
However, a significant amount was unorganized or outdated, stressing how documentation cannot be an afterthought.
Poor documentation is often not much better than no documentation, because it simply won't be used.
Figma
Loom
Confluence
Documentation was spread across many platforms.
Existing documentation was difficult to navigate.
So we asked ourselves…
How might we make it easier for feature designers and developers to find documentation, guidelines, and information about Alley-oop?
Defining success
Based on our findings from our user research and stakeholder expectations, we more narrowly defined several objectives so we're able to measure success. This helped us proceed to ideation in clear alignment with our goals.
1
Designers and developers feel that they have a better understanding of our design system
2
It's easier to find information, guidelines, and documentation related to Alley-oop
3
Alley-oop has smoother and more intuitive onboarding for designers and developers
4
All tokens and components housed by Alley-oop can be shown at the theme level
IDEATE
Supernova!
We endearingly named our project Supernova, simply after the design system platform we utilized.
During the following month, I had the unique pleasure of watching our documentation site come together, not unlike the formation of a new star— a bit ironic!
Competitive analysis
By Supernova launch, I had conducted excessive research on dozens of existing design systems. Since a documentation site was uncharted territory for me and much of my team, we sought much inspiration from industry exemplars.
Some of my favorite design systems were:
Duet for LocalTapiola— intuitive token switcher between two distinct themes
Spectrum by Adobe— great breakdown of design tokens, amazing accessibility guidelines
Workbench by Gusto— fantastic usage examples and navigational hierarchy, general good vibes!
Navigational hierarchy
As a team, we iterated through many different models for navigational hierarchy at a holistic level as well as for individual sections. Navigational hierarchy was full of surprises for me— what was intuitive for designers was not necessarily so for developers, so our final choices were an exercise in compromising.
I ensured that inclusive and accessible design lived near the core of our design philosophy by iterating through structures of presenting principles and guidelines in our documentation.
The final iterations were eventually user tested with developers by two other team members.
Creating content for Supernova
After cataloguing user insights, competitive analysis, and locking down our navigational hierarchy for the MVP, I dove right into hi-fidelity. When designing pages for Alley-oop, there were certain key concepts I internalized to the point of second nature.
Searchability
The way content is laid out must be consistent, and all content must be searchable.
Concision
When it comes to documentation, use minimal space and content to convey maximum meaning.
Scalability
I designed content on Supernova to evolve alongside the growth of the Alley-oop design system.
Of course, constant feedback and collaboration was vital at every step of the way. It was also important for us on the design systems team to stay informed about what our design partners on feature teams were working on so that we can strategically approach the content in our site.
💡 Design jams
💬 Slack channels
🔍 Design crits
📣 Biweekly design sync
🔄 Sprint retros
🎨 Weekly team sync
Navigating challenges— visual hierarchy
I noticed that when displayed against our light color palette, our dark themed "best practices" cards inadvertently gave the illusion of a section divider, causing confusing hierarchy. It's easy to mentally fill in the negative space between the black rectangles— a behavior that can be attributed to the Gestalt law of closure.
Dark themed "best practices" cards
❌ Can be mistaken for a divider when scanning
Light themed "best practices" cards
✔️ Does not steal visual weight from other elements
Pivoting into a light version of the "best practices" cards solved this problem, allowing the visual focus to return to our headings. The new version is more aesthetically cohesive with our website anyways!
LAUNCH🚀
Key deliverables
User research
I planned and conducted a survey to gather user insights across four feature teams, later presenting the findings.
20+ new icons
I contributed icons to Alley-oop as part of the icon redraw project.
10+ unique pages
I spearheaded design direction, copy, and graphics for content in the Alley-oop documentation site.
Let's take a look at my work on Supernova!
✦
✦
✦
✦
✦
✦
Foundations
I created the introductory page for our foundations section, breaking down Alley-oop's robust design token and theming structure in a digestible way for designers and developers.
ESPN and theScore offer a range of products across 4 themes and 3 platforms. Ensuring that our users are able to understand and navigate this environment is mandatory.
#00755E
espn/green/70
color/border/success
Color tokens
I designed the overview and usage guidelines for our color tokens, addressing important aspects such as brand color anatomy, WCAG contrast ratios, and usage best practices.
I conducted an audit on how we use our ESPN color tokens across its two themes, creating sets of ideal color pairings that integrate smoothly into the existing design system.
Accessibility
Due to Alley-oop undergoing certain structural changes at the time, accessibility standards were not yet set in stone.
I took this opportunity to advocate for the importance of good accessibility documentation. I touched upon many different aspects of inclusive and accessible design throughout my Supernova work.
Empathy
✦
✦
Consistency
Visual hierarchy
Color contrast
AA ✔
Responsive design
Interaction states
Confirm
I created the primary accessibility section from scratch, researching and documenting design philosophy and principles to ensure an inclusive experience for all users navigating through our products.
Iconography
I created documentation for icon overview and usage, covering best practices, accessibility considerations, and more.
During my time at theScore, I was also heavily involved in the icon redraw project in an effort to establish icon standards across the design system. I created the documentation page for the design guidelines of new icon creation to ensure consistency for future additions to Alley-oop.
I personally designed 20 icons for our design system, and contributed to many more.
As a team, we completed 41 icons over the span of my internship.
I ended up creating 45 graphics for the icon design guidelines page alone.
The icon redraw project was also my first deep dive into iconography so it was an exciting challenge to learn, design icons, and later document all in the same breath.
Theme bundling
A goal of Supernova was to display all tokens and components from the Alley-oop design system at the theme level.
With a fellow designer, we migrated our 300+ existing tokens into the new documentation website. With Supernova, finding and referencing specific design tokens is far more efficient. A tab system allows for easy switching between themes, and tokens are searchable.
ESPN Dark
ESPN Light
theScore
background/surface/overlay
text/primary
button/primary/default
Changelog & FAQ
I set up the changelog in preparation for future updates to Alley-oop. I migrated our existing FAQ from Confluence, edited the content for clarity, and made several additions based on the findings from our user research.
A stellar explosion!
Our Alley-oop documentation site launched on the last day of my internship! It was a close call— my wonderful team bumped up the release date and we put in lot of effort into meeting this deadline.
Launch was a smooth affair, and we met every objective in terms of content we wanted for the MVP.
✔️ Onboarding
✔️ Documentation
✔️ Usage guidelines
✔️ Accessibility
✔️ Tokens by theme
✔️ Branding
✔️ FAQ
✔️ Contribution
Design impact
Although it was too soon to collect internal usage insights, it's safe to say that the Alley-oop documentation site will be making a positive impact. Good documentation proves exceedingly valuable when it comes to improving workflow efficiency, a universal pattern observed time and time again with comprehensive research.
60% of employees have had a difficult time retrieving vital information from fellow colleagues.
A single source of truth saves time and provides a valuable sense of security.
Only 12% of employees agree that their organization does a great job of onboarding.
At the forefront of the industry, it's important to be among that 12% here at theScore!
FUTURE THINKING
Measuring impact
Conducting another round of surveys with feature designers and developers was in our plans. We can then compare the new findings against our initial research.
Our initial survey found an average score of 7.2 when rating the usability of Alley-oop across 11 designers.
An average increase of 2 is our target for the next survey.
Validating our design
During my last week, I had began to ideate a set of questions for usability testing, sorted into four main categories: user satisfaction, content quality, usability, and branding.
Demographic data would also be recorded to observe if there are noticeable trends when paired against our previous survey research.
Are there any features or tools that you would like to see on the site?
Does the guide take you through a logical flow when exploring related topics?
How did you find the experience of searching for specific information or guidelines?
Were there any elements that felt out of place or inconsistent with the brand?
Learnings
Communication is key 🤝
Being a good communicator is half the job. I greatly refined these skills during my time here working in a cross-discipline team.
Perfectionism can be a trap 🕒
While good to pursue, perfectionism must be balanced with priorities. I improved with advice from my mentors as well as iterating upon my work process.
A new passion! ❤️
I really enjoy working with design systems! I had the pleasure of learning this about myself during my experience at theScore.
Thank you for scrolling!
Wealthsimple Industry Project
Up next
Let's connect!
Hey, thanks for looking all the way down here. Click me for a fun fact!
Did you know that there are more trees on Earth than stars in our galaxy? 🪐
Sharks are older than both trees and the rings of Saturn!
"Häagen-Dazs" has no meaning in any language— the creator, Reuben Mattus, just wanted it to sound European!
Woolly mammoths were still walking the Earth while the pyramids were being built!
Singing and speaking are not processed in the same part of the brain— but music and math are!
You can fit all the other planets in our solar system between Earth and the Moon!
The color orange was named after the fruit!
Fingernails grow at about the same rate that continents move!
You're slightly taller at night because your body is getting pulled by the gravity of the moon!
Okay, I'll be honest, that last one I totally made up because I'm running out of steam here. I'm happy to share some more over coffee though :) ☕
Alley-oop
Documentation Site
Design systems
Alley-oop Documentation Site
Alley-oop 🏀 is a multi-theme, multi-brand design system housing the foundations that facilitate beautiful, consistent, and accessible experiences across theScore Bet platforms.
During my internship at theScore, I was given the opportunity to spearhead the development of the design system's brand new documentation site.
Timeline
2 months, July - August 2024
Team
5 developers, 4 product designers
Role
Product designer
Just want to see the final product? Click here!
DISCOVERY
Understanding our users
At the beginning of our documentation site project, I conducted a survey with a fellow designer to gather insights about how feature designers interacted with our design system.
Together, we finalized a set of 10 questions, gathered responses from sportsbook designers across 4 different teams, and analyzed the responses.
Key insight 🔍 …
poor documentation
Designers struggled with:
Lack of usage documentation
The design systems team would often get clarifying questions about certain components.
just checking if im using this icon correctly? 😅
should I use #625F5F or #5C5858 for this button?
Theming
There was confusion about how certain components and tokens behaved on brand or device change.
General uncertainty
Designers were unsure of where to seek information regarding specific questions or topics.
???
But we have documentation!
However, a significant amount was unorganized or outdated, stressing how documentation cannot be an afterthought.
Poor documentation is often not much better than no documentation, because it simply won't be used.
Figma
Loom
Confluence
Documentation was spread across many platforms.
Existing documentation was difficult to navigate.
We asked ourselves:
How might we make it easier for feature designers and developers to find documentation, guidelines, and information about Alley-oop?
Defining success
Based on our findings from our user research and stakeholder expectations, we more narrowly defined several objectives so we're able to measure success. This helped us proceed to ideation in clear alignment with our goals.
1
Designers and developers feel that they have a better understanding of our design system
2
It's easier to find information, guidelines, and documentation related to Alley-oop
3
Alley-oop has smoother and more intuitive onboarding for designers and developers
4
All tokens and components housed by Alley-oop can be shown at the theme level
IDEATE
Supernova!
We endearingly named our project Supernova, simply after the design system platform we utilized.
During the following month, I had the unique pleasure of watching our documentation site come together, not unlike the formation of a new star— a bit ironic!
Competitive analysis
By Supernova launch, I had conducted excessive research on dozens of existing design systems. Since a documentation site was uncharted territory for me and much of my team, we sought much inspiration from industry exemplars.
Some of my favorite design systems were:
Duet for LocalTapiola— intuitive token switcher between two distinct themes
Spectrum by Adobe— great breakdown of design tokens, amazing accessibility guidelines
Workbench by Gusto— fantastic usage examples and navigational hierarchy, general good vibes!
Navigational hierarchy
As a team, we iterated through many different models for navigational hierarchy at a holistic level as well as for individual sections. Navigational hierarchy was full of surprises for me— what was intuitive for designers was not necessarily so for developers, so our final choices were an exercise in compromising.
I ensured that inclusive and accessible design lived near the core of our design philosophy by iterating through structures of presenting principles and guidelines in our documentation.
The final iterations were eventually user tested with developers by two other team members.
Creating content for Supernova
After cataloguing user insights, competitive analysis, and locking down our navigational hierarchy for the MVP, I dove right into hi-fidelity. When designing pages for Alley-oop, there were certain key concepts I internalized to the point of second nature.
Searchability
The way content is laid out must be consistent, and all content must be searchable.
Concision
When it comes to documentation, use minimal space and content to convey maximum meaning.
Scalability
I designed content on Supernova to evolve alongside the growth of the Alley-oop design system.
Of course, constant feedback and collaboration was vital at every step of the way. It was also important for us on the design systems team to stay informed about what our design partners on feature teams were working on so that we can strategically approach the content in our site.
💡 Design jams
💬 Slack channels
🔍 Design crits
📣 Biweekly design sync
🔄 Sprint retros
🎨 Weekly team sync
Facing challenges
I noticed that when displayed against our light color palette, our dark themed "best practices" cards inadvertently gave the illusion of a section divider, causing confusing hierarchy. It's easy to mentally fill in the negative space between the black rectangles— a behavior that can be attributed to the Gestalt law of closure.
Dark themed "best practices" cards
❌ Can be mistaken for a divider when scanning
Light themed "best practices" cards
✔️ Does not steal visual weight from other elements
Pivoting into a light version of the "best practices" cards solved this problem, allowing the visual focus to return to our headings. The new version is more aesthetically cohesive with our website anyways!
LAUNCH🚀
Key deliverables
User research
I planned and conducted a survey to gather user insights across four feature teams, later presenting the findings.
20+ new icons
I contributed icons to Alley-oop as part of the icon redraw project.
10+ unique pages
I spearheaded design direction, copy, and graphics for content in the Alley-oop documentation site.
Let's take a look at my work on Supernova!
✦
✦
✦
✦
✦
✦
Foundations
I created the introductory page for our foundations section, breaking down Alley-oop's robust design token and theming structure in a digestible way for designers and developers.
ESPN and theScore offer a range of products across 4 themes and 3 platforms. Ensuring that our users are able to understand and navigate this environment is mandatory.
#00755E
espn/green/70
color/border/success
Color tokens
I designed the overview and usage guidelines for our color tokens, addressing important aspects such as brand color anatomy, WCAG contrast ratios, and usage best practices.
I conducted an audit on how we use our ESPN color tokens across its two themes, creating sets of ideal color pairings that integrate smoothly into the existing design system.
Accessibility
Due to Alley-oop undergoing certain structural changes at the time, accessibility standards were not yet set in stone.
I took this opportunity to advocate for the importance of good accessibility documentation. I touched upon many different aspects of inclusive and accessible design throughout my Supernova work.
Empathy
✦
✦
Consistency
Visual hierarchy
Color contrast
AA ✔
Responsive design
Interaction states
Confirm
I created the primary accessibility section from scratch, researching and documenting design philosophy and principles to ensure an inclusive experience for all users navigating through our products.
Iconography
I created documentation for icon overview and usage, covering best practices, accessibility considerations, and more.
During my time at theScore, I was also heavily involved in the icon redraw project in an effort to establish icon standards across the design system. I created the documentation page for the design guidelines of new icon creation to ensure consistency for future additions to Alley-oop.
I personally designed 20 icons for our design system, and contributed to many more.
As a team, we completed 41 icons over the span of my internship.
I ended up creating 45 graphics for the icon design guidelines page alone.
The icon redraw project was also my first deep dive into iconography so it was an exciting challenge to learn, design icons, and later document all in the same breath.
Theme bundling
A goal of Supernova was to display all tokens and components from the Alley-oop design system at the theme level.
With a fellow designer, we migrated our 300+ existing tokens into the new documentation website. With Supernova, finding and referencing specific design tokens is far more efficient. A tab system allows for easy switching between themes, and tokens are searchable.
ESPN Dark
ESPN Light
theScore
background/surface/overlay
text/primary
button/primary/default
Changelog & FAQ
I set up the changelog in preparation for future updates to Alley-oop. I migrated our existing FAQ from Confluence, edited the content for clarity, and made several additions based on the findings from our user research.
A stellar explosion!
Our Alley-oop documentation site launched on the last day of my internship! It was a close call— my wonderful team bumped up the release date and we put in lot of effort into meeting this deadline.
Launch was a smooth affair, and we met every objective in terms of content we wanted for the MVP.
✔️ Onboarding
✔️ Documentation
✔️ Usage guidelines
✔️ Accessibility
✔️ Tokens by theme
✔️ Branding
✔️ FAQ
✔️ Contribution
Design impact
Although it was too soon to collect internal usage insights, it's safe to say that the Alley-oop documentation site will be making a positive impact. Good documentation proves exceedingly valuable when it comes to improving workflow efficiency, a universal pattern observed time and time again with comprehensive research.
60% of employees have had a difficult time retrieving vital information from fellow colleagues.
A single source of truth saves time and provides a valuable sense of security.
Only 12% of employees agree that their organization does a great job of onboarding.
At the forefront of the industry, it's important to be among that 12% here at theScore!
FUTURE THINKING
Measuring impact
Conducting another round of surveys with feature designers and developers was in our plans. We can then compare the new findings against our initial research.
Our initial survey found an average score of 7.2 when rating the usability of Alley-oop across 11 designers.
An average increase of 2 is our target for the next survey.
Validating our design
During my last week, I had began to ideate a set of questions for usability testing, sorted into four main categories: user satisfaction, content quality, usability, and branding.
Demographic data would also be recorded to observe if there are noticeable trends when paired against our previous survey research.
Are there any features or tools that you would like to see on the site?
Does the guide take you through a logical flow when exploring related topics?
How was the experience of searching for specific info or guidelines?
Were there any elements that felt out of place or inconsistent with the brand?
Learnings
Communication is key 🤝
Being a good communicator is half the job. I greatly refined these skills during my time here working in a cross-discipline team.
Perfectionism can be a trap 🕒
While good to pursue, perfectionism must be balanced with priorities. I improved with advice from my mentors as well as iterating upon my work process.
A new passion! ❤️
I really enjoy working with design systems! I had the pleasure of learning this about myself during my experience at theScore.