Them Consulting
Foundation Design System: Scaling Design Operations with a Multi-Brand Design System
Design System
Multi-Brand Design System
Dec 2021 - Aug 2022
The Team
+2
I led a team of two Design Systems Architects and directly reported to the Experience Design Director, with in-house developers to develop the design system.
Tools used
My Role
As the Lead Design Systems Architect, I led the creation, implementation, and evolution of a multi-brand design system at THEM Consulting, ensuring scalability, accessibility, and seamless integration while collaborating with cross-functional teams to drive adoption and efficiency.
Scale Design Operations
Design Systems Architecture
Usability & Accessibility Testing
Process & Scope Management
Training & Education
Micro Interactions & Motion Design
Development coordination & Support
Background
THEM Consulting is a fast-growing design agency with 25+ designers working on 40+ products
THEM Consulting is a global digital product design and development company specializing in creating innovative digital solutions for the Banking, Financial Services, and Insurance (BFSI) sector.
Challenge: High Workload Per Designer
With a growing clientele, scaling and optimizing design operations was crucial to maximize resources without increasing costs
With 25+ designers managing multiple projects and a rapidly growing client base, THEM Consulting needed a cost-efficient way to scale design operations without compromising quality or delivery timelines in the BFSI sector.
Objectives
Objectives of Scaling Design Operations
Eliminate Redundant Work & Delays
Better Design-Development Alignment
Launch Products Faster
Increase Development Efficiency
More Time for Strategy & Research
Plan & Define Interactions Early
Enter Foundation Design System
Prebuilt, platform agnostic, token-based multi-brand design system for easy duplication and customization
Building digital products from scratch demands extensive resources. Multi-brand design systems streamline the process by enabling one-time creation, easy duplication, and customization, saving thousands of hours of design and development.
Design Systems Created
Faster Product Launch
Faster UI Design
Cost Saving
Design system Architecture
Crafting the Foundation Design System
Step 1: Research & ANALYSIS
Audit existing projects & design systems. Identify common patterns, behaviors, and challenges.
Conduct a thorough audit of existing projects and design systems to identify recurring patterns, usability challenges, and inconsistencies. Gather insights from designers and developers to understand workflow inefficiencies and scalability issues.
Step 2: Planning the architecture
Estimate brand deviation to plan the component architecture and token nomenclature. Analyze the dependency of the components on the brand's look and feel.
Define the component structure and token framework based on brand deviation analysis to ensure adaptability. Establish a token nomenclature and analyze dependencies between components and brand aesthetics to strike the right balance between customization and consistency.
Step 3: Laying the foundation
Using Token Studio plugin in Figma to lay the foundation
Use Token Studio in Figma to create the core design system, defining design tokens for colors, typography, spacing, and UI components. This stage ensures scalability, efficiency, and seamless integration into different brand environments.
Step 4: Developer Coordination
Explore and finalize approach in collaboration with dev teams
Collaborated with developers to establish a scalable integration approach. We used Token Studio in Figma to extract JSON files for design tokens, which were then synced with GitHub. The JSON files were converted into platform-specific codebases, ensuring seamless implementation across web, mobile, and other digital platforms. This approach enabled automated updates, consistency, and efficient token management across products.
Step 5: Testing Across Products
Test on different brands & iterating for easy adaptability and ease of use
Implement the design system across multiple brands and products, testing for usability, adaptability, and flexibility. Iterate based on feedback to refine ease of implementation, performance, and maintainability.
Step 6: Educate team on usage
Educate team on guidelines and usage
Conduct training sessions, workshops, and documentation reviews to ensure designers and developers understand and effectively use the system. Provide guidelines on component usage, token modifications, and governance rules.
Step 7: Adoption & Implementation
The design systems team will duplicate and tweak the design system to cater to brand needs
A design system specialist customizes and duplicates the core system for different brands, ensuring a cohesive but brand-specific look and feel while maintaining the system's efficiency and consistency.
Lessons learnt
Reflections & key takeaways
Even the best practices can backfire as tools evolve.
As I delved deeper into the product, I made constant crucial design improvements when needed. However, some challenges couldn’t be fully solved within the timeframe, and that’s okay—we achieved the best possible outcome within the limits.
There is no right or wrong approach. Design and prioritize to facilitate desired behavior.
Initially, I was focusing on doing the research, constantly testing and seeking perfection. As I progressed, I learned that ambiguities may always exist. Sometimes it's OK to take a wild guess based on prior experience and strong intuition.
Prioritize flexibility and simplicity. Restrictive design systems tend to fail.
It's an innate nature for product teams to bombard the app with multiple features. However, it's the pain point, context, and behavioral understanding that shape the value of a product. So do not hesitate to ask critical questions. Asking questions your super power.
Other work
Not enough? Here is more.
