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.
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.
System design lead
Brannon Wellington — Web designer
Amelia Lewis — Web designer
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.
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.
This technique for setting up your Sketch files is a game changer if you want efficiency and consistency in your designs.Veerle Pieters
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
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!
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.
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.
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.
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.
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.
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.