Olympus Design System
Sidlabs.net
Building a design system for Tradais Digital
Building a design system for Tradais Digital
Tradais Digital is a forward-thinking company developing ERP and SaaS solutions for diverse industries. To address design inconsistencies across its products and improve scalability, I spearheaded the creation of a unified design system. This project aimed to streamline workflows, enable rapid product development, and deliver a cohesive user experience.
Tradais Digital is a forward-thinking company developing ERP and SaaS solutions for diverse industries. To address design inconsistencies across its products and improve scalability, I spearheaded the creation of a unified design system. This project aimed to streamline workflows, enable rapid product development, and deliver a cohesive user experience.
Client
Tradais Digital
Year
2024
Category
Product Design
View Project
Problem
Problem
Tradais Digital, a company working on ERP and SaaS products, faced challenges maintaining consistent designs across its software. As the Product Designer, I proposed a unified design system to ensure consistency and speed up scalable product development. The company was also building an in-house platform to create new products, emphasizing the need for a reusable design foundation.
Tradais Digital, a company working on ERP and SaaS products, faced challenges maintaining consistent designs across its software. As the Product Designer, I proposed a unified design system to ensure consistency and speed up scalable product development. The company was also building an in-house platform to create new products, emphasizing the need for a reusable design foundation.
Tradais Digital, a company working on ERP and SaaS products, faced challenges maintaining consistent designs across its software. As the Product Designer, I proposed a unified design system to ensure consistency and speed up scalable product development. The company was also building an in-house platform to create new products, emphasizing the need for a reusable design foundation.
GOAL
GOAL
The primary goal of the design system was to enable the team to build and ship scalable products faster. This required creating a comprehensive system that streamlined workflows for both designers and developers.
The primary goal of the design system was to enable the team to build and ship scalable products faster. This required creating a comprehensive system that streamlined workflows for both designers and developers.
The primary goal of the design system was to enable the team to build and ship scalable products faster. This required creating a comprehensive system that streamlined workflows for both designers and developers.
Process
Process
Research and Planning: While I had foundational knowledge of component design, I supplemented this by researching articles and watching YouTube tutorials on design systems. I also referred to established design systems, including Atlassian, Carbon, and Atomize, to understand best practices and adapt them to our needs.
Research and Planning: While I had foundational knowledge of component design, I supplemented this by researching articles and watching YouTube tutorials on design systems. I also referred to established design systems, including Atlassian, Carbon, and Atomize, to understand best practices and adapt them to our needs.
Design and Development:
Colors: A defined color palette ensuring consistent branding and accessibility across all products. Shades were categorized for primary, secondary, and neutral use cases.
Typography: A hierarchy of font styles for headings, subheadings, and body text, ensuring readability and structure.
Icons: A unified icon library for common actions and features, promoting visual consistency.
Components: Reusable elements like buttons, toasts, banners, dialogs, list views, toggles, badges, calendars, and date pickers. These components were designed for adaptability and responsiveness.
Each element was documented with guidelines on usage to support developers and maintainers.
Design and Development:
Colors: A defined color palette ensuring consistent branding and accessibility across all products. Shades were categorized for primary, secondary, and neutral use cases.
Typography: A hierarchy of font styles for headings, subheadings, and body text, ensuring readability and structure.
Icons: A unified icon library for common actions and features, promoting visual consistency.
Components: Reusable elements like buttons, toasts, banners, dialogs, list views, toggles, badges, calendars, and date pickers. These components were designed for adaptability and responsiveness.
Each element was documented with guidelines on usage to support developers and maintainers.
Testing and Iteration Components were tested with potential users, and iterations were made based on feedback to ensure usability and relevance
Testing and Iteration Components were tested with potential users, and iterations were made based on feedback to ensure usability and relevance
IMPLEMENTATION
IMPLEMENTATION
The design system streamlined high-fidelity design for me as the designer and provided developers with a ready-to-use library, bridging the gap between design and development.
The design system streamlined high-fidelity design for me as the designer and provided developers with a ready-to-use library, bridging the gap between design and development.
The design system streamlined high-fidelity design for me as the designer and provided developers with a ready-to-use library, bridging the gap between design and development.
IMPACT
IMPACT
The design system reduced development timelines by offering pre-designed components and improved consistency across products, enhancing the user experience. Stakeholders appreciated its ability to simplify scaling and development.
The design system reduced development timelines by offering pre-designed components and improved consistency across products, enhancing the user experience. Stakeholders appreciated its ability to simplify scaling and development.
The design system reduced development timelines by offering pre-designed components and improved consistency across products, enhancing the user experience. Stakeholders appreciated its ability to simplify scaling and development.
What i learn
What i learn
Designing this system deepened my understanding of creating scalable and reusable design assets. I learned the importance of:
Collaboration between design and development for seamless implementation.
Balancing creativity with consistency to meet diverse requirements.
Iterating based on user feedback to refine designs.
Designing this system deepened my understanding of creating scalable and reusable design assets. I learned the importance of:
Collaboration between design and development for seamless implementation.
Balancing creativity with consistency to meet diverse requirements.
Iterating based on user feedback to refine designs.
Designing this system deepened my understanding of creating scalable and reusable design assets. I learned the importance of:
Collaboration between design and development for seamless implementation.
Balancing creativity with consistency to meet diverse requirements.
Iterating based on user feedback to refine designs.
More Work
More Work
More Work
More Work
More Work
More Work
