One design system for BizClik’s 20+ brands
I led the product design team in building BizClik’s design system from scratch — atomic components, an 8‑point grid, and documentation developers could ship from.
- Role
- Product Designer · led the product design team
- Team
- Creative Director, Product Designer, engineering, digital design
- Foundations
- Material Design, Atomic Design, 8‑pt grid
- Tool
- Figma
Brief
BizClik Media Group needed a unified design system, in Figma, to support the redesign of its websites.
It had to bring in existing brand elements, keep every digital property consistent, and help design and development teams collaborate efficiently. I had the opportunity to lead the product design team in creating it. The system drew heavily on Google Material Design and the Atomic framework, combined with branding from the Digital Design team.
My role
With the Creative Director & Product Designer
Identified design limitations.
With engineering
Worked closely to understand technical constraints.
With the digital design team
Compiled the existing design elements.
Problem
BizClik needed a robust system built from scratch, merging existing branding with new elements. It was essential for the website redesign and had to create a cohesive visual identity, streamline design and development, and stay adaptable for the long term.
Objectives
01
Visual cohesion
Bring existing branding in while following Google Material Design principles.
02
Efficiency
A comprehensive library of reusable UI components.
03
Scalability
Adaptable to future changes, with efficient updates and expansion.
04
Documentation
Detailed guidelines so designers and developers can adopt it easily.
05
Feedback loop
Work with stakeholders and team members to keep refining the system.
Research & analysis
- Researched Google Material Design and Atomic Design principles to find best practices.
- Analysed the client’s existing design assets and practices in depth.
Atomic framework
I created an atomic framework tailored to BizClik: a library of reusable components organised as atoms, molecules, organisms, templates and pages. Every element followed clear, consistent naming, so anything could be found and reused quickly.
Atoms — buttons, inputs, text
Molecules — search bar, navigation menu
Organisms — header, footer, card
Templates — complete page structures
Prototyping & testing
- Built interactive prototypes to validate the system’s usability and effectiveness.
- Gathered stakeholder feedback and ran usability testing to refine the components.
Grid & spacing
We adopted an 8‑point grid as the backbone of the system. Every component, text style and layout followed the same spacing framework, so alignment was both good-looking and functionally effective.
Layout grid
Icons on the grid
Documentation & guidelines
Each component shipped with documentation — guidelines, properties, usage and code snippets for developers — covering icons, typography, colour, buttons, states, animation and effects.
Icons — designed for each use case
Typography — variables
Typography — type scale
Colour — primary, secondary, accent
Buttons — behaviours and states
States — default, hover, active, disabled
Animations — motion guidelines
Effects — shadows and depth
Outcome & next steps
The system gave BizClik a cohesive visual identity and made design and development more consistent and efficient across its digital platforms.
Challenges
It was an inherently time-consuming build — but it proved invaluable for consistency and efficiency.
Next steps: the system keeps evolving with BizClik’s needs and extending to more digital products and platforms.
Next case study
Personal Assistant Agent