Design System, CMS and page cloner
The beginning and Challenges
As a sole designer on the acquisition team, working with Engineers, Engineer Manager, Marketing Programs Manager, I have to advocate for design and drive discussions. There are multiple challenges along the way, namely:
- Building a design system from scratch while establishing an internal tool (CMS and page cloner)
- Establishing preliminary processes from organizing JIRA board to refining QA process
- Driving initiatives when opportunities came and finding baseline metrics and setting product vision
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.
- 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.
- Shorten EPD cycles
- Provide autonomy for XFN teams
- Establish and implement a design system
- Page structure, modules and responsive design
- UI patterns - iterate often and find a scalable pattern
- The UX of CMS - Do we need a live editor?
- How to provide flexibility in the CMS?
- We have around 100 web pages and 40 templates
- How to roll out new brand across the site?
- 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.
- 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.
- 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
- 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?
- 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.”
- How can we scale when it’s time for the re-brand that we’ve been talking about for several months?
- Build theming within our design system. Assign a set of standardized attributes to modules. For instance, we use light, medium and dark.
- Define module theming within a page theme.
- 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
- Other than colors, we extracted typography, font sizes and a lot of CSS rules to theming level as well.
- With a set of standardized attributes, we were able to accelerate design process.
- 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
- How to align XFN stakeholders to minimize design revisions and miscommunications?
- What to do when the results are not designers expected originally?
Establishing preliminary processes from organizing folder structure, to organizing JIRA board to refining QA process
- 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, eventually in order to make the process within EPD streamline, we changed to JIRA board.
- Optimizing JIRA board to match our workflow, we have to-do, in progress, QA, ready to release and done
- Building an open culture of easy communication. Open for feedback and always make myself available to sit with engineers and fix/build something together
- Having a process outlined clearly in a doc which can be shared with whoever drives a project and needs to know when to schedule what for an effective collaboration and an ideal outcome.
- Identify different flow of work stream and give an estimated time for a specific work stream. This allows our teammates to plan projects easier and not let yourself be burnt out.