Case Study
Creating a Tokenised Design System for SaaS Platform
Role
Product Designer
Domain
SaaS
Contribution
As the Product Designer, I designed and implemented a scalable design system. I ensured the system’s adaptability with a fully tokenized structure, documented it, and collaborated closely with developers to align design and implementation, enabling smooth iteration and testing.
Design Tokens
I developed a robust set of design tokens to define:
Colours and typography for a consistent visual language.
Spacing and shadows for precise layouts.
Automatic light and dark theme switching to save development hours and provide a seamless user experience.
Core token structure.
Parallel colour tokens for automatic light/dark theme switching.
Automated theme switching in action.
These tokens became the backbone of the system, enabling rapid iteration and seamless adaptation between desktop and mobile platforms, while adhering to accessibility standards.
Atomic Design Process
Instead of starting with atomic elements like buttons or icons, I began with larger, functional components such as charts. Once these were complete, I deconstructed them into smaller elements, following atomic principles. This reverse approach allowed me to focus on delivering functional components quickly before refining details.
Visualising atomic design: tokens, atoms, molecules, and organisms.
Customising Vuetify
Adapting the design system to Vuetify involved:
Filling gaps by developing custom components for elements that were missing, such as filters and advanced modals.
Building a custom token system to align with design principles, as Vuetify lacked native support for tokenisation.
Improving clarity in categorisation, ensuring components were easy to find and reuse.
Before:
Standard Vuetify button component with excessive variations, each as a separate entity, leading to inefficiency and complexity.
After:
Unified button component with extended states, streamlined variations, and optimised for simplicity and efficiency.
Despite these challenges, the system fully leveraged Vuetify’s strengths while addressing its limitations.
Integrating Chart.js
Integrating Chart.js posed unique challenges, particularly in ensuring:
Mobile responsiveness, such as enabling full-screen charts on smaller screens.
Custom functionality, like adding interactive behaviours to match product requirements.
Default Chart.js line chart: uncustomised and lacking responsiveness for project needs.
Collaborating closely with developers, I implemented solutions that balanced usability with performance, ensuring seamless chart integration.
Customised Chart.js in action: showcasing data interactions and hover effects within the live product.
Team Collaboration
Daily collaboration with developers was key to the system’s success.
Tasks were managed through Jira, with regular audits of implemented components.
Feedback loops allowed for iterative refinements, especially for A/B testing and light/dark mode functionality.
Clear communication ensured alignment between design and implementation, reducing discrepancies and improving efficiency.
Documenting the System
To make the system accessible and scalable:
Confluence housed detailed guidelines and usage instructions for all components.
Figma included a ‘Patterns’ file to show real-world applications of components.
Fragment of typography documentation: ensuring consistency and clarity across the system.
This dual documentation approach ensured easy onboarding for new team members and consistent application of the design system.
Results
The design system brought measurable improvements:
Consistency: Unified design across all modules.
Efficiency: Predefined components and tokens reduced development time and enabled rapid iteration.
Scalability: Accommodated new modules without compromising structure or design principles.
Collaboration: Clear documentation and communication improved workflows between teams.
Input behaviour demo: showcasing dynamic data entry and state changes in real-time.
Key Learnings
This project taught me:
Methodological Flexibility: Starting with larger components and refining them saved time and ensured a practical foundation.
System Tokenisation: A fully tokenized system improves adaptability, consistency, and efficiency.
Theme Management: Automating light and dark modes significantly reduced development effort.
Framework Adaptation: Working with Vuetify and Chart.js strengthened my ability to customise frameworks effectively.
This experience reshaped how I approach design systems, prioritising scalability, adaptability, and collaboration to deliver impactful results.
