Logility: Assemble Design System (ADS)
My Role: UX/UI Designer and Design System Lead
Project Overview
As the Design System Lead, I was responsible for the creation, documentation, and governance of a scalable and accessible design system used across multiple product teams. The goal of the Assemble Design System (ADS), the first in-house design system for Logility's supply chain software suite, was to make web application development fast and efficient while maintaining a high level of consistency, quality, and accessibility. The design system consisted of working code, design tools, resources and guidelines to craft positive user experiences and build modern supply chain digital products. ​
​
Features of Assemble Design System:
-
A consistent design language for crafting enterprise-class applications
-
Design tokens apply design decisions beyond just the base components
-
Design kit in Figma to layout screens and create prototypes
-
High-quality components with documentation and guidelines
-
Set of 200+ icons
-
Themes for user interface elements
Ecosystem
A software ecosystem is a set of actors (e.g. software developers, designers) interacting in a shared software market to satisfy consumers' demands. The following ecosystem diagram was created to show how different actors work together in developing, publishing, and consuming the Assemble Design System.
-
Producers: Assemble core team members, responsible for creating and maintaining the Assemble Design System.
-
Consumers: End users who will consume the Assemble Design System to create web applications.
Deliverables
The Assemble Design System has three packages that need to be coordinated to maintain consistency between design and actual implementation. I was responsible for creating and maintaining the Figma UI Kit and documentation for designers in Storybook:
-
Figma UI Kit: A collection of Assemble components that allow designers to easily design user interfaces.
-
npm Package: Collection of Assemble components code that easily allows developers to create user interfaces.
-
Storybook: Documentation platform for the Assemble Design System. Both designers and developers use it for showcasing components and as a playground.
Problem and Opportunity
Across the company, applications varied significantly in style, color schemes, and component behavior—ranging from buttons and notifications to icons and forms. Much of the software looked outdated and was often difficult to navigate or understand. These inconsistencies led to challenges for product teams, including fragmented UI experiences, inefficient handoffs, and repeated work.
How can I create a simple yet impactful design system that is easy for designers and developers to use?
A centralized system would streamline design-to-dev workflows and unify brand experience with the following benefits:​
A central place to see all components, patterns and styles.
Redesign and manage new changes for projects more efficiently
Designers can spend less time on visual tweaks and more on solving complex problems, ensuring visual and functional consistency.
Quickly replicate designs using pre-made components and elements
Avoid reinventing the wheel and eliminate inconsistencies
Colors
Colors define a brands identity, draws in users, and convey its message. A good design system keeps things consistent while allowing flexibility. With dynamic color management, changing a primary color in the design system automatically updates all related UI elements.
Accessibility was a key consideration in the development of the color palette. I utilized contrast checkers to ensure that all text and interactive elements meet WCAG standards. Adjustments were made to ensure that users with color vision deficiencies can easily navigate and interact with our platform.
Extended/Highlight Colors
Typography
I chose Inter font for the design system because it is designed for excellent readability, it comes in a wide range of weights and styles, it is optimized for digital use and it features clear distinctions between commonly confused characters which results in better accessibility.​Color tokens can be applied to typography such as text-color, text-color-secondary, or text-primary.
Grid and Spacing
I developed a grid system to provide a consistent framework across all pages and components, ensuring a cohesive look and feel. I wanted it to be flexible, allowing designers to easily adapt to various content types and layouts without compromising the design integrity. For Assemble, I focused on balance, alignment, and visual hierarchy. Having a grid and spacing system streamlines the design process, making it easier to create and maintain layouts. It also enhances usability for end-users by providing a clean, organized, and intuitive interface.
Sample Components
I created a comprehensive set of reusable UI components as part of the design system, including buttons, form inputs, dropdowns, modals, and alert banners. Each component was designed with accessibility, responsiveness, and consistency in mind, ensuring seamless use across multiple products. I worked closely with developers to align component behavior with code implementations, and documented everything in a shared Figma library. These components significantly reduced design-developer friction, improved UI consistency, and helped product teams speed up their workflows.
Designer Guidelines
I wrote and created visuals for the designer guidelines in Storybook. The goal was to establish fundamental design principles and patterns to provide a common language, a consistent look, and a reliable user experience when designing applications within the Logility brand.
Design guidelines included:
Design Principles
Feedback, Contribution
and Support
Default Libraries
Contrast & Accessibility
Elevation
Hierarchy, Negative Space
and Spatial Relationships
Design Tokens
Additional Guidelines
Governance Model
Customer feedback plays a pivotal role in the continuous improvement and evolution of the Assemble Design System. By actively engaging with our two primary personas, developers and designers, and incorporating their feedback, the ADS team can ensure that the system remains relevant, effective, and aligned with the needs of the user.
​
The success of the design system relies on effective adoption and integration into the organization's workflow. I therefore helped to develop a governance model that streamlines collaboration and engagement, to ensure ADS is seamlessly integrated into the design and development process. Using the governance model consumers can engage with the ADS team in the following ways:
-
Submitting feature requests: Propose new features or enhancements for ADS
-
Reporting bugs: Identify and report any issues or defects encountered while using ADS
-
Seeking clarification: Ask questions about specific aspects of ADS or its usage guidelines
-
Providing general feedback: Share thoughts, suggestions, and insights regarding ADS
-
Requesting consultation: Engage the ADS team for expert advice and guidance on specific design or development challenges
-
Contributing to ADS development: Actively participate in the evolution of ADS by proposing new components, patterns, or guidelines
Engage the ADS Team > Ask a Question
If the user has a question for the ADS team they will be directed to
a form that captures who raised the request, an open field to type their question, the ability to add participants and the ability to attach files or screenshots.
Engage the ADS Team > Consult with ADS
If the user wants to consult with the ADS team they will be directed to a form that captures who raised the request, an open field to tell how they want to engage with the team, a dropdown to indicate priority, the ability to add a due date, the ability to add participants, the ability to attach files or screenshots, and an optional field to list the associated Jira project or Logility application.
Engage the ADS Team > Provide Feedback
If the user has feedback for the ADS team they will be directed to
a form that captures who raised the request, an open field to type their feedback, the ability to add participants and the ability to attach files or screenshots.
Incident/Feature/Enhancement > Report Issues
If the user wants to report an incident to the ADS team they will be directed to a form that captures who raised the request, an open field to title the bug, indicate the version number, the ability to add additional details, a dropdown to indicate priority, the ability to add a due date, the ability to add participants, and the ability to attach files or screenshots.
Incident/Feature/Enhancement > Request Enhancements
If the user wants to request enhancements to the ADS team they will be directed to a form that captures who raised the request, an open field to title the enhancement, a field to indicate the version number, the ability to add additional details, a dropdown to indicate priority, the ability to add a due date, the ability to add participants, the ability to attach files or screenshots, and an optional field to list the associated Jira project or Logility application.
Incident/Feature/Enhancement > New Feature Request
If the user wants to request a new feature from the ADS team they will be directed to a form that captures who raised the request, an open field to title the enhancement, the ability to add additional details, a dropdown to indicate priority, the ability to add a due date, the ability to add participants, the ability to attach files or screenshots, and an optional field to list the associated Jira project or Logility application.
Contribute to ADS >Contribute
If the user wants to contribute a new feature to the ADS team they will be directed to a form that captures who raised the request, an open field to title the contribution, the ability to add additional details, the ability to add participants, and the ability to attach files or screenshots.
Usage and Feedback Survey
Several months after the release of the design system, I created a survey for designers, developers and product managers to obtain general feedback regarding the design system.​ Sample questions and results were as follows:
How familiar are you with the design system?
How often do you use the design system in your daily work?
Are you familiar with the design system governance model (i.e. how to submit feedback, contribute, request new components, and/or report bugs or issues)?
Are you familiar with the documentation in Storybook and if so, do you find it useful?
What is your role?
Do you know that you could contribute to Assemble Design System?
The design system effectively facilitates collaboration among the product team.
The design system effectively facilitates communication between design and development teams.
The design system effectively contributes to maintaining design consistency across various projects or features.
The design system effectively aligns project management workflows with design processes.
The design system allows you to monitor and manage design changes effectively.
The design system helps support the design-to-code process.
The design system supports the goals and objectives of the organization.
The design system effectively supports the scalability of products.
​The data showed that the design system was being used and that most users are familiar with the governance model. One hundred percent of users indicated that ADS facilitates collaboration and communication, helps to maintain consistency, and supports the goals and objectives of the organization. Based on these survey results, the development and implementation of the Assemble Design System has positively impacted the team's overall productivity.
​
It should be noted that a third of users did indicate they would like more components added, while a fifth of users said that they feel like they could benefit from additional training.
Actual designs created by Logility designers using ADS
Overall, the feedback from the designers and developers was positive. Designers said the design system accelerated the design process, aided in consistency from project to project and made the hand off process more seamless. Developers also agreed that ADS streamlined the development process, minimized code mistakes and cause less design to development issues.
Looking forward: ​
It is important to remember the design system doesn't inherently make the user experience better. It's the constant evolution of the design system centered around solving the user's pains that improves the user experience.
