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 and creatively direct the creation and documentation of the design system.
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 (http://plasma.guide). 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...
System design lead
Lead product designer
Nick Stamas — Engineering lead
Deena Edwards — Product designer
This gif is a quick tour of the Sketch file containing all the patterns and components for the design system. Originally shared on Dribbble >
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.
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.
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.