Re-imagining our Design System
As a product designer who nerds out on systems thinking, the best project I could imagine to work on is the design system that powers all of the products a company has to offer. The impact and the magnitude of satisfaction that come with this task are beyond rewarding. This is one of the reasons that I joined Segment — at the time I joined, there was already an established, powerful, and flexible design system called Evergreen. I was thrilled to have the opportunity to take this existing system and help it evolve.
Evergreen, a design system brought you by Segment
Evergreen is the design system created and used by Segment for product development. It is also an open-source project on Github that everyone can use and contribute to. The system consists of internal and external code repositories, public-facing documentation, and corresponding design files. It was created by Jeroen Ransijn, a talented designer + product engineer.
Like many cool kids out there, they built Evergreen based on the atomic design model. The model explains that the foundation of a design system includes atomic styles and components. Evergreen contains most of these fundamental components along with some more advanced compositions, which atomic design refers to as molecules and organisms. These components are the building blocks for what powers the Segment app today.
That’s great. So what happened?
Well, like many startups, we lacked a dedicated team at Segment that owns and maintains this system. I started to lose track of the times when questions like “do we have patterns for X interaction or Y page style?” showed up in different channels repeatedly. Our product started to accumulate more inconsistencies, resulting in teams being slowed down because they had to re-invent the wheel over and over again.
As our teams and products evolve, Evergreen as the foundation of our products needs to expand its flexibility to support more use cases, provide better guardrails on usage guidelines, and up-level the look and feel to have strong branding in the competitive landscape.
Treat your design system project as a never-ending design challenge.
It’s time to refuel the machine!
State of the world
To understand where we currently stand and quantify the pain that the team was experiencing, we sent out surveys to our design and product engineering teams asking how they would rate our design consistency and satisfaction with using the current systems.
Not surprisingly, we found that the consistency scored low (2.1/5), and the satisfaction of usage guidelines and pattern coverage was also not where we want it to be (2.3/5).
We asked what people liked and disliked about Evergreen, and found that:
- The current system covers 80% of the basic use cases, and the components are easy to find on our website.
- However, the guidelines we provided on component-level were not comprehensive (e.g. should a page header be H1, 2, 3, 4, …. 9?)
- Teams are also looking for guidance on how to compose components into more complex patterns or page templates.
- Outdated visual styles (e.g. gradients in buttons)
A lot to be fixed, but now we have a set of metrics that we are able to move, and a bunch of pain points that we can point to when prioritizing projects.
Turn your pain into power
Using the above data, we hosted a brainstorming session with a small group of design system enthusiasts from engineering and design. The goal was to dream up ideas and projects that would eventually turn into a roadmap document, then start to socialize it with the broader group.
Based on the output of this exercise, the team decided to focus on:
- Documenting strong usage guidelines for all components and patterns
- Providing a clear process for how teams can contribute to Evergreen
- Up-leveling visual styles to create a delightful and cohesive product experience
We recognized that one of the best ways to foster excitement and buy-in from stakeholders is to show what the future could look like. If a picture is worth a thousand words, what if we have nine?
Nine thousand pictures
At that time, Segment was conducting a rebranding initiative for our marketing site. Since our goal was to redesign our product design system, we found this to be a tremendous opportunity to draw alignment between brand and product. Customers should, after all, experience a consistent end-to-end experience from Segment’s public site to the product.
We decided to host a design exercise with the nine talented designers on the team. Each designer would pick a Segment product page and redesign it to see what our product experience could look like in this whole new world. We provided the team with inspiration from some of the best-in-class B2B companies who do this well (Stripe, Mailchimp, Shopify, etc.), along with the new branding assets (color palette, typography, marketing materials) as input to the redesign. The experiences for the websites and the product do not need to be exactly the same, but they should look and feel the same.
The results were mind-blowing.
The team came up with nine distinct, beautiful variations for how a new design system could look. In the Segment app, we currently use a lot of card and table components, so it was refreshing to see explorations without this card-heavy layout. Some played with bolded text header and color contrast to communicate better visual hierarchy. And oh my do we love tables — so many table variations.
We had each designer present their work and collected feedback from each other, then shared the results with the broader organization for feedback.
So… what now?
We are sufficiently fired up! The team and entire org are now excited about what the future could look like. But how do we get there?
To recap, we started the project by understanding the pain points and learned that the team was looking for a set of clear and well-documented guidelines for our component and pattern usage, as well as a consistent visual style that represents Segment’s identity across the board.
As we crowd-sourced the ideas of what the future could look like, we started to see common themes and divergent opinions among those explorations. For example,
- a general agreement that the color for our primary buttons should not be green (or any color that has strong intention) since green indicates success
- diverse opinions on keeping or deprecating card layout
- quite a few options for how the table component should look, the way information is laid out, and the interaction patterns it supports
The next steps are to:
- extract from the raw material and come up with a set of new components
- stress-test this new proposal with the team once again
In order for us to have a common ground to discuss and consolidate, we are missing a core part of the design system — design principles. With a solid set of design principles that are shared across the teams, we can form strong opinions on tradeoffs and decisions we want to make when designing this whole new world.
Next up, a design principle exercise. Stay tuned!
Special thanks to Kate Butterfield and Hareem Mannan for editing and all the support!
