Nael maali

Resume

blog

Schoox

b2b saas

design system

Schoox Design System

Schoox Design System

Schoox Design System

Creating a new design system for Schoox from the ground up to support both the product and brand redesign efforts.

Creating a new design system for Schoox from the ground up to support both the product and brand redesign efforts.

Role

Role

Product designer

Visual designer

Writer

Product designer

Visual designer

Writer

Timeframe

Timeframe

6 months

6 months

Team

Team

Me - Product Designer

Paul H. - Director

Cliff M. - Manager

Alyssa V. - UX Writer

Michalis T - Frontend Lead

Me - Product Designer

Paul H. - Director

Cliff M. - Manager

Alyssa V. - UX Writer

Michalis T - Frontend Lead

Figma UI kit with specifications for engineers

Problem

Problem

Myself and my lead conducted a comprehensive audit of the legacy product, documenting inconsistent styling present throughout the product, as well as various accessibility issues that could impact users with disabilities. Additionally, several patterns or components were identified that were not cataloged anywhere internally, leading to confusion among team members and stakeholders. Findings revealed a significant lack of consistency between the web and mobile applications, which in turn was creating issues with overall user experience and brand coherence.

Myself and my lead conducted a comprehensive audit of the legacy product, documenting inconsistent styling present throughout the product, as well as various accessibility issues that could impact users with disabilities. Additionally, several patterns or components were identified that were not cataloged anywhere internally, leading to confusion among team members and stakeholders. Findings revealed a significant lack of consistency between the web and mobile applications, which in turn was creating issues with overall user experience and brand coherence.

Target

Collaborating with brand, the engineering teams for front-end web, iOS, and Android, our CEO, and the Experience Design team we went to work on piecing together a new design system and new process for handing off design specifications to ensure 1:1 parity in assets created for the Experience Design, Web, iOS, Android, and Brand teams.

Collaborating with brand, the engineering teams for front-end web, iOS, and Android, our CEO, and the Experience Design team we went to work on piecing together a new design system and new process for handing off design specifications to ensure 1:1 parity in assets created for the Experience Design, Web, iOS, Android, and Brand teams.

Variant sticker sheets for Text field and Dropdown components

My Contributions

My Contributions

My duties within the capacity of an individual contributor consisted of auditing design files from the Experience Design team to identify patterns to design components off of. Once patterns are identified, a study of APIs with similar or identical components in other systems would be completed to map out what APIs would be needed in our components based on our own needs. Designs would be made for the UI kit in Figma with specifications written for the engineering teams, followed by a round of testing with the Experience Designers, hand off with the different engineering teams, revisions if needed, followed by production and writing documentation for our documentation website.

My duties within the capacity of an individual contributor consisted of auditing design files from the Experience Design team to identify patterns to design components off of. Once patterns are identified, a study of APIs with similar or identical components in other systems would be completed to map out what APIs would be needed in our components based on our own needs. Designs would be made for the UI kit in Figma with specifications written for the engineering teams, followed by a round of testing with the Experience Designers, hand off with the different engineering teams, revisions if needed, followed by production and writing documentation for our documentation website.

Sample of our documentation website

Design Tokens

Design Tokens

Through an audit, a couple of pretty major issues were identified. Adherence to brand standards was pretty weak across the product, wrong hex values for brand colors were used throughout. Also while the ability to theme and white label the product was a huge draw for our customers, it was difficult to handle successfully and accessibility was an enormous issue.

The design token architecture was based on Amazon’s Style Dictionary to support web, iOS, and Android. The layering was built from the ground up to not only support the level of theming needed, but also to ensure accessibility concerns were no longer an issue no matter what brand styles our customers used.

Sample of our design token mapping

Figma variables based on our tokens

Results

Results

  • Achieved our goal of getting all supporting teams on board with the Schoox Design System by Q3 of 2022

  • 1:1 parity across web and mobile apps

  • Successful implementation of design tokens to support theming efforts now and into the future

Future Improvements

Future Improvements

  • Hold more learning sessions to break down any further communication and consistency issues between teams to ensure greater success and adoption across the organization

  • Continue to experiment with version controlling.

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