Design System, CMS and page cloner

My role

How it all began

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.

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.

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.

Beyond designing UI systems - Design ops

Goal

Approaches

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.