MSC Design System

Introduction

MSC is a prominent e-commerce platform specializing in B2B transactions and serving as one of the largest industrial equipment distributors in the United States. MSC caters to a diverse range of user types, including:

1. Individual Self-register Users: These are individual users who register themselves on the platform.

2. Business Users: MSC serves businesses of varying sizes, categorized as follows:

   • Small Businesses: Companies with annual revenues ranging from $50,000 to $200,000.

   • Medium Businesses: Companies with annual revenues ranging from $500,000 to $1.5 million.

   • Large Businesses: Companies with annual revenues exceeding $5 million.

3. Government Users: MSC also provides its services to various government entities

The Process

The process followed when solving this problem consisted of 3 phases, below is an overview of the latter:

Research

Based on the research and interviews conducted with various stakeholders, it's evident that there were significant issues with the old version of the product and the associated design system. The key findings and decisions include:

1. Duplicated Components: The system contained duplicated components at the application level. This redundancy likely caused confusion and inefficiencies in development.

2. Stagnation in Pattern Library Enhancement: There was a noticeable stagnation in the enhancement process of the pattern library. This means that the design system was not evolving or improving as it should have been.

3. Limited Usability: The usability of the design system was limited and primarily confined to the documentation level. Stakeholders were not using it for actual design and development work.

4. Documentation-Centric Use: Stakeholders were using the design system primarily for its documentation, indicating that it wasn't fulfilling its potential as a comprehensive design and development resource.

In response to these findings, the following actions were decided upon:

• Identification of Design Issues: A systematic effort to identify and document all design issues in the product. This will help in pinpointing areas that need improvement.

• Learning from Successful Design Systems: The team decided to learn from common standards and principles that drive successful design systems. This knowledge can inform the development of an improved design system that addresses the identified issues.

These steps indicate a proactive approach to address the shortcomings of the old product version and to create a more effective design system moving forward. By learning from best practices and resolving design issues, the team aims to enhance both the usability and functionality of the product.

Visual analysis and the key findings from interviews with front-end developers provide valuable insights into the challenges and goals of design system.

Key Findings:

1. Inconsistency: Our product displayed numerous inconsistencies, including variations in colors, components, and guidelines. These inconsistencies have the potential to negatively impact the overall user experience and our brand image.

2. Redundancy: The absence of a component library led to repetitive design work for our designers when creating product screens. This issue extended to our developers, who had to invest extra time and effort in building new components for each project.

Benchmark Analysis:

In our benchmark analysis, we conducted an in-depth examination of documentation and components within popular design systems, including Google's Material Design System, Atlassian's Design System, and BM's guide for using gradient colors. This analysis revealed that these well-established design systems share several common principles. Based on our specific needs, we identified three core principles to serve as the foundation of our own design system:

1. Accessibility: Recognizing the diverse user base, which includes individuals with visual, auditory, and motor impairments, we prioritize creating inclusive experiences.

2. Flexibility: Our design system will emphasize modularity to ensure maximum flexibility in execution. Components will be designed to seamlessly integrate with one another, allowing for versatile combinations that cater to user needs across various platforms.

3. Communication: We recognize the importance of maintaining a consistent structure within our design system, particularly in how textual elements and feedback messages are formed. This commitment to consistency will enhance clarity and cohesiveness in our communication.

By focusing on these core principles, we are on track to develop a more cohesive and user-friendly design system that addresses the identified challenges while aligning with industry best practices. This approach will help us create a consistent, efficient, and accessible product experience for our users.

User Research Update

We regularly participate in weekly meetings with our user researchers to remain informed about the valuable user feedback we receive from various sources, including customer service reports, surveys, and more.

One recurring and prominent theme in user feedback pertains to the user interface (UI). Users have consistently expressed their concerns about the outdated visual aspects of our products.

Additionally, our marketing team has highlighted branding as an area requiring attention. They have identified a visual lack of branding on our website, and we are actively working to address this issue.

Definition

To establish a structured and comprehensive set of guidelines for our components, we initiated meetings with our developers. Our goal was to devise a system where individual elements could seamlessly coexist within a larger framework. This approach led us to adopt the Atomic Design methodology.

Atomic Design

