Design System for the B2B Commerce Global

About the project

OSF Digital is a global commerce and digital cloud transformation company, with expertise in enterprise CRM, CMS, OMS, connected commerce, online shop management and cloud application development.

Problem

The constant feedback made the development team consider the possibility of creating a design system, which can speed up the work process, improve communication between designers and engineers, and also enhance accessibility.

Goals

  • Connect global teams on a common design language
  • Best design practices
  • Consistency
  • Improve performance

Challenges

  • Accessibility
  • Speed up team workflow
  • Flexibility
  • Scalebility based on Salesforce solutions

Atomic Design as a Methodology

We adopt this methodology based on 5 stages that work together to create interface design systems that allow us best practices and solutions that fit our needs:

Atoms

Molecules

Organisms

Templates

Pages

Color Definitions

We used a color system of 10 tones (max.) on the grey scale (from neutral 10 to neutral 100), 1 primary color and 4 alert colors. All these tones have a logical gap between each other, to ensure good contrast and perfect accessibility.

Typography & Grid System

We introduced a typescale that was based on display headings, utility headings, paragraph styles, and supporting styles.

To facilitate the work of the FE’s we have added the classes to the style guide.

Icons, Spacings & Elevations

The Icons are simple, single-color glyphs that identify labels and actions across form factors. They can be paired with text or used alone.
They have no background shape.

Button Definition

Buttons are clickable items used to perform an action. Buttons should be used in situations where users might need to submit a form, begin a new task, trigger a new UI element to appear on the page, specify a new or next step in a process.

Color alone does not suffice when conveying the meaning of buttons. Ensure that the text you use in the button matches the meaning you are trying to convey via color. For example, if you use the destructive button to point out a potential warning, make sure the text communicates the same message.

Checkboxes

Checkboxes can be used as a single element or in a group. In a group the user can select one or multiple checkboxes at a time.

Radio Buttons

Radio buttons are shown in a group of two or more. The user can only select one radio button at a time.

Quantity Field

The quantity field is populated with the minimum order quantity by default.

Toggle

A checkable input that communicates if an option is true, false or indeterminate.

Dropdown

A dropdown menu is a compact way of displaying multiple choices.

Text Inputs

Text input allow users to enter text into a UI. They typically appear in forms and dialogs. On top of the text input a label can be displayed to inform users what information is requested for the text input. Every text input should have a label. Within the input field a placeholder text (e.g. name@mail.com) can be optional displayed to conveys additional guidance about the expected value.

An error state communicates a user or system mistake. Error messages are displayed below the input field, replacing helper text when applicable. The error message display an introduction to the user on how to fix it. Additionally an error icon is displayed to support accessibility, which is useful for colorblind users.

Log In & Sign Up

Cookie Modal Component

Header, Hero Banner, Quick Order, Grid Tile & Category Tile

Product Catalogue, Product Page, Cart & Checkout

User Journey

What’s next?

Conclusions: Although the Design System is a continuous work, this first phase of the project has allowed us to tests with users and collect feedback to iterate and improve the user experience, the language used for communication in the development team and the design of new features based on customer feedback.

Moving Forward: Improve and update components based on previously collected feedback, review documentation, and improve file organization for more flexibility between projects.

Feel free to explore the second part of this project where you can see how the design system grew to the point that it expanded for the company’s B2C team.