Designing and documenting a design system for WeWork’s internal business tools

Project

Plasma is a design system for WeWork's internal business tools, used to manage the company's global network of buildings and community of members. It was my job to design and creatively direct the creation and documentation of the design system.

Process

I started out experimenting with three different internal products that the system would be applied to, discovering, establishing, and stress-testing a style and library of components and patterns. Later in the process, I created an adaptive/responsive library of UI components, synced and made available to a team of designers via Sketch Library. This allowed the team of product designers to quickly construct UIs and flows using consistent pre-made, editable, and flexible Sketch symbols, so they could focus on UX, and not re-designing the product over and over.

Every detail of the system's design was documented, initially (for speed) using Google Docs so it was easily accessible by the team, and later developed into a website. And the implementation/development of the system was tracked via GitHub between myself and the engineering lead, built using React JS and Sass, including integrating CSS/Sass I had written while designing and documenting the system components.

Below is a taster of the design system and the Sketch Library of components. Read a more in-depth design case study about this project here.

Involvement

System design lead
Lead product designer
Creative director

Client

WeWork

Date

2016

Credits

Nick Stamas — Engineering lead
Deena Edwards — Product designer

Sketch preview

This gif is a quick tour of the Sketch file containing all the patterns and components for the design system.

Originally shared on Dribbble >

Responsive design

While it’s simple to build responsive components, it’s not so simple to mockup designs responsively, which is something I actively encouraged the design team to do. To aid this work, all components in Sketch were created to be responsive. While this won’t help with breakpoints, it is powerful for quickly seeing how or if the design works at different browser sizes.

Login screen

Example login screen for a CMS product (called 'Maggie' in-house) using the Plasma design system. The welcoming, helpful language is part of the system — brand and tone of voice are an integral part of the design system. This CMS product deals with international markets and buildings, hence the crop of the Flatiron building (in NYC), but the idea is to have random, curated images of iconic architecture from other cities WeWork operates in globally.

Data table with filters

An example UI using the system. The design is simple and clean. The system is predominantly white, black and gray. It’s important the design doesn’t distract from the content, so subtlety is key. Brighter colours are used to convey meaning (e.g. yellow is used for primary actions, since yellow is one of WeWork’s core brand colours, and blue is for navigational links etc).

See more in the design case study article about this project.