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 companies global network of buildings and community of members. It was my job to design, oversee and creatively direct the creation and documentation of the design system, named 'Plasma', working alongside the engineering lead, and designers responsible for the UX flows of the products the system would be applied to.

Process

This project kicked off my role as the System Design Lead on a newly formed 'Foundations' team at WeWork. Brand guidelines existed in the physical realm, but no systems or guidelines had been established for WeWork's digital products. I started out defining and establishing the 'digital foundations'. Part of this initiative was literally defining and documenting what a system is, what the benefits were, and what it's made up of, so everyone is on the same page, speaking the same language, from junior to senior designers, to product and engineering. These foundations paved the way for the Plasma design system to be created and thoroughly documented.

I started out experimenting with 3 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 via the Craft Library tool for Sketch. 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 using Google Docs so it's easily accessible by the team. 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 Craft Library of components being constructed for use in Sketch. 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 in Sketch

While it’s simple to build responsive components, it’s not so simple to mockup designs responsively. It’s important to design web UIs that work at different browser widths. Fortunately, using a combination of settings, groups and symbols, you can create a basic responsive UI in Sketch. While this won’t help you with breakpoints, it is powerful for quickly seeing how or if the design works at different browser sizes. Thus all component parts of the Plasma design system library are designed to be responsive, both literally as a live working system, and in Sketch.

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.