As a team rooted in Moroccan culture, we hold great pride in our traditions. One iconic aspect of our culture is the intricate tilework, known for its artistry and precision. Constructing a wall of traditional tiles begins with assembling smaller and smaller pieces, creating a stunning mosaic. Inspired by this craftsmanship, we have named our Design Language System "Mosaic."

Building the Structure

To organize and structure our components effectively, we employed Notion as a collaborative tool. We created a comprehensive table listing all the components utilized across our platforms and arranged them within the initial framework of atoms, molecules, and organisms.

We began with atoms, the foundational building blocks of our design system. This included focusing on key elements such as typography, colors, grids, and spacing.

In the process of component creation, we ensured that each element met specific criteria:

Accessibility: We conducted thorough evaluations of text and background color combinations, aligning with the recommended ratios from the Web Content Accessibility Guidelines (WCAG). Prioritizing high color contrast not only aids users with color blindness but also enhances overall usability by establishing a clear visual hierarchy. Additionally, we incorporated bold characters in Calls to Action (CTAs) and optimized character spacing to improve accessibility.

Intuitiveness: Our design approach adheres to adaptability, ensuring that our components are platform-friendly and responsive to various screen sizes. This adaptability guarantees an intuitive user experience across devices.

Aesthetics: Recognizing that MSC's website users engage with our platform frequently, we aimed for a clean and minimalistic design. We incorporated rounded corners, vibrant color schemes, and subtle shadows to create an aesthetically pleasing and user-friendly interface.

Grids & Breakpoints: We meticulously considered grid systems and breakpoints to establish a structured layout that enhances the overall user experience.

By adhering to these principles and systematically organizing our components, we aim to create a design system that is not only visually appealing but also highly accessible and user-centric, catering to the diverse needs of our users across different platforms and devices.

We learned that our mostly our users use our website on desktop from 1920 to 1024 screens

We've adopted a systematic approach to building our components and page layouts, utilizing a 4pt base grid. We combine this base grid with Flex Boxes and Flex Grids to create flexible and responsive designs.

In addition, we have consulted with our development team regarding the utilization of TailwindCSS and the establishment of breakpoints. This collaboration ensures that our design system seamlessly integrates with the development process, allowing for efficient and consistent implementation across our platforms.

Spacing

Buttons

Other Components

After laying down the foundational elements, we turned our attention to the backlog of components that had been identified and prioritized earlier in the project. This backlog served as our roadmap for the systematic delivery of additional components.

What made this design system engagement unique was our collaborative approach involving workstream designers. Instead of relying solely on a centralized process where I would create, review, and approve each component, we empowered our designers with clear foundations and guidelines. This enabled them to proactively contribute by creating new patterns for the library. These newly developed elements could then undergo review, be integrated into the library, and subsequently shared with the broader team. This collaborative effort streamlined the design system development and ensured a more dynamic and efficient process.

Header

Old design

New Design

Sharing & Publishing

Initially, our plan included the creation of a comprehensive documentation site and codebase to complement our design system. However, due to budget constraints, we had to focus on design assets exclusively. While this presented a limitation in terms of not achieving a fully functional design system, it allowed us to refine the structure of design files, sharing practices, and the design system curriculum.

We shared the system using Figma, a platform that caters to both design and development needs.

A crucial aspect of this sharing process involved ensuring that all Figma components were correctly configured and organized. This meticulous setup is essential for the effective utilization of the design system.

The journey of developing our design system has been filled with challenges, but it has yielded numerous positive outcomes for our company across various dimensions.

For Us:

1. Development: Simplifying the lives of our developers by establishing a common language with the design team. This streamlined communication allows us to focus on features rather than dealing with low-level UI elements like color and spacing values, small components, interactions, and states.

2. Design: Equipping our designers with a readily accessible library of components has transformed the process of creating high-fidelity interfaces. What used to take days can now be accomplished in just a matter of hours.

3. Experimentation: The design system has opened up opportunities for rapid prototyping, enabling us to explore more ideas, evaluate hypotheses swiftly, and create multiple variations for A/B testing.

For the User:

While the above points primarily benefit our internal processes, the ultimate impact is evident in the enhancement of our user experience. Our ongoing commitment to refining and utilizing the design system translates into improved experiences for our users, resulting in a more user-friendly and efficient platform.