Adobe XD
Confluence
GitLab
Designer
Developer
Establish and maintain a design system considering existing technical constraints for a set of internal tools for modeling, simulation, and analysis applications.
A design system containing style guidelines, design tokens, and design and developer documentation.
Upon joining the Tools Team in August 2023, I learned that the number of products and staff was going to rapidly grow. Yet, there was no existing design system for the project. To help the team scale design and development, this was the perfect opportunity to introduce and establish a new design system for the team.
As the sole Product Designer, it would be too costly to create the design system from scratch. Thus, my approach was to adopt and adapt existing design systems to:
Lower costs
Implement quickly
Provide some customization
Competitor Matrix for Existing Design SystemsThis matrix summarizes the main reasons why these existing designs systems were selected as major references when creating the new design system for the Tools Team.
The project consisted of several internal tools used by analysts and engineers. Based on context, strategy, and competitor factors, I decided to reference Material Design, Carbon Design System, and Atlassian Design System for this project.
I first focused on core elements such as Color, Typography, and Icons. After building the foundations, I created style guidelines for common UI components and patterns used. Design tokens were also incorporated to help streamline building, maintaining, and scaling the tools.
RoadmapThis roadmap illustrates the overall design strategy for creating the new design system, split into 4 main stages: Foundations, Design Tokens, Components, and Design Patterns.
“Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.”
- Salesforce
Design DecisionsKey design decisions and factors are summarized in this matrix for Color, Typography, and Icons.
In collaboration with the Senior Developer, we addressed technical constraints and iterated on design patterns, ensuring they were compatible with the C++ GUI library our team used. We also created and maintained design documentation, providing both style and code guidelines for the team to reference within Confluence and Gitlab.
Through these collaboration efforts, we were able to successfully publish and deploy design system foundations, components, and design patterns for our team members to use.
The new design system has significantly improved UI consistencies across multiple internal tools, streamlining the design-to-development process. Although still a work in progress, these efforts have marked a substantial step forward in both the project and the team’s design maturity.
In the future, I would love for this design system to eventually have a more established design playbook as the project continues to grow.
The Tools Design System now boasts a comprehensive set of style guidelines, design tokens, and design documentation.
90+ colors, 14 text styles, & 1,390 icons
100+ design tokens established
15+ design components and patterns
"Now that things have been setup, it's helpful to have a standard to fall back on and to help with keeping the product consistent." "The current design system is really intuitive which I enjoy. I can look at the style guidelines and then go straight to the code guidelines to find which component I need to implement...in general, the design system has made my coding time for UI elements a lot shorter!""The style guidelines have been helpful for having a resource I can pull from to refer to and speed up the process of work...The coding guidelines are helpful and keep everything standardized and easy to refer to across projects."What I learned:
Creating a design system doesn’t have to start entirely from scratch. It’s okay to inspect, adopt, and/or adapt existing systems to provide what’s best for the project based on its time, budget, and needs.
Collaborating with developers early on is crucial to a smoother design-to-development process.
What's next?
The next goals would include incorporating style guidelines for data visualizations, as data analysis is significant within these applications, and improving the overall design and dev documentation for our users (designers and developers).
