Nael maali

Resume

blog

Schoox

b2b saas

design system

SDS Tokens

SDS Tokens

SDS Tokens

Design tokens for Schoox were developed based on the necessity to create a solution for inconsistent styling across various components, as well as the growing need to support theming capabilities. This initiative aimed to ensure a more cohesive visual identity while allowing for flexibility in design across different applications.

Design tokens for Schoox were developed based on the necessity to create a solution for inconsistent styling across various components, as well as the growing need to support theming capabilities. This initiative aimed to ensure a more cohesive visual identity while allowing for flexibility in design across different applications.

Responsibilities

Responsibilities

  • Visual design

  • Token architecture

  • Accessibility testing

  • Token exploration

Deliverables

Deliverables

  • Token Studio build

  • Token JSON

  • CSS Framework

  • Figma Variables

Team

Team

Me - Product Designer

Cliff M. - Manager

Michalis T - Frontend Lead

Me - Product Designer

Cliff M. - Manager

Michalis T - Frontend Lead

Problem

Problem

An initial audit of the legacy product revealed inconsistencies in how styling was applied, and a clunky application of theming and white labeling features for customers. The Schoox brand was not even successfully implemented across the product on web and mobile. Accessibility was also an enormous concern as their was no way to ensure baseline accessibility standards were met when customers applied their own custom brand colors.


This inconsistent and unorganized styling application also caused some business concerns as potential sales were lost, and customer retention suffered because customers could not adequately theme their experiences based on their brands.

Target

Target

Build out a library of design tokens based on Amazon’s Style Dictionary to ensure consistency regardless of device, and to ensure accessibility standards are met regardless of brand.

Sample of our design token mapping

Tokens implemented as Figma variables

Token naming & alias layers

Token naming & alias layers

The naming structure of the SDS tokens came directly from Amazon’s Style Dictionary. This was done to keep our specifications simple, and to ensure consistency across devices. The same tokens were used regardless of device, which meant that the token mapping remains the same from component to component, which means accessibility standards were also consistent from device to device. This created enormous improvements in time saved when duplicating components for different devices or operating systems, and little to no confusion when it came to which tokens should be used where as every token was assigned a specific and easy to understand purpose.

The naming structure of the SDS tokens came directly from Amazon’s Style Dictionary. This was done to keep our specifications simple, and to ensure consistency across devices. The same tokens were used regardless of device, which meant that the token mapping remains the same from component to component, which means accessibility standards were also consistent from device to device. This created enormous improvements in time saved when duplicating components for different devices or operating systems, and little to no confusion when it came to which tokens should be used where as every token was assigned a specific and easy to understand purpose.

Token layering featuring five levels of abstraction

Token naming based on Amazon Style Dictionary

Accessibility

Accessibility

When building out the different component aliases, especially at the component level, detailed accessibility testing was completed to ensure either AA or AAA WCAG compliance standards were met.

When building out the different component aliases, especially at the component level, detailed accessibility testing was completed to ensure either AA or AAA WCAG compliance standards were met.

Results

Results

  • A complete rebuild of the theming experience for workspace admins

  • AA or AAA WCAG standards met across the product regardless of brand

  • 100% of SDS components mapped with design tokens or Figma variables

Next project

Let’s

Connect

I’m open to new opportunities and would love to hear from you.

Ping me

Let’s

Connect

I’m open to new opportunities and would love to hear from you.

Ping me