Building a Design System from Scratch

Qiao Huang
May 4, 2019 · 5 min read

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:

  1. there was no visual consistency in our existing website across different products, sub-brands, verticals, and more
  2. EPD (Engineering, Product and Design) teams usually spent at least 4 sprints to produce a single webpage
  3. 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:

  1. Marketing wanted to update copy on any existing page on our website themselves, without having to be reliant on EPD cycles.
  2. 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 . 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.

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

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 , brand patterns, animation…
Example of typography guideline
Example of typography patterns
Example of card patterns

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

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

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://atlassian.design/

https://polaris.shopify.com/

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.

Segment Design

Empowering every team with good data.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store