Fluidra
Design System
A multi-brand design system for a global brand.
Fluidra is a global leader in the pool industry, recognized for its renowned brands.
Problem Statement
Fluidra faced the challenge of managing multiple diverse brands, each with unique design needs. The lack of a unified design framework led to inconsistencies in user interfaces and significant inefficiencies in the development and maintenance of websites across its portfolio.
Overview
To address these challenges, I began with a comprehensive audit of Fluidra’s numerous brands, identifying pain points and opportunities for improvement. The primary goal was to develop and implement a custom multi-brand design system that balanced the unique needs of each brand while creating a unified identity. Leveraging atomic design principles, I built a robust framework to ensure consistent user interfaces and seamless interactions across all eight brands.
The resulting design system not only unified Fluidra’s brand presence but also drastically reduced the time required to launch new websites and the ongoing effort to maintain them. Inspiration for this system was drawn from leading frameworks, including the Carbon Design System and Material Design, ensuring it adhered to best practices and user needs.
Impact
The implementation of the design system transformed Fluidra’s digital ecosystem, delivering significant benefits:
Streamlined design and development processes across eight brands.
Improved brand consistency and user experiences.
Reduced time and resources needed for website launches and updates.
Established a scalable and sustainable framework for future innovation.
This initiative not only addressed immediate inefficiencies but also positioned Fluidra for long-term digital success.
Multi-Brand Design System Components
Developed a comprehensive library of UI components based on atomic design principles, creating a scalable framework that ensures consistency and efficiency across all eight brands in Fluidra’s digital ecosystem.
12-Column Fixed Grid System
Established a fixed 12-column grid as part of the design system, providing a consistent structural foundation that streamlines layout decisions, speeds up design and development, and ensures visual alignment across all eight brands.
Page Sections
Designed a library of modular page sections that can be reused across all websites, enabling faster builds, consistent layouts, and flexible customization while maintaining a unified brand experience.
Responsive Buttons
Created a comprehensive set of button styles for desktop and mobile, delivering a unified interaction style and improved accessibility.
Responsive Card Components
Designed a versatile library of cards for desktop and mobile, with variations including images, icons, and text. These adaptable components became a core building block for showcasing products, articles, categories, and other key content across all Fluidra websites.
Color System & Grayscale Swatches
Developed a comprehensive grayscale palette with hex values and a clear numbering system, providing designers and developers with an easy-to-use, standardized reference that ensures visual consistency across all Fluidra brands.
User Interface Components
Designed key UI elements—including checkboxes, date pickers, and dropdown menus—to create a cohesive interaction style.