top of page

Standard Organization

Design System

March 2023 - Jan 2025

Role: Research and Design Lead
Design System Cover

A perfect tool to enhance the quality of the work and to speed up the design process

Overview

While working with the CSA Group Design Team, I took the lead on developing a design system from the ground up, prioritizing best practices and accessibility. The system includes a library of reusable components, guidelines, and workflows designed to streamline the creation of consistent, high-quality user interfaces across CSA Group’s digital platforms. By ensuring visual and functional alignment, the design system enhances the user experience while boosting efficiency for both designers and developers.

Development Methodology

During the design system project, we adopted the R.E.A.D framework approach, which focuses on Research, Explore, Apply, and Document. This structured methodology ensured a thoughtful and thorough process.
 

  • Research:
    we conducted a deep dive into user needs, accessibility, best practices and explored other existing design system such as Material Design, Carbon Design System, Alberta Government Design System (DDD) and Ontario Government’s library as well as design inconsistencies to establish a solid foundation.

     

  • Explore:
    after gathering the research results and focusing on the accessibility guidelines and best practises we started exploring different options for each component set. created prototypes, and component ideas to test them in different scenarios and within different screen break points. for example explored 6 different options for the organization’s Store’s header considering the Mobile, Tablet 1,2, Desktop 1, and 2. once test was done we finalized the most efficient option and created the component set of it ready to apply.

     

  • Apply:
    during this phase we Implemented the new components across all platforms and showed the in different scenarios.

     

  • Document:
    once the applying phase was done we created a comprehensive documentation for each set to guide designers and developers with explaining the component’s function, acceptable dimensions, implementing Dos and Don’ts as well as accessibility, to ensure the design system's scalability, usability, and long-term value.


This approach allowed us to build a cohesive, accessible, and user-centric design system efficiently.

Design System In Use
Date Picker Component Image

Documentation

Through Design system documentation, we provide designers, developers, PMs/POs or anyone who is involved with the project’s development with guidelines and policies of how to use each of our component sets.

This guideline list includes:
 

  • Different Use Cases

  • Anatomy

  • Dimensions

  • Paddings

  • Different States

  • Dos & Don’ts in terms of use, colours, states, etc.

  • Accessibility Guidelines

  • Tokens (qty varies based on component type)

  • CSS Codes and Styles

Quick Glance on the developed components for the organization through Atomic Design methodology:

Atoms: basic building blocks of design, like buttons, icons, headings, and body text, are called atoms.

 

  • Button

  • Checkbox

  • Chips and Badges

  • Colour styles

  • Icons

  • Link

  • Typography style

  • Grid Style

Typography - Styles

Molecules: groups of atoms that work together to perform a function.

 

  • Accordion

  • Alert

  • Breadcrumbs

  • Dropdown

  • Icon Button

  • Scrollbar

  • Text Fields

  • Text Area

  • Toggle Switch

  • Date Picker

  • Radios

  • Tooltips

Typography - Styless

Organisms: complex UI components made up of groups of molecules, atoms, and sometimes other organisms
 

  • Footer & Header

  • Modals

  • Pagination

  • Progress Indicator

  • Rich Text Editor

  • Step Tracker

  • Table

Header Options

Example of Using R.E.A.D framework to develop the organization’s store website’s header - Nov 2024

Research:
​​
I analyzed 15 different organizations’ headers during the research process. This list included standard organizations, whole sale companies, and other e-commerce websites who are working directly and indirectly with public users. Such as ISO, Home Depot, Amazon, etc. I used other resources such as nn/g guidelines for designing an accessible store headers.

Here is the overview of what we found out:
 
The most common features on all e-commerce websites’ headers:
  1. Logo
  2. Search Bar
  3. Cart
  4. Profile/Sign in
  5. Language
  6. Categories
  7. Promotional Banners
Annotation
Based on Accessibility and Screenreader’s format it is always recommended to have the name of the current website/anything that relates to the current website on top as first time, using links that will redirect users to other websites right off the bat will cause UX issues if the user is using screen reader.
The old version of the header:
UX Pain Points:
  • 4 levels/row
  • Categories are hidden in two different dropdown menus
  • No proper hierarchy of information
  • Redirecting users to a different platform right at the first level/row
  • 2 break points only
CSA Store old Header 1
The modified version of the header during summer of 2023:
UX Pain Points:
  • Categories are hidden in two different dropdown menus
  • No proper hierarchy of information
  • Redirecting users to a different platform right at the first level/row 
  • 2 break points only
CSA Store old Header 2
An effective top navigation menu follows established usability patterns to enhance the user experience. Key considerations include:
 
  • Search Bar: A prominently placed search bar is essential for helping users quickly locate the products or items they need.
  • Row Quantity: The number of rows typically ranges from one to three.
  • Search Placement: The search bar is commonly positioned in the second row.
  • Logo Placement: The logo is generally located on the left side of the second row.
  • Categories: Categories are usually displayed in the third row for easy navigation.
  • Alerts: Alerts are often positioned as the fourth row; however, some websites prioritize alerts by displaying them at the very top of the page in the first row.
Nav Rows
Explore:
Options
Finalizing Explore:
Breakpoint 1
Breakpoint 2
Breakpoint 3
Breakpoint 4
Breakpoint 5
Apply:

Once the new component is applied on the main design, it is ready for development and lunching the new look on the main website during the next sprint.
 
  • The key features of the new header are:
  • Categorizing the browse options in an efficient way
  • Allocating larger space for the search bar to further emphasizing on it.
  • keeping the look less crowd and busy for easier navigation.
  • Following the grid and consistent with the rest of the platform.
Header Apply
Next Steps:
 
  • Discussing the new updates and new design approaches with Stakeholders
  • Developing the documentation based on the new design
  • Establish a timeline on implementation on the website and on the current designs.
  • Applying the new component to all of the current designs (Live versions and under development ones)

Currently over 10 digital platforms within the organization are under development using the new components and following the guidelines noted on design system documentation.

All the components are being tested every months to ensure the functionality is still correct. The components get updated every sprint based on the new findings through multiple research channels.

Please don't hesitate to reach out; I'd be happy to answer any questions you might have.

bottom of page