N O X F O L I O

Loading

Let,s talk

Design System Library

Creating a design system library and its successful integration into the organization's design and development workflows

Why Design System

Maintaining consistency in the rapidly evolving landscape of designing and developing digital products is a significant challenge. Design systems have emerged as a solution to address this challenge. These systems provide a unified set of guidelines, components, and patterns to streamline the creation of user interfaces. S&P products require assistance creating, implementing, and maintaining a comprehensive design system library.

Project Duration – 6 Months   |  Team Size – 2 UX Designers

My Role

I facilitated a four-month intensive collaboration with the UX Team. Our goal was to create and maintain a design system component library. We aimed to have a centralized repository to standardize UI components and design guidelines for the rating desktop products. I also conducted a design system audit with the design team to gather feedback.

Design System Goals

  • Consistency
  • Establish and enforce design guidelines to ensure a consistent visual language. Define the document's core design principles to guide decision-making.
  • Collaboration
  • Facilitate collaboration between designers, developers, and other stakeholders. Implement a version control system to manage design system updates and changes.
  • Scalability
  • Design the system with scalability, accommodating growth and evolving requirements. Regularly update the design system to incorporate new design patterns and technologies.
  • Documentation
  • Create comprehensive and up-to-date documentation for design components and patterns. Ensure clear guidelines on customization and usage to minimize implementation errors.

Design System Approach

I’m adopting Atomic Design System – a method by Brad Frost. It promotes consistency, scalability, and reusability across different interfaces and platforms. This approach enables easy maintenance and updates of different system parts without affecting the entire design.

Use case - Modal Window

A modal window is an element that sits on top of an application’s main window. It creates a mode that turns off the main window but keeps it visible with the modal window in front. Users must interact with the modal window before returning to the parent application.

All models contain a header, footer, and main content area. The main content area can be used for confirmations, forms, tables, searches, file selections, etc.

Always contains

  • A header describing the purpose of the modal
  • The header includes the title and close icon
  • A footer consisting of at least a tertiary button to close or cancel the modal and a primary action button

Modal heading and close icon must be vertically centered

Modals are elevated above the user’s existing screen

Displayed with a modal shade, turning off any other action from being performed until the modal window is closed

  • Dependent on platform use; for example, Modals displayed in Word do not have a modal shade

Keyboard Functionality

  • Must have a keyboard-accessible action to open the modal
  • Once opened, the keyboard focus must be in the dialogue and should be ‘trapped’ inside until the modal is closed

Maximum size of the modal is 1200W X 640H px, and minimum size of the modal is 500W X 215H px

The scrollbar will appear directly under the separator line and span the panel’s height. When scrolling, the Selected Header does not scroll out of view. Content should never be displayed behind the scrollbar.

The modal should be centered and aligned within the screen

Prompt Modals

Prompt modals should be used when a user selects to perform an action of which its consequences are more difficult to reverse, ie: document removals, closing tabs, leaving a screen without saving.

Checkbox Modals

Checkbox modals are used when there is more than one attestation the user needs to verify before continuing. The primary button will be disabled and only activated once all checkboxes are selected.

Form Input Modals

This modal is used when a user is required to fill in necessary information that is contextual to onscreen data. Modal fields should be adjusted accordingly.

Ability to Remove and Re-Order Selected Items

This modal is utilized for selecting multiple items. The selected panel provides the opportunity to re-order or remove selected items depending on individual requirements.

Size of Selection Panel

The selection panel should be 1/4 the size of the width of the modal. A 8px separator is required between the main content and the selected panel. The selection panel is located directly under the header, above the footer and is always positioned on the right.

Specs

Need to add content about specs and it’s purpose

Do and Don’t Examples

Need to add content about specs and it’s purpose

Do

Selected panel should be designed in a way where the scrollbar will not hide icons or text

Don’t

Scrollbar should not hide icons or text

Thank you

I appreciate you taking the time to look at my work. If you’re interested in taking part
or to learn more, please get in touch for further details.

mahender.uxdesigner@gmail.com    |  +1 (309) 242-0396