Leading the creation of DOKU’s first design system — from user research and component definition, all the way to designing UI in Figma, writing the SCSS/Angular component library, shipping it via CDN, and building the documentation portal. Not just pixels — shipped code.
THE PROBLEM
20+ products, zero shared language
DOKU had over 20 products, but every design was created in isolation — custom solutions for individual problems, often drifting away from the company’s own brand identity. We discovered this when we conducted a visual audit across every product in design and in production.
🎯 The Strategy & Research
We didn’t just want to build a component library; we wanted to build a tool that our engineers and product managers actually wanted to use.
Stakeholder Interviews: I conducted remote interviews with over 5 internal stakeholders, including senior engineers and Product Managers. We discovered that PMs needed fully constructed page templates, while engineers desperately needed a reliable front-end framework to make implementation seamless.
Competitive Analysis: To understand common mental models, I audited industry-leading systems, including Microsoft Fluent, Shopify Polaris, Atlassian, and Material Design.
We did the interview remote due to WFH policy from the company since march 2020 as the impact of the Covid-19 outbreak. In interview section, as one of the interviewers. I tried explore deeper about:
Their experiences and behaviors while developing product
Their experience and understand when they want to implement product design into code
Understanding their pain points of design implementation
Understanding their (product manager) pain points of create page UI design
🛠 Building the System (Execution)
Acting as the lead architect alongside a team of three other UI/UX designers, I guided the system from auditing to production.
The UI Audit & Foundation: I began by using Chrome CSS overview tools to audit all existing web-based DOKU products, identifying severe deviations from our brand guidelines. I then collaborated closely with the Marketing and Branding teams to establish foundational design tokens (typography, color, shape, and logo usage).
Figma UI Repository: Utilizing Brad Frost’s Atomic Design principles, I architected a highly modular Figma library. Leveraging variants and nested components, we built a robust repository consisting of 25 core components, 3 complex molecules, 5 page templates, and 5 email templates.
Bridging Design & Engineering: Because our engineering team heavily indexed on back-end expertise, I took an active role in the implementation. We developed the components using an Angular and Bootstrap-based framework, focusing heavily on SCSS to ensure easy long-term maintenance.
Documentation: I developed a dedicated documentation portal providing clear guidelines, implementation code, and usage rules for both designers and engineers.
📈 The Impact & ROI
The design system (currently on version 1.0.5) fundamentally transformed how digital products are built at DOKU:
Engineering Velocity: In a November 2021 survey, 25 engineers reported that the system significantly improved their workflow and implementation speed.
Increased Product Value: By eliminating the need to repeatedly design basic UI elements, our design team reclaimed massive amounts of time, allowing us to pivot our focus toward deep product discovery and UX strategy.
A Unified Brand: The DOKU ecosystem finally looks and functions as a cohesive family of products, elevating trust and consistency for our users.
💡 Key Learnings & Next Steps
Building a design system is a living, breathing process. While the initial launch was a massive success, managing the system via a CDN as a single maintainer highlighted the need for package managers (like npm) and dedicated front-end engineering resources. Tracking versioning across 24+ evolving components taught me invaluable lessons about governance, continuous deployment, and scaling design infrastructure.
Add an overline
Add a compelling title for your section to engage your audience.
Use this space to add a medium length description. Be brief and give enough information to earn their attention.
Use this paragraph section to get your website visitors to know you. Consider writing about you or your organization, the products or services you offer, or why you exist. Keep a consistent communication style.
