Stargate Design System



Product Design, System Design

Created a flexible design system to unify the look and feel of Stargate, while creating reusable, scalable components for future development.





WeWork     2017

Lead Designer

Team: Design Director, Product Designer, 2 Front-end Engineers

Background


The visual design and UI components in Stargate were often custom built, resulting in inconsistencies across the platform. After a reskin in 2016, users also experienced usability issues with components like form fields and dropdowns.

Approach


We created a minimal, flexible system that could easily evolve with the changing nature of WeWork’s business. We updated components for better usability and standardized everything from modals to copy. On the front-end, we also updated and consolidated two legacy style guides.


01/


Selected Components

Intentionally Minimal


In the new system, we stripped away a lot of the color and original branding from Stargate’s 2016 reskin. We wanted the information and action buttons on pages to be extremely clear. We also removed the brand fonts, Apercu and Apercu Mono, in favor of the system default fonts to improve legibility (especially at small font sizes and in large data tables) and cut page load times.


Flexible Color System


As WeWork’s brand colors were rapidly evolving with the business, Stargate’s Style Guide needed an easy way to stay in sync. As a solution, we created a flexible color system based a few core color variables. We produced variations with the Sass lighten/darken function in 5-15% increments. This allowed for a simple change in the style guide that would cascade across our entire system.


New Standards and Improved Usability


While building Stargate’s Design System, we worked closely with Andrew Couldwell, Design Systems Lead, who had previously developed a Digital Foundations that outlined best practices, formatting, and accessibilty. We took this as an opportunity to update and standardize a lot of our copy, number formats, and usability for components like inputs and dropdowns.















02/


Documentation

In addition to the Sketch library for components, we created a 60+ page Google Doc that further described specifics about data formatting, interface states, component CSS, when and how to use certain components, and accessibility standards. This was accessible for anyone on Design, Product, and Engineering. The Design System was intended to be a work in progress, ever evolving and changing as its needed to.





Previous

(Stargate Navigation)

Next

(Open Studio Book)