SYMPHONYAI

Centralised library approach for 40 products

We collaborated with SymphonyAI to develop a centralized design system for their diverse portfolio of 40 products. Our team created a comprehensive library of reusable components, established design system infrastructure, and provided documentation and education for seamless adoption. Spanning Figma component design, product ownership, and QA testing.

What we got is a fully operational design system, enhancing consistency and efficiency across SymphonyAI's wide range of B2B SaaS offerings.
Stratus Hero

Services

  • Design system infrastructure
  • Figma component design
  • Product ownership
  • QA testing
  • Design system documentation
  • Design system adoption and Education
  • UX patterns documentation
  • Visualisation library

Tech

  • StorybookStorybook
  • ChromaticChromatic
  • GithubGithub
  • FigmaFigma
  • SupernovaSupernova
  • ZeroheightZeroheight
  • AngularAngular
  • ReactReact
  • CSSCSS
  • TailwindTailwind

Industry

  • SaaS
  • B2B
  • Engineering
  • Retail / CPG
  • Financial services
  • Industrial
  • Media
  • Enterprise IT

Deliverables

  • Fully operational and fully functional design system

Project length

  • 1+ years

TEAM INVOLVED

Design system manager

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.

UI Components
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.

1.
Visual consistency
Consistency in visual design elements improves brand recognition and the overall user experience.
2.
Development efficiency
No more duplication of work. Reusing components from the library accelerates development speed and time-to-market for new features and products.
3.
Cost savings
Reducing manual effort, minimizing rework, and optimizing workflows leads to cost savings. Solid design and development processes allow for better resource utilization.
4.
Scalability and adaptability
A design system provides a scalable foundation for the product, making it easier to adapt to new business requirements while ensuring consistency.
5.
Decreased maintenance with consolidated tools
After the migration process, the old library will be deprecated to save resources, reduce maintenance needs and cognitive load for design system users.
6.
Enhanced user experience
The new design system ensures a cohesive and well tested user experience across all products. This contributes to improved usability, accessibility, and user satisfaction.
Dashboard Overview
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.

Central Design System Model

Toolchain
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.

Color Scheme

Dark UI vs Light UI
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.

Token workflow within CDS

Token Naming
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.

CDS Guidelines
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.

Contribution Goal

Token Naming
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.

Functional QA
Visual QA
The results

Impact made

1.
Delivery speed
  • 3x increased design delivery
  • 30% increased code delivery
2.
Design & experience
  • Consistent design language across products
  • Improved UI and experience across all projects
3.
Development
  • Streamlined process with fewer dependencies
  • Increased quality of delivery
  • Decreased discrepancies between design and code
  • Decreased QA testing time
4.
Collaboration & focus
  • 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.”

SymphoniAI Logo Jonathan Carpenter
Head of UX at SymphonyAI