Design System

A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product

A Design System is a product which is going to help the actors of a project build other products

a Design System is a set of deliverables

• Tools for designers & developers, patterns, components, guidelines…
• But also abstract elements such as brand values, shared ways of working, mindset, shared beliefs (which are often the most difficult thing to achieve)…

^ Pulled from here

What Is It?

1. Sketch library
2. Styleguide (think: Colors, fonts, illustrations)
3. Utliity / Pattern Library (think components: Buttons, pop ups, inputs)
4. Coding standards
5. Plus more...

Why Do We Need It?

• Help centralize material and maintain standards among a large team
• Consistency saves times, money and instils trust in our users

How Do We Implement It?

1. Figure out who will be using it

2. Align teams around shared goals

3. Decide if the product / system will be loose or strict.

(LOOSE = There if you choose to adopt / follow. STRICT = System adoption is manadatory)

4. Decide if the development of the system will be distributed or centrally managed.

(DISTRIBUTED = Many people be contributing - Better for overall adoption, but harder to manage. CENTRAL = Easier to manage, but system adoption is slower/more difficult).

Who Might Use it?

COPYWRITERS: to know how to talk 'design' / steps to take to get their vision conveyed to designers/marketers more easily. A repository of pre-approved legal stats/quotes to use.

MARKETERS: to ask project managers what they're needing

PUBLISHERS: To see what's in the works (pull in data from promo spreadsheet) and data from existing promos / pCodes (Trackasaurus data)

DEVELOPERS: to easily access dependents, common choice names/desc, wh/ browsers versions we support

PROJECT MANAGERS: to point people to correct versions of things, have some sort of 'source of truth' document/tool

EVERYONE: so they can grab logos, pub phone numbers / emails, pub colors, social media / commonly used images, data on promos, passwords for things we all share

Design System Examples:

IBM - Carbon Design System

Shopify - Polaris

Figma - Design System

RANDOM NOTES

• Once we have our production design system ironed out we could move to another dept. (e.g. marketing, copy writer, etc)

• This is a good time to think about an organized system since we're getting 2 new gurus soon, but do not have plans to hire anymore designers/devs