I started everything as a side project. I scraped time whenever possible for research and Figma experimentation. Once I had collected enough best practices and come up with a rough plan, I invited a front-end developer to join me. We completed some initial work during a cooldown cycle and finally gathered enough buy-in to obtain dedicated time each cycle to build the system.

(And yes, we did not build everything in one go)

• Find time to commit to it.
• Be past compatible and future-proof. Building a design system for a live product requires migration strategies.
• Support extensive lists of devices (Desktop, Tablet, iOS and Android Phones, Zebra Devices)
• Address legacy issues and improve content quality and accessibility.
• Be real: Only build what we need and what we can maintain so we could divert energy to areas that really mattered to our team.

Breaking up the project into actionable chunks seemed like the only way we could tackle this. The Atomic design method proved to be a real help as well:
‍

Step 1:  We started by refining text styles, colors, icons, spacings, and layer styles. We set up rules to only use the new system in new designs files to minimize future rework. Despite delays in progressing to the next stage, the foundational updates alone improved our design quality significantly.

Step 2:  We then progressed to building out molecules, following the same principle of using the new system right away. We ignored the old files at this stage (despite how uncomfortable it made us).

Step 3:  At last, we move on to the organisms. We allocated dedicated time each cycle to develop these components incrementally. Little by little, we replace the old components with new ones using the Master plugin (lifesaver, truly).

Looking back, the key to success here was utilizing the system as we built it. We got to see and benefit from the value of the system from day one, and that kept us going. Throughout my years, I've seen countless initiatives die while waiting for the perfect moment. Messy is not perfect, but messy is life.

Forget about what Google or IBM were doing, the system should be ours. It should solve problems that WE were having. For example:
‍

• We developed a checklist template that could be added to each file to ensure every design we released is accessible, user-friendly, and thoroughly implemented.

• We also created this accessibility status system to represent the states of the accessibility evaluation. This turned out to be a huge help in a legacy design audit later on.

Not just an UI library‍
‍A big difference between a design system and a Sketch or Figma library is that a system defines an experience but a library is usually only about visuals. Tones to write content and ways to display information are essential parts of a cohesive across-device experience. “Your account” or “My account” both works but mixing with the two? Probably not.

All components were built in Figma with Flex Layout. We kept all necessary explanation and interaction settings in Figma. The index, the content guidelines, and principles were in Notion for better readability.  

Reflecting on this journey, I've grown as a product owner and a project leader. I'm proud of taking initiative and persistently driving the project forward, even during challenging times. Here are a few key lessons I've learned:

• Do not be afraid of the size of the project: Breaking tasks into manageable chunks and chipping away at them little by little is always better than procrastinating.
• Showing value in action is the best way to gain buy-in: A line of result is worth a thousand words.
• Do not let perfectionism ruin momentum: Being in agile, embrace agile.

The design system turned out to be a huge success, introducing improvements in:

• Content quality
• Usability
• Accessibility
• Design efficiency
• Dev-Design collaboration

And the sun just shines a little brighter when your page are filled with worry-free components and mind-reading auto-layouts. ;)