Supercharging consistency and speed across digital platforms
Project Result
Reduction in Development Time for New Features
Reduction in Design Time for New Features
Reduction in Global Design Updates
Problem Statement
As Shipserv was growing and scaling rapidly with an expanding suite of digital products, maintaining a consistent user experience was becoming increasingly challenging.
Inconsistent design elements across our digital products had fragmented user experience and prolonged development. We required a comprehensive design system to unify guidelines, components, and documentation, streamlining processes, boosting efficiency, and ensuring brand consistency across platforms.
We faced challenges due to the lack of modern, semantic components, leading to inconsistent UIs and inefficient development. Implementing a comprehensive design system will ensure consistency, improve efficiency, and streamline onboarding for developers.
Goals and Objectives:
Consistency in Design
The primary objective was to establish a unified design system that would ensure consistency, improve collaboration, and accelerate the design and development.
Proper Documentation
Providing proper documentation support for the designers, engineers, developers, product managers, and other stakeholders.
Design and Development
Ensure accessibility and inclusivity by meeting the design WCAG standards and doing QA for components.
Maintaining WCAG and QA
Selecting proper tools for design and development in order to improve collaboration.
Visual Language
As Shipserv was growing and scaling rapidly with an expanding suite of digital products, maintaining a consistent user experience was becoming increasingly challenging.
Inconsistent design elements across our digital products had fragmented user experience and prolonged development. We required a comprehensive design system to unify guidelines, components, and documentation, streamlining processes, boosting efficiency, and ensuring brand consistency across platforms.
We faced challenges due to the lack of modern, semantic components, leading to inconsistent UIs and inefficient development. Implementing a comprehensive design system will ensure consistency, improve efficiency, and streamline onboarding for developers.
Problem Statement
As Shipserv was growing and scaling rapidly with an expanding suite of digital products, maintaining a consistent user experience was becoming increasingly challenging.
Inconsistent design elements across our digital products had fragmented user experience and prolonged development. We required a comprehensive design system to unify guidelines, components, and documentation, streamlining processes, boosting efficiency, and ensuring brand consistency across platforms.
We faced challenges due to the lack of modern, semantic components, leading to inconsistent UIs and inefficient development. Implementing a comprehensive design system will ensure consistency, improve efficiency, and streamline onboarding for developers.
Designing the Interface
Based on extensive user testing of low-fidelity solutions, we designed the solution’s UI.
TOOL INTEGRATIONS
Figma
Choosing Figma has transformed our design system with its real-time collaboration and cloud-based accessibility.
Component based architecture
Design and Prototyping
Easy developer handoffs
Consistency across multiple projects.
TOOL INTEGRATIONS
Storybook
Choosing Storybook for our design system has revolutionized our development process by providing an isolated environment for building and testing UI components.
Robust documentation.
Interactive playgrounds designers and developers.
Enables easy collaboration and quick iteration.
Setting up Tokens
Design tokens, which are variables that store design decisions like color values, typography, and spacing. This helps in maintaining consistency and easily updating global styles.
TOKEN STRUCTURE
Colour Tokens
Establish a set of standard color values with meaningful names that reflect their purpose (e.g., primary, secondary, background, text-primary, text-secondary).
Set up color tokens with proper naming conventions.
Use color tokens everywhere, with their proper usage defined.
Maintain colors for the UI as per brand guidelines.
TOKEN STRUCTURE
Spacing Tokens
By defining and applying standardized spacing values, teams can ensure that their UI elements are spaced appropriately, creating a visually harmonious and functional interface.
Define a consistent scale for spacing tokens, such as 4px, 6px, 8px, 12px, etc. This scale helps create a rhythm and hierarchy within the design. Examples: spacing-xs, spacing-sm, spacing-md, spacing-lg, spacing-xl.
TOKEN STRUCTURE
Typography Tokens
Typography tokens are standardized values that define the properties of text elements, such as font size, weight, line height, and letter spacing.
Define a set of typography styles for different text elements (e.g., headings, body text, captions). Examples of typography tokens might include font-size, font-weight, line-height, and letter-spacing.
Font Family: Lato
Checking for WCAG Compliance
Ensuring WCAG compliance in component design is essential for inclusivity, providing equal access to all users, including those with disabilities. It helps meet legal requirements, reducing the risk of lawsuits and enhancing your brand's reputation. Accessibility leads to better usability, increased customer satisfaction, and a broader audience reach.
Status
We achieved an exceptionally
high compliance status.
Accessibility Score
We are 90% + Compliant with WCAG 2.1 AA!
Lawsuit Risk
We have minimal exposure to
accessibility-related lawsuits.
Unification of the app's look and feel
Creating and organizing components in a design system involves defining reusable UI elements and systematically arranging them to ensure consistency, efficiency, and scalability in design and development workflows.
Modular and Reusable Components
Reusable and modular components are UI elements designed to be used multiple times across different parts of a project without needing modification.
Consistency: promotes a unified look and feel across different parts of an application or multiple applications.
Scalability: the ability to scale the application or design system by adding new components or updating existing ones without disrupting the overall design.
Naming Conventions and Semantics
Implementing clear and consistent naming conventions and semantics is crucial for the success of a design system. Here’s a structured approach to naming conventions and semantics that can be followed:
IMPLEMENTATION OF DESIGN SYSTEM
Color Naming
Functional Naming: Name colors based on their function rather than their hue. Examples:
‘color-primary’
‘color-secondary’
‘color-accent’
Semantic Naming: Name colors according to their use in the UI. Examples:
‘color-success’
‘color-error’
‘color-warning’
IMPLEMENTATION OF DESIGN SYSTEM
Icon Naming
Name icons based on their function or appearance.
‘icon-search’
‘icon-close’
‘icon-user’
IMPLEMENTATION OF DESIGN SYSTEM
Component Naming
Atomic Design Approach:
Atoms: Basic building blocks like buttons, inputs, labels. Example:
‘btn-primary’
‘input-text’
‘label-default’
Molecules: Combinations of atoms like form groups, navigation items. Example:
‘form-group-login’
‘nav-item-link’
Organisms: More complex components like headers, footers, product cards. Example:
‘header-main’
‘footer-basic’
‘card-product’
Templates: Page-level structures that include organisms. Example:
‘template-homepage’
‘template-dashboard’
Pages: Specific instances of templates with real content. Example:
‘page-home’
‘page-about-us’
State Naming
Naming conventions for UI states are standardized names used to describe different states of UI elements (such as buttons, inputs, and cards) within a design system.
‘is-active’
‘is-disabled’
‘is-hidden’
‘is-loading’
CSS Naming Conventions
BEM: Provides a structured way to create reusable and modular components, ensuring a consistent approach across a project.
‘button-primary--primary’
‘card--highlighted’
‘navbar__link--active’
Implementation of the Design System
Based on extensive user testing of low-fidelity solutions, we designed the solution’s UI.
DOCUMENTATION
Components Properties
Displaying all possible variants of the component (e.g., different sizes, styles, states like hover, active, disabled).
DOCUMENTATION
Components Properties
Displaying all possible variants of the component (e.g., different sizes, styles, states like hover, active, disabled).
DOCUMENTATION
Components Properties
Displaying all possible variants of the component (e.g., different sizes, styles, states like hover, active, disabled).
DOCUMENTATION
Components Properties
Displaying all possible variants of the component (e.g., different sizes, styles, states like hover, active, disabled).
DOCUMENTATION
Components Properties
Displaying all possible variants of the component (e.g., different sizes, styles, states like hover, active, disabled).
DOCUMENTATION
Anatomy
Highlighting the key elements that make up the component (e.g., button text, icon, padding).
DOCUMENTATION
Usage Guidelines
Including detailed guidelines on how to use the component, including best practices and any constraints.
DOCUMENTATION
Code Snippets
Provide code snippets or links to code repositories where developers can find the component's implementation.
IMPLEMENTATION OF DESIGN SYSTEM
Component Naming
Atomic Design Approach:
Atoms: Basic building blocks like buttons, inputs, labels. Example:
‘btn-primary’
‘input-text’
‘label-default’
Molecules: Combinations of atoms like form groups, navigation items. Example:
‘form-group-login’
‘nav-item-link’
Organisms: More complex components like headers, footers, product cards. Example:
‘header-main’
‘footer-basic’
‘card-product’
Templates: Page-level structures that include organisms. Example:
‘template-homepage’
‘template-dashboard’
Pages: Specific instances of templates with real content. Example:
‘page-home’
‘page-about-us’
IMPLEMENTATION OF DESIGN SYSTEM
Component Naming
Atomic Design Approach:
Atoms: Basic building blocks like buttons, inputs, labels. Example:
‘btn-primary’
‘input-text’
‘label-default’
Molecules: Combinations of atoms like form groups, navigation items. Example:
‘form-group-login’
‘nav-item-link’
Organisms: More complex components like headers, footers, product cards. Example:
‘header-main’
‘footer-basic’
‘card-product’
Templates: Page-level structures that include organisms. Example:
‘template-homepage’
‘template-dashboard’
Pages: Specific instances of templates with real content. Example:
‘page-home’
‘page-about-us’
IMPLEMENTATION OF DESIGN SYSTEM
Component Naming
Atomic Design Approach:
Atoms: Basic building blocks like buttons, inputs, labels. Example:
‘btn-primary’
‘input-text’
‘label-default’
Molecules: Combinations of atoms like form groups, navigation items. Example:
‘form-group-login’
‘nav-item-link’
Organisms: More complex components like headers, footers, product cards. Example:
‘header-main’
‘footer-basic’
‘card-product’
Templates: Page-level structures that include organisms. Example:
‘template-homepage’
‘template-dashboard’
Pages: Specific instances of templates with real content. Example:
‘page-home’
‘page-about-us’
IMPLEMENTATION OF DESIGN SYSTEM
Component Naming
Atomic Design Approach:
Atoms: Basic building blocks like buttons, inputs, labels. Example:
‘btn-primary’
‘input-text’
‘label-default’
Molecules: Combinations of atoms like form groups, navigation items. Example:
‘form-group-login’
‘nav-item-link’
Organisms: More complex components like headers, footers, product cards. Example:
‘header-main’
‘footer-basic’
‘card-product’
Templates: Page-level structures that include organisms. Example:
‘template-homepage’
‘template-dashboard’
Pages: Specific instances of templates with real content. Example:
‘page-home’
‘page-about-us’
IMPLEMENTATION OF DESIGN SYSTEM
State Naming
Naming conventions for UI states are standardized names used to describe different states of UI elements (such as buttons, inputs, and cards) within a design system.
‘is-active’
‘is-disabled’
‘is-hidden’
‘is-loading
IMPLEMENTATION OF DESIGN SYSTEM
CSS Naming Conventions
BEM: Provides a structured way to create reusable and modular components, ensuring a consistent approach across a project.
‘button-primary--primary’
‘card--highlighted’
‘navbar__link--active’
Results and Benefits
Post-implementation, Shipserv saw a 30% reduction in design time and a significant improvement in user satisfaction due to consistent UI elements.
Design Time Reduction
Finding: Designers previously spent an average of 5 hours creating and iterating on new UI components.
Result: With reusable components, this time was cut down to 1.5 hours.
Impact: 70% reduction in design time for new features.
Development Speed
Finding: Developers took 8 hours on average to build and style new components from scratch.
Result: Time reduced to 2 hours using pre-defined design system components.
Impact: 75% reduction in development time for new features.
Update Efficiency
Impact: 70% reduction in design time for new features.
Result: With reusable components, this time was cut down to 1.5 hours.
Finding: Designers previously spent an average of 5 hours creating and iterating on new UI components.
Conclusion
The new design system has become a cornerstone of Shipserv's product development process, ensuring a cohesive and efficient design approach moving forward. Implementing a design system has improved team velocity by streamlining design and development processes, resulting in quicker product launches. Its standardized components and accessibility considerations ensure faster iterations and compliance, enhancing efficiency and reducing time-to-market.
