Plasma design system

Creating and documenting a product design system

Andrew Couldwell
Jan 25, 2017 · 13 min read

This case study aims to chronicle how we created a design system at WeWork. I’ll share insight into our process, product design, the tools we used to create and implement the system, and also how we document and share the system with our team.

An example UI from one of our products using the Plasma design system

Introduction

Plasma as a concept was founded by one of our digital creative leads, Nick Stamas. Nick introduced our engineers to the concept of building a system in React JS and Sass, and has since lead the build of the system. I lead its design, creative direction and documentation. I also work with product designer Deena Edwards, who applies Plasma to our products.


Step 1: Design exploration

Sketch artboards showing initial explorations

It’s important to note: The design direction of this system was influenced greatly by WeWork’s digital brand guidelines, known as the WeWork Digital Foundations. You can read more about these here.


Simple, clear and clean

Colour theory

A typeface to match

Designing all states. A glimpse of our master Sketch file for the Plasma design system

Product design

It is vital to create a design system using products it will be applied to, with real data and problems.

Our goal here is not to create the prettiest system, it’s to design a system that best meets our needs—business needs in Plasma’s case, but customer needs for some systems. We do of course set out to create delightful products, but only to enhance the user experience (UX).

Below is a little insight into the three products that shaped the system:

Product 1: CMS (aka ‘Maggie’)

Samples from the CMS product with the Plasma design system applied to it

Product 2: Spacestation

Sample, concept UI from the Spacestation product with the Plasma design system applied to it

Product 3: Data Query

Design explorations for a data product, using the Plasma design system. All data shown is made up for public presentation!

Step 2: Patterns and components

Our system is made up of foundational elements like defined text styles for headers and content, a colour palette, what we call patterns and components, and templates.

Consistent UI patterns and components make a huge difference in guiding a user through a product.

Patterns

Components

The design system (and assets for the documentation) in progress in Sketch

Follow this link for a quick tour of the master Sketch file (seen above) containing all the patterns and components for the design system.


Best tool for the job

On responsiveness

Responsive design in Sketch

Read this article for an introduction to responsive design in Sketch.


Step 3: The power of a template

It’s easy for a product’s design to go astray if our team can’t simply apply the system in their work.

We have a master (forever work-in-progress) Sketch file for all of Plasma. The last thing we want is people working from this master file, accidentally editing or deleting things! So we created a Sketch template for our team to use, hosted on Dropbox. The template has a wide array of editable symbols, all the text styles, brand colours, and a basic artboard ready to go — making it easy to quickly get set up and assemble a UI using Plasma.

Working with established patterns and components frees us to focus on user experience, problem solving, and building meaningful features and products.

Covering all scenarios

All states of form inputs, buttons etc. are accounted for in symbols (in Sketch)

Craft Library

Update (Dec 2017): We now use Sketch Libraries, in place of Craft Library. It does more or less the same thing, only far more efficiently! Any changes you make to the master Sketch file for the library, syncs to any designs using the library components. Very cool.

Having a preset library of buttons, inputs, styles, etc. reduces the risk of elements being repeatedly redesigned.

Craft Library at work in Sketch. This is a glimpse of our master Sketch file for Plasma.

Step 4: Documenting a design system

Literally documenting the design system was the biggest challenge for me on this project. Normally I create annotated specs — typically these are a series of .psd or .sketch files, to accompany the design(s). A good example of this approach can be seen in my case study for Adobe Portfolio. While specs can contain every detail imaginable, things can still be missed or misunderstood when a new or replacement designer steps into your shoes. We wanted to do better with Plasma!

How do you document a design system?

Here is a useful list of links to all the online design system documentation of note I found. I hope it helps :)

My initial goal, having seen so many stellar examples online, was to create a website to document the system, specs, showcase example uses, and specify guidelines for all patterns and components. It would act as a quick reference, or a bible to study in detail.

However, I didn’t want to be held back by the design, build and time constraints of creating a website for this. So to get started I simply created a new Google Doc and started typing. As the document grew I realised it did exactly what we needed it to — the only reason to create a public, branded website for this would be as a ‘pride project’ for WeWork Digital, or as a resource if we open-source the system.

But for now, Google Docs proved to be the perfect medium! It’s easily accessible by all our team, plus they can comment inline, which is great for feedback. The ‘Document Outline’ feature of Google Docs, plus the ability to link/anchor to bookmarks and headings within the document, provided ample navigation. Jobs a good’un! …as we say in the North of England :)

Preview of our documentation

Plasma design system documentation in a Google Document

Update: December 2017

View the Plasma design system documentation 📒


Behind the scenes (download)


Step 5: Engineering a design system

We use GitHub to communicate components to be built

Design and code

Naming conventions

It’s all taking shape nicely.


This is not the end

I hope you enjoyed this case study, an insight into our design process, the tools we use, and a preview of Plasma! :)

Leave [a product] on a positive, friendly note :)

Special thanks to Nick Stamas and Deena Edwards at WeWork for their hard work and support on this project. And ‘my editor’ Meagan Fisher!

P.S. You don’t create a product design system like this by jumping straight into Sketch. A lot of work built up to us getting to this stage. My co-lead on this project Nick Stamas wrote about this process in: “Selling a design system at your company”, which I recommend you read next.

Update: 2019. I wrote a book about system design and digital brand guidelines! https://designsystemfoundations.com

Owl Studios

We’re designers who code. We take on projects of all sizes, from web design and build, to product, branding and system design. http://owlstudios.co

Andrew Couldwell

Written by

Web designer & developer • Portfolio at: https://roomfive.net

Owl Studios

We’re designers who code. We take on projects of all sizes, from web design and build, to product, branding and system design. http://owlstudios.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade