Building 2 Themes into One System

Product is a platform designed to empower app owners and marketers by providing comprehensive tools for market analysis and App Store optimization. As the Product Designer, I was responsible for crafting the product’s interface and building a design system from scratch. I created a scalable, tokenized design system tailored to product, ensuring consistency across modules, seamless integration with Vuetify.js and Chart.js, and adaptability for both light and dark themes. The system streamlined development, enhanced collaboration, and supported efficient iteration during testing and feature rollouts.

Starting the project from scratch allowed me to build a design system specifically tailored to the product. With multiple modules planned, consistency and scalability became critical from the outset.

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.

These tokens became the backbone of the system, enabling rapid iteration and seamless adaptation between desktop and mobile platforms, while adhering to accessibility standards.

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.

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

After

Despite these challenges, the system fully leveraged Vuetify’s strengths while addressing its limitations.

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.

Collaborating closely with developers, I implemented solutions that balanced usability with performance, ensuring seamless chart integration.

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.

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.

This dual documentation approach ensured easy onboarding for new team members and consistent application of the design system.

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.

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.