Building Design System & its Libraries
Date: 10.2020 - 07.2023
My Role: Defined Contribution Processes, Leading a Design Workshop, Conducting Surveys, Onboarding, and Design Leadership
As the lead, I had an initiative to build design system, its process and its Figma libraries. When I started to build design system library, we overlooked design system library structure, naming, and category, although they are fundamental for our design system to grow in a scalable way. While building libraries, I became in charge of the overall structure and naming of the design system.
Figma libraries are the invisible backbone of our chapter designer’s daily delivery. Vodafone Germany has around 35 designers. All our designers are inserting more than 17,000 components within a week. Therefore, building libraries is the most essential process for design patterns to become aligned with code, spec, and design, to be coherent, and to be easy to evolve.
The Vision of the Design System
Evolve and Scale Design System
Standardize Design Language and Maintain Consistency across Multiple Different Products
Improve Designer’s Work Efficiency and Collaboration with Developers
Design System Strategy & Governance
Problem 1: Lack of Contribution Model
Action Established a formal end-to-end governance workflow (Kick-off to Approval) and stakeholder onboarding to transform the system from a static library into a collaborative ecosystem.
Problem 2: Fragmented Design Language
Action: Unified cross-functional silos through Naming Convention Workshops and a standardized Token/Component Architecture, ensuring a single source of truth for designers, editors, and engineers.
Problem 3: Process Inefficiency
Action: Scaled output quality by implementing Design Spec Templates and a mandatory Pattern Update Checklist, reducing handoff friction and structural technical debt.
Background: Global Libraries’ Structure
When I started this project, Vodafone Germany did not have any global libraries in Figma. Therefore, I planned how to build libraries effectively in a priority.
Designers work on different frameworks(styles). On the repository, we do not recommend to hold two different frameworks in principle. Of course, due to a product delivery, product teams have used a mixture between different styles, although it degrades web performance generally. Therefore, depending on their availability, feasibility and our recommendation as CoE, I divided our libraries into different frameworks and for purposes. As soon as I decided global library structure, I let other channels like pattern library and Brix portal aligned with figma library one.
Brix Design System Libraries
Brix is a Design system in Vodafone Germany. It is composed of WS2, and WS10 styles. I released the Brix library in the middle of 2022, its process, and guidelines through collaboration with developers and other designers.
The 1st Improvement
Design Systems Libraries Survey
During the initial phase of 2022, I conducted a comprehensive survey to identify opportunities for enhancing our libraries and addressing the challenges faced while updating and utilizing them. The feedback received regarding the Brix Library was highly positive, with an impressive 92 percent of participants acknowledging its invaluable contribution to their design endeavors. However, there remained areas that required further improvement. Building upon these valuable insights, I enhanced our library infrastructure.
Problem 1: Library Bloat & Redundancy
Action: Executed a global library audit, deprecating redundant local files to establish a lean, performant source of truth.
Problem 2: Governance & Update Fatigue
Action: Implemented Branching Workflows and restricted edit permissions, replacing disruptive "Global Toast" updates with a secure, reviewer-led deployment model.
Problem 3: Architecture Confusion (Brix Library)
Action: Architected a Multi-Tier Library System (WS2 vs. WS10), segmenting patterns by use case to eliminate implementation ambiguity.
Problem 4: Friction in Contribution & Onboarding
Action: Restructured library documentation and launched System Coaching, optimizing the contributor experience for faster pattern adoption.
Problem 5: Design System Language Misalignment
Action: Led Cross-Functional Workshops to align component naming with developer terminology, drastically reducing handoff friction.
The 2nd Improvement
Leading “UI Patterns Naming Convention Workshop”
After its enhancement based on the survey results, together with a senior design manager, I organised “UI Pattern Namings Workshop” by inviting chapter’s designers and CoE developers. It is hard to find a couple of hours on our calendar. Therefore, the workshop was segmented into around five sessions and each sessions ran for 1.5 to 2 hour.
The Goal of the Workshop
Increase design system maturity and build a principle for the scalable design system
What we need to do, to achieve this goal
Define different themes
Classify our patterns in the user-friendly way, aligned with developers under themes
Determine naming convention
password: BRIX-Name
Following the workshop result, here are main updates in Figma library.
Change Structure of the Design Systems from Atomic to Theme: By adopting a Theme-based structure, I aimed to provide designers with a more efficient framework that supports the creation of robust, adaptable design patterns.
Change Pattern Naming Convention to CamelCase to enhance collaboration between developers, editors, and designers.
Additionally, I also restructured Pattern library and Brix site as the single source of truth.
The 3rd Improvement
Through observing the way how designers update a new pattern and having interviews with them, I have developed a comprehensive tool termed the "Pattern Update Checklist." The primary aim of this checklist revolves around streamlining the review process, thereby alleviating the burden on reviewers.
From a designer's point, this resource serves as a systematic guide to ascertain whether their pattern aligns with the acceptance criteria and upholds the desired quality standards.
The checklist, designed to be completed by the designer, is intended to accompany each review request submission, fostering a more structured and efficient pattern update procedure.
Pattern Update Checklist
Individual Pattern Development Process
In addition to working on the high level within design systems, I have actively engaged in building individual design patterns through collaborative alignments with designers, developers, SEO experts, and other stakeholders in order to deliver One Customer Experience.
Also, as the centre of excellence, I develop design tokens as principles, identify business needs, enhance brand style guides and lead their implementation together with developers.
If you are interested in gaining a deeper understanding of my process for building individual patterns, here is a glimpse.
This is a pattern evaluation process. When chapters raise an initiative to develop a new pattern, I evaluate its necessity align with other product needs.
Furthermore, I developed Spec template to consider many different aspect of the pattern for developers, designers, and editors to enhance efficiency.