Client:

Sana Labs

Duration:

Four months

Methodology:

Agile

‍See it in Action

My Contribution:

Lead UX Designer.

Impact:

80%

Saving in design and
development resources

50%

Decrease in time to
implement new designs

100%

Consistent brand and user experience

Overview

Sana Labs is a global leader in developing and applying artificial intelligence to enhance learning. They collaborate with top organizations worldwide to improve learning outcomes through personalized education.

The company's growth and expansion has led to the launch of new products and services that are branded differently to capture different audiences.

The Ask

I was brought on board by the company's CEOto work as the lead product designer and collaborate closely with a third-party agency to create a scalable Design System that could be used across all of the company products, present and future, while accommodating different brand characteristics.

The Problem

The Sana product teams faced challenges due to inconsistencies in design and development across their products. Some product components were well-designed and developed, while others were outdated and inconsistent. Designers were uncertain about which design patterns to use due to a lack of documentation. Additionally, the engineering component library was almost non-existent, and there were no engineers dedicated to components and maintenance.

The Design Goals

Consistency

Ensure a uniform look and feel across all products and platforms, providing users with a consistent experience.

Efficiency

Streamline the design and development process by providing reusable components and guidelines, reducing the need for repetitive work and speeding up production.

Usability

Design Systems will enable teams to deliver high-quality prototypes, intuitive products, and consistent experiences — true to code, and at scale.

Scalability

Enable the design system to grow and evolve with the product, accommodating new features and platforms without requiring a complete overhaul.

Collaboration

Foster better communication and collaboration between designers, developers, and other stakeholders by providing a shared language and set of tools.

Accessibility

Incorporate best practices for accessibility to ensure that the product can be used by people with a wide range of abilities and disabilities.

Discovery

My team and I, began by analyzing the existing product screens of each brand to identify the key components, visual elements, and interaction patterns used across all screens. Then initiated MVP sprints, prioritizing the most used components, and interaction, as well as areas where styles could be unified through the use of new or existing components.
To save time, we were further refactoring those components as we went along.

Audit and inventory

The multibrand model

Before we delve into our design system , we first needed to establish what the multibrand model of Sana Labs products. It emerged from research and discussions with company stakeholders that the company's brand vision is to encompass all their products under the main brand umbrella aka Branded House.

The Sana Labs Branded House model

Key Insights

After conducting extensive research on similar multi-brand models ( Fedex - Apple - General Electrics..), I have gathered the following insights:

All Branded House Model have one central Design System feeding all the sub-brands.
Branded House Design Systems are strict and changes are controlled.
Users cannot save their last activity.

Defining the Structure

In order to accommodate the multi-brand nature of this project, we chose to develop a robust foundation through design and coding, which could be used as a framework for creating more complex components. My objective was to establish a White Label UI kit that solely focuses on structure and behavior, allowing styles to be easily swapped within the local design file.

The taxonomy workshop

I led two workshops with the design system teams, including designers, developers, and a member from the marketing team. Our aim was to create a modular semantic naming convention for our design tokens to ensure that our components are easy to understand, and to document the important properties that define the appearance and behavior of each UI component. This included layouts, colors, shapes, spacing, text styles, icons, corner radius, shadows, image ratios, and more.

Design Tokens Naming Convention

We used short names based on component's type category function and the optional state, and ordering setup from the most generic categories to more specific ones.

The taxonomy workshop

Theming Process

The theming process acts like a switch by changing the values within the design token with the help of variables.

Primitive variables for every sub-brand's colors, borders, spacing, and typography.

Using token naming that can stay consistent across theming to all Sana Labs brands.

Documentation

We chose Zeroheight as our documentation tool and started developing our design system website. This encompasses components, content, patterns, and accessibility guidelines for the global theme as well as each sub-brand.

The Figma Setup

We sorted the component libraries based on platform systems and specific products. Each component had its own dedicated page complete with documentation and variants for easier prototyping.

Figma Library Map

This is a map of our libraries in Figma, with global brand core styling and sub-brand elements working together to create a completely new design for each brand.

The Cornerstone that Holds it Together

We created a status system using Zeroheight and Token Studio plugin annotations to clearly communicate the status of components to designers and developers. This system indicates design system guidelines, identifies components and assets tokens, and highlights branded systems as well.

Screenshots of some documentation pages in Zeroheight.

Measuring Success

Measuring the success of a design system can be tricky, but we tracked how happy our designers and front-end engineers were with our system by running an NPS survey. We saw a big improvement in their satisfaction over time, going from no improvement to a 65% increase.
Additionally, we set a goal to have all components featured on our documentation site marked as "stable." This entailed ensuring that the code, design components, and documentation were all up to date.

Table showcasing the latest status of each component.

Takeaways

I've gained valuable insights from this project about the significance of having a well-structured and adaptable design system for companies with diverse brands and platforms. Here are a few important points to consider when merging a multi-brand design system into a unified library:

Key Insights

Using design tokens instead of hardcoded values can streamline the work of building, maintaining, and scaling products with a design system.
Keep foundations' naming organized and consistent.
Variables are the key feature to switch between brands and themes.
Working closely with the Dev team will bridge the gap between Figma and code.