May 4, 2019
Building a Design System from Scratch
The beginning
Over a year ago, the brand design team and I were working on Segment’s marketing website, www.segment.com. We started to notice some trends in the lack of efficiency of our process. Namely, that:
- there was no visual consistency in our existing website across different products, sub-brands, verticals, and more
- EPD (Engineering, Product and Design) teams usually spent at least 4 sprints to produce a single webpage
- As the marketing team scaled — which this past year, it did a great deal — we got more and more web page requests, but we lacked both the resources and time to invest in actually seeing these pages through.
All of this led us to sit down with our marketing team to identify what some of the pain points and areas of opportunity for the website team were. We concluded our conversations with two main marketing jobs to be done:
- Marketing wanted to update copy on any existing page on our website themselves, without having to be reliant on EPD cycles.
- Marketing wanted to build pages using existing templates that were both dynamic and standard enough to serve their needs.
Identifying these needs informed our objective, which was ultimately to increase marketing autonomy while also increasing their efficiency. And what’s the best way to do that?
A design system, of course!
The state of things
At this point in time, Segment already had a design system, Evergreen, built for the Segment product. We had a choice to make. Did we make our lives easier by inheriting Evergreen as a design system? Or did we create something from scratch?
We thought about this long and hard, and realized that inheriting Evergreen would not be the right decision here. Evergreen is product-focused and doesn’t scale to marketing needs. For example, on the marketing website, we often need to use bigger font sizes and insert more brand essence in order to catch people’s eyes. We aim to tell a great story and leave powerful, lasting impressions in people’s minds.
On the other hand, Segment product is built for varying kinds of technical audiences, from individual developers to enterprises. The product interface needs to carry a lot more information and functionalities. Big font sizes and fancy effects would be too much in the Segment product. And most importantly, Evergreen is not responsive ready and not yet easy to be themed given how it was built. So, with that, we realized it was time — time to create a new design system.
PS. Of course, it wouldn’t be smart to reinvent the wheel given that Evergreen is already an awesome design system. Evergreen and many’s companies’ design systems are my learning resources (links will be provided in reference at the end). The new design system is built using Evergreen as a foundation.
Getting started
This was the hardest part of the process. Where do you even start when building a design system for a marketing website? We realized the best place to start was by auditing existing web page layouts, modules and components. Auditing helped us discover where the inconsistency are and what the common use cases that are must-haves are.
Taking cards for example, the corner radius and the border width were SO different across the site. We needed a guideline that consolidates the styles and defines when to use what. With the audit, I was able to categorize cards into three distinct styles and provide a wide range of card patterns.
After the audit, we broke the whole site down into following pieces:
- foundations, such as layout, breakpoints, typography…
- components, such as button, card, text input…
- patterns
- templates
- pages
- other features, such as theming, brand patterns, animation…
We also realized the solution didn’t end with a design system. In order to provide autonomy to the marketing team, we started moving content into Contentful, which is a CMS (content management system), and then building on top of the system by implementing a design system. By doing this, marketing could manage content in the content management system without worrying how design will get rendered on the website. They could do this knowing a design system was coming, especially because the design system would help us standardize how components would behave and how modules would respond on all screen sizes.
Later on, we extended the flexibility of the design system by adding some advanced features, such as module theming, page theming, design asset library and animation. We also built an internal tool called Page Cloner to allow marketing generate net new pages from pre-defined templates.
Learnings from building a design system
It’s an evolving work in progress
I didn’t aim to create ‘a perfect design system’ or the prettiest design system, because in the fast paced startup environment, everything is changing too rapidly. For instance, we’re undergoing a re-brand process right now. While I’m so stoked to see the new brand, I also understand that the whole digital design system will need to be evolved when the rebrand happens. When I was building the design system, the most important task was to build for scale; to make sure that the system is scalable enough to accommodate different scenarios. That’s why it always takes awhile and careful considerations before a component or a module can be built. It sounds scary, but it’s important to allow yourself to play and try out new patterns. Innovation and collaboration are the paths leading to a good design system.
Resources
https://www.carbondesignsystem.com/
https://medium.com/owl-studios/plasma-design-system-4d63fb6c1afc
Special thanks to Hareem Mannan for editing this piece, Segment CMS team and Segment Design.
