Building on-brand, quality and consistent websites and digital products at scale is hard. It’s even harder when your designers and developers span different product teams, departments and locations. Success requires more than an assortment of PSDs, Sketch files, styleguides, a print brand book, pattern libraries, and whatever else your team claim to be working from. You need a source of truth. You need to lay strong foundations. Then use them to responsibly build great products and design systems.
At WeWork I pioneered what I called a ‘Foundations Initiative’ focussing on establishing their digital brand guidelines, design systems, and best practices. I documented our digital brand guidelines, calling them the 'Digital Foundations'. This documentation is used by WeWork's team of designers working on digital products, to strengthen existing products, and lay the groundwork for creating on-brand design systems. The first two design systems designed based on these Digital Foundations were Plasma and Rivendell.
Read a more in-depth design case study about this project here...
Front-end web development
2016 - 2017
The Digital Foundations started out as a Google Doc. An easily accessible and collaborative platform to share the documentation with a team of designers, engineers, and product managers. The headers, bookmarks and document outline feature means the Google Doc operates much like a website.
What the documentation finally evolved into, from the initial Google Doc. You can view it here.
The Google Doc serves its purpose very well, but I wanted to create something more visually engaging, and easier to deep-link to content and share with the team. Creating a website was also an exercise in design exploration — a visual evolution of the digital brand guidelines, which ultimately sprouted two design systems for different product types: Plasma for data-heavy internal business tools, and Rivendell for marketing websites and products. The Digital Foundations website is built using the Rivendell design system.
The following are samples from the responsive website for WeWork's Digital Foundations. For now, the website is private, to WeWork designers, but the long-term plan is for this to be public-facing.