<<<<<<

WHO DIS?

DAVID KING

<<<

WHO?

DAVID KING

<<<<<<

WHO DIS?

DAVID KING

<<<

WHO?

DAVID KING

A system of principles, variables and components to create cohesive user experiences across teams.

A system of principles, variables and components to create cohesive user experiences across teams.

MY ROLE

System Designer

System Amin

MY ROLE

System Designer

System Amin

PROJECT DATE

2023 - 2024

PROJECT DATE

2023 - 2024

COMPANY

Rivalry

COMPANY

Rivalry

A design system should accelerate your team, never impede.

A design system should accelerate your team, never impede.

Over my 5 years at Rivalry, we saw massive growth in both our product and our team. What started as a single team grew to 6, all working simultaneously on different parts of the platform.


With rapid growth like this, maintaining product consistency and quality across teams became a challenge, and a simple shared component library no longer did the job. I set out to build a new system that would ensure both consistent and efficient work across our design and development teams.

Over my 5 years at Rivalry, we saw massive growth in both our product and our team. What started as a single team grew to 6, all working simultaneously on different parts of the platform.


With rapid growth like this, maintaining product consistency and quality across teams became a challenge, and a simple shared component library no longer did the job. I set out to build a new system that would ensure both consistent and efficient work across our design and development teams.

The key to a good system is sizing and planning.

Overdesigning a system can be as detrimental to your workflows as under designing it. A bloated system becomes a burden to maintain, crushing your velocity. An underdeveloped system can leave gaps that lead to undesirable branching of design patterns.

Our system was lean but organized. It was built to give designers tools to rapidly build simple consistent interaction, allowing them to focus their creativity energy on more complex problems.

The key to a good system is sizing and planning.


Overdesigning a system can be as detrimental to your workflows as under designing it. A bloated system becomes a burden to maintain, crushing your velocity. An underdeveloped system can leave gaps that lead to undesirable branching of design patterns.

Our system was lean but organized. It was built to give designers tools to rapidly build simple consistent interaction, allowing them to focus their creativity energy on more complex problems.

The power of variables

The power of variables

We created a 3 level variable system that we unified across our Figma, Adobe and css libraries. This ensured that all designers and developers were working off the same values, and gave us easy way to cascade changes down the levels unilaterally without breaking the whole thing.

We created a 3 level variable system that we unified across our Figma, Adobe and css libraries. This ensured that all designers and developers were working off the same values, and gave us easy way to cascade changes down the levels unilaterally without breaking the whole thing.

LEVEL 1

Primitive Variables

All base values that are included anywhere in the system. These values are the basic building blocks and should be restricted to the system admin.


Examples

green/500

fontsize/24pt

spacing/16px

LEVEL 2

Semantic Variables

These variables describe their intended use. The value references a primitive variable. They form the primary palette of values used in day to day design and development.

Examples

colour/success

text/header2

padding/tight

LEVEL 3

Component Variables

Variables specific to an individual component's properties. The value references a semantic variable.


Examples

model/style/confirm

model/text/title

model/size/mobile

Colour System

Rivalry's colour system was particularly unique. We offered a plethora of different esports (and sports) content, and each individual user held interest in only a few. To build a quick visual association, each esport had its own icon and colour that would cascade through all components related to it. This allowed users to quickly scan large amounts of content and pick out pieces that interested them.

Through our system the designer or developer could simply select a specific esport and all the components properties would instantly adapt.

Colour System


Rivalry's colour system was particularly unique. We offered a plethora of different esports (and sports) content, and each individual user held interest in only a few. To build a quick visual association, each esport had its own icon and colour that would cascade through all components related to it. This allowed users to quickly scan large amounts of content and pick out pieces that interested them.

Through our system the designer or developer could simply select a specific esport and all the components properties would instantly adapt.

Systems Integration

Systems Integration

A design system works well when your designers use it, but it really rips when its integrated into your front end code base. We created a custom Figma plugin to publish design variables and styles into Storybook. Changes to the system didn't just update our design files, they could be pushed right into the front end code base.


Supernova acted as the bridge and documentation hub. We could publish system changes and additions directly into Supernova, then add documentation for each component to help keep everything clear and organized.

BACK TO THE STUFF


<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


LEARN ABOUT ME OR HMU

BACK TO THE STUFF


<<<<<<<<<<<<<<<<<<<<<<<<<<


LEARN ABOUT ME OR HMU