Designing, documenting and establishing a design system

Project

One of the founding principles of WeWork's Digital Foundations, which I had established prior to this project, was they would lay the groundwork to build on-brand and consistent products and design systems that embody the companies digital brand guidelines. This, the Rivendell design system was that evolution — a responsive web design system.

Process

I started out building a website for the Digital Foundations documentation, as a proof of concept  —  a visual evolution of our digital brand guidelines. I designed an initial concept in Sketch before exploring further, designing in the browser. Somewhat opportunely, an enterprise project came up around this time, codenamed ‘Project Rivendell’, which was the perfect test to push the new system further  —  and so the design system inherited its name: Rivendell. From there, other web-based marketing products iteratively inherited this new system  —  all further stress-testing and improving upon the system.

For more depth, I wrote more about how this design system, Plasma and the Digital Foundations were created, in this article.

Link

http://rivendell-docs.netlify.com

Involvement

System design lead
Creative director

Client

WeWork

Date

2017

Credits

Brannon Wellington — Web designer
Amelia Lewis — Web designer

WeWork Digital Foundations

A website designed and built as a proof of concept for the new design system — a visual evolution of our brand guidelines, I called the 'Digital Foundations'. An initial concept was designed in Sketch before being explored further, designing in the browser, responsively.

Article coming soon! ;)

Component library in Sketch

I wrote a tutorial article sharing the process and technique I used to design all the Rivendell system components. It centers around nested symbols. It’s particularly powerful for system design but absolutely applicable to any and all web and product design. The article also links to a Sketch file download to really dig into how it works.

Read my tutorial

This technique for setting up your Sketch files is a game changer if you want efficiency and consistency in your designs.

Veerle Pieters

Documentation

Google Docs provided the perfect medium for the network of documentation this design system required. The ease and speed of setup, content management, headers, bookmarks, linking and document outline allow the documents to navigate like websites. Ultimately, some months later I created a website for the documentation

The future

With every new project, we further stress-test, learn and improve upon the design system. WeWork's core marketing website (wework.com) is the next product to iteratively inherit this new system. Work has begun to design new patterns with the Rivendell foundations and components, to be iteratively released late in 2017 and early 2018. Seen throughout this case study is a preview of what's to come!

Mockups and pattern specs

Below are samples of responsive designs at the 4 defined system breakpoints for various system patterns. Each pattern is designed and stress-tested in real product scenarios using live content.

Modular design

The patterns are designed as modules that can be combined in any order to build a web page. These patterns are built into our content management systems enabling our business teams to quickly spin up and populate new web pages for marketing campaigns, SEO landing pages, or to promote new business initiatives.

Respsonsive design

The patterns are all responsive, designed to take as little or as much content as possible, capable of filling any space needed of them, to fulfill any number of content requirements and layouts.

Plans prioritised for build

Above: I ranked the new patterns by their impact on user experience, their disruption to other patterns and projects in our roadmap, and our key business metrics — prioritising what the team should focus on building first.

Visual audits

Above: One of many visual audits — one for each new pattern, and every page on the website. Iteratively identifying what existing content to replace with which new pattern. Each linking out documentation, responsive designs for the pattern, interaction studies, and a Sketch file with a before and after design, as seen below.

Ready for build

Ultimately I handed off a prioritised plan for building all the foundational elements, components and patterns, along with a network of interlinking design system documentation, mockups and assets you see throughout this case study — setting up a team of product managers and engineers for success, rebuilding the website with the Rivendell design system.