Centralised library approach for 40 products
What we got is a fully operational design system, enhancing consistency and efficiency across SymphonyAI's wide range of B2B SaaS offerings.
Tech
Storybook
Chromatic
Github
Figma
Supernova
Zeroheight
Angular
React
CSS
Tailwind
TEAM INVOLVED
Specializing in applying AI technologies, the company addresses complex challenges, offering clients strategic advantages in competitive markets. This approach not only enhances operational efficiencies but also fuels future advancements within the Retail/CPG, Financial Services, Industrial, Media, and Enterprise IT sectors. With a commitment to driving transformational outcomes, SymphonyAI empowers businesses to thrive in the age of AI.
Project overview
Full migration towards a centralized library
A unified centralized library offers numerous benefits for companies with multiple products, ranging from improved efficiency and scalability to an enhanced and consistent user experience and brand differentiation.
Challenge
How can we centralize all assets?
Since there is no one tool to centralize everything from design to development, we had to figure out how to link all parts of the design system and where to centralize all assets.
Solution
Single source of truth and a clear structure
We decided to use Supernova as a central source of truth where all assets are linked.
The design library is housed in Figma, while Supernova is used as a token storage and exporter. GitHub serves as a repository for component libraries and variables.
Challenge
Creating an accessible color system
Creating an accessible color system that would be flexible for different theme options and at the same time support light and dark modes was a challenging task.
Solution
Manual tweaks to the initial palette
We created a primary color palette based on our brand colors. To meet accessibility standards, we slightly adjusted some of the brand colors.
Following the initial palette creation, we manually updated the shades to maintain a consistent color contrast across the brands.
By ensuring that the first five shades in the palettes were accessible with white text and the next five with dark text, we were able to switch between brand themes while preserving an accessible contrast level.
Challenge
Ownership and control over styling
How can we manage, maintain and execute the transition from design to code?
Solution
A centralized token approach
We made a simple token system, using clear names that everyone can understand and work with across different divisions. We use the Supernova Design System tool to keep and share these tokens in many formats and to document design decisions. Using Supernova simplifies component styling and speeds up development.
Challenge
Components and documentation
Our goal was to create highly sophisticated Figma components, align naming across design and code and create comprehensive documentation for design and development.
Solution
Establishing solid ground rules
We created an industry standard UI kit that is flexible, organized and presented in a way that makes it easy for both new and highly experienced designers to understand and use.
Clear guidelines, with lots of examples, covering all known use cases were created to ensure high adoption. We also created specifications covering everything that is needed for styling and development. Explanations were added for the most important patterns related to digital product design.
We also covered navigation patterns, messaging, button placement, inline editing, advanced filtering and more.
Challenge
How can we engage CDS users?
It was important to not only get product teams to use the central design system, but also actively contribute to it. We wanted people on the front lines that actively work with the design system to provide feedback and help us drive improvements.
Solution
A structured contribution process
Establishing a structured workflow for the contribution process enables team members to effectively propose, develop, review, and integrate new features, such as components, patterns, and guidelines. By facilitating collaboration and iteration among designers, developers, and other team members, this process ensures the continuous improvement and alignment of the design system with the organization's evolving needs, ultimately enhancing its relevance and utility.
Challenge
Ensuring high quality of UI components
Without a systematic approach to UI component implementation QA on a library level, there is a risk of inconsistencies, errors, and subpar performance in the user interface components within the UI library, potentially leading to a negative experience for developers and end-users alike.
Solution
Component-level testing
Implementing a structured QA process for UI component implementation on a library level ensures thorough testing of individual components, their integration, and overall behavior within the library. This approach guarantees that the UI components meet high standards of correctness, reliability, performance, and usability. This enhances the overall quality of the library, fostering a positive experience for developers who utilize it.
The results
Impact made
- 3x increased design delivery
- 30% increased code delivery
- Consistent design language across products
- Improved UI and experience across all projects
- Streamlined process with fewer dependencies
- Increased quality of delivery
- Decreased discrepancies between design and code
- Decreased QA testing time
- Improved rapid prototyping and collaboration between designers and product owners/managers
- More focus on conceptualization, innovation and research
Our clients' success stories speak volumes about our impact
“Motiff has been a great strategic design partner, as we evolved our company onto a design system their knowledge, and expertise has proved invaluable. With capabilities across a variety of UX disciplines, we can conveniently utilize Motiff’s team as our needs evolve and grow. We look to maintain a long-term relationship with them to always be ready for highly detailed and polished design activities as well as development and management.”
Jonathan Carpenter
Head of UX at SymphonyAI