Building and scaling a design system


From building a design system from scratch, to scaling it, to building systems beyond UI - design ops.




1. 

Design System, CMS and page cloner





My role


As a sole designer on the acquisition team, working with Engineers, Engineer Manager, Marketing Programs Manager, I advocated for design, scoped out projects and drove discussions. I worked on a design system from scratch while establishing internal tools such as CMS and page cloner. 

How it all began


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.

JTBDs
  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.


Goals


  1. Shorten EPD cycles
  2. Provide autonomy for XFN teams


Solutions


  1. Establish and implement a design system
    • Breakpoints
    • Page structure, modules and responsive design
    • UI patterns - iterate often and find a scalable pattern
  2. Design an internal tool - Content Management System (CMS) to provide autonomy for XFN teams and design team
    • The UX of CMS - Do we need a live editor?
    • How to provide flexibility in the CMS?
  3. Migrate web pages to the CMS for better and easier management
    • We have around 100 web pages and 40 templates
    • How to roll out new brand across the site?

Learnings


  1. 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.
  2. Later on, we found out that a live editor would take too long to build and won’t necessarily increase EPD efficiency. We found a better solution that is to build a page cloner - a tool for teammates to duplicate any existing web pages.
  3. We learned to identify premature optimization. Not every web pages are suitable for using a standardized and robust CMS. For instance, an ad-hoc conference page should be designed in a way that requires shorter engineering time by providing less flexibility in the CMS. We only provide content fields instead of robust layout options.

If you want to learn more, I wrote a Medium article detailing more about building a design system from scratch.





2.

Scaling the design system





Problems


  1. Segment has multiple sub-brands for our products. Each sub-brand shares the similar visual languages but with different set of color palette. As we designed the CMS, we wondered if we could provide the flexibility for team members to re-use a template and apply a different “sub-brand skin” to it?
  2. Teammates wanted to quickly re-use a page template but they wanted a different design. So those two pages won’t look “exactly the same.”
  3. How can we scale when it’s time for the re-brand that we’ve been talking about for several months?


Solutions


  1. Build theming within our design system. Assign a set of standardized attributes to modules. For instance, we use light, medium and dark.
  2. Define module theming within a page theme.
  3. Provide a library of backgrounds for each page theme, so teammates can re-use a template but apply different designs to it










Results and Learnings


  1. Other than colors, we extracted typography, font sizes and a lot of CSS rules to theming level as well.
  2. With a set of standardized attributes, we were able to accelerate design process.
  3. There are different approaches to achieve a similar result or effect. We chose the most efficient solution after evaluating our time and resources.



3.

Beyond designing UI systems - Design ops



Goal


To align XFN stakeholders to minimize design revisions and miscommunications

Approaches


Establishing preliminary processes from organizing folder structure, to organizing JIRA board to refining QA process

  1. Defining a source of truth for almost everything, where to look for projects/tasks? where to find design assets and files? Which spec is most up to date?
    • We started to use Asana for all of design projects, however, in order to make the process within EPD streamlined, we changed to JIRA board eventually.
    • We then optimized JIRA board to match our workflow and grouped them as have to-do, in progress, QA, ready to release and done
  2. Optimizing QA process and building trust with teammates.
    • Building an open culture where teammates feel comfirtable to raise questions and flag issues. Open for feedback and always make time for each other to fix/build something together. 
    • Having the process outlined clearly in a doc which can be shared with project DRIs so they know when to schedule what for an effective collaboration and an ideal outcome.
    • Be an accountable partner/collaborator. Deliver as promised. If not, flag early so teammates are aware of it and can potentially help unblock problems.
  3. Alignment on clear goals, success metrics, project scoping and prioritization
  4. Team alignment meetings at different stages of product / design process.












© Qiao Huang. ALL RIGHTS RESERVED