Big Project? The Only Place to Start

The Network: Colloseum Design System

PlayOn! Sports

NFHS Network: The Streaming Site for High School Sports

Role

Product Designer

Skills & Tools

Prototyping (Figma, Storybook)
User Surveys (Maze)

Project Background

How It Started

As the second portfolio item from the same project I'll let you check out the full project background if you're interested. The short version is that as a product designer my product is the NFHS Network, the largest high school sports/event streaming platform in the nation. They acquired the product and my job was to bring it into this century.

That being the case the starting point for this project was a bit different than most I've had in the past. There was a functional product in place with a "design" but it was being completely rebuilt (moving to React from Vue) and said design was not even based on the brand. I'm pretty sure it was a canned UI theme from somewhere. Fortunately for me it took a two minute conversation for everybody to be onboard with starting from scratch and building out a design system.

What We'll Cover

Design systems are big - don't rush them

Typography

Colors

Spacing

Atoms

Components

Skipping the "From Scratch" Part

Utilizing the Carbon Design System

I could probably conjure up a good paragraph or two about why we chose the Carbon Design System - and don't get me wrong, it is a great system and it covers a ton of ground while being extremely flexible and extendable. It covers all the UI needs and doesn't get so granular that it solves problems that nobody ever has. Having built my own system from scratch before - it saved a ton of time getting up to speed quickly.

Perhaps most importantly - my Director of UX used to work at IBM and helped build the system 😉

Typography: Not Just Pretty Fonts

In my experience if you have a solid base with typography and color you can make just about anything work for you and this project was no different. We wanted something clean and simple and had a few things we knew we had to deal with for picking our fonts for this project.

Headings

Now here's the part where you can't just pick pretty fonts. Function over form came into play when selecting this header font for a very simple reason: some of these schools and tournaments have ridiculously long names. Think "Colorado Southwestern Polytechnic School for Boys vs. St. Thomas Aquinas School of Destiny" and they are playing in the "2025 Army National Guard Hoopball Boys Invitational for Cancer Research" (that is an actual tournament name).  

Condensed to the Rescue

The fancy term for how much horizontal space a font takes up is set-width and we needed the set-width to be as small as possible. With the lengthy names we were dealing with this was going to be the best way to keep overflow and multiple-line titles to a minimum. We narrowed it down to several options that the design team all agreed on then did the fun thing and had the company vote in a Slack poll! Naturally this ended in the top two basically being tied and one of those was my favorite so the decision was made. Drum roll please...

The fancy term for how much horizontal space a font takes up is set-width and we needed the set-width to be as small as possible. With the lengthy names we were dealing with this was going to be the best way to keep overflow and multiple-line titles to a minimum. We narrowed it down to several options that the design team all agreed on then did the fun thing and had the company vote in a Slack poll! Naturally this ended in the top two basically being tied and one of those was my favorite so the decision was made. Drum roll please...

With narrow proportions and a generous x-height, we drew a space-saving workhorse that would work well in very diverse environments: from large to small, for display and immersive reading.

Lettersoup (Font Foundry)

Body

Roboto. It's Roboto. I know it's boring and "uncool" but it's safe and used throughout our other products.

Getting Colorful

The System
So the Carbon Design System comes fully stocked with a HUGE color palette to work with. It covers backgrounds, text, buttons, tags, the works. However, having come from a system that was utilizing variables in Figma (tokens at the time) I knew how great they were to work with - especially with the engineering team. We decided since we had saved time using Carbon to start with that we could spend a little time reworking the color system.
Base Colors
Our "base colors" are just that. They are the variables that both design and dev use to communicate the actual rgb/rgba/hex/etc. value and get used to set other tokens or color modes. These never actually get used in our components or designs (at least that's the goal!)
Color Modes
For actually applying colors to designs, we use the use-case based "color modes". There are common elements in there like buttons, text, surfaces, etc. We also extended our colors to include our taxonomy colors for the type of stream, sports, school types, etc.

Using our colors like this allows us to expand categories and classifications individually while staying true to our starting color palette. This keeps our components as flexible as possible while maintaining consistency.
Our "Brand Blue" base color set
Color Modes - the specific use cases of the Base Colors

Spacing

We used a Base 8 system for several reasons:
  • It's the standard
  • Effortlessly creates vertical rhythm
  • Familiarity everywhere
Back to Variables
I'm not gonna bore you with repetition here - we used the same Base and Mode model for variables for spacing as well. One thing of note is that because of how often we used our 4px padding (and 2px on mobile), we converted our variable scaling to be Base 4.
Our "Brand Blue" base color set

Screens