TRX Design System

The TRX Design System is Traxi’s first comprehensive framework, ensuring consistent branding and seamless design across all web and mobile products. By organizing components efficiently, it minimizes inconsistencies and enhances the overall user experience.

Role

UI Designer

Industry

Transportation, shuttle service, tech

Duration

3 months

a cell phone on a table
a cell phone on a table
a cell phone on a table

Unified branding across Traxi products

The TRX Design System is Traxi’s inaugural design framework aimed at ensuring consistent branding across all company products. By establishing a unified set of design standards, TRX significantly minimizes inconsistencies, fostering a cohesive user experience whether on web or mobile platforms.

Comprehensive framework for Web and Mobile

Designed to cater to both web and mobile environments, the TRX Design System encompasses a wide array of components meticulously organized to support various device interfaces. Each element is tailored with specific variations for desktop and mobile views, ensuring seamless adaptability and uniformity across all applications.

Streamlining complexity

Managing multiple design elements can be challenging, especially when dealing with numerous variations. For instance, CTA buttons presented a significant complexity due to their diverse sizes, colors, states, and use cases. To address this, TRX introduced a streamlined approach that prioritizes the most frequently adjusted attribute—size—while simplifying other variations by embedding clear identifiers within each component’s name. This method reduces unnecessary grouping and enhances clarity, making the design process more efficient and less error-prone.

Unified branding across Traxi products

The TRX Design System is Traxi’s inaugural design framework aimed at ensuring consistent branding across all company products. By establishing a unified set of design standards, TRX significantly minimizes inconsistencies, fostering a cohesive user experience whether on web or mobile platforms.

Comprehensive framework for Web and Mobile

Designed to cater to both web and mobile environments, the TRX Design System encompasses a wide array of components meticulously organized to support various device interfaces. Each element is tailored with specific variations for desktop and mobile views, ensuring seamless adaptability and uniformity across all applications.

Streamlining complexity

Managing multiple design elements can be challenging, especially when dealing with numerous variations. For instance, CTA buttons presented a significant complexity due to their diverse sizes, colors, states, and use cases. To address this, TRX introduced a streamlined approach that prioritizes the most frequently adjusted attribute—size—while simplifying other variations by embedding clear identifiers within each component’s name. This method reduces unnecessary grouping and enhances clarity, making the design process more efficient and less error-prone.

Enhancing efficiency and consistency

The implementation of the TRX Design System has dramatically improved workflow efficiency and reduced confusion among designers and developers. The organized naming conventions and flexible structure facilitate quicker access to components and easier integration into new projects. The success of this system has led to its adoption across all Traxi products, both retrospectively and for future developments, ensuring ongoing consistency and quality.

Addressing accessibility

Ensuring accessibility is a core principle of the TRX Design System. Traxi’s brand colors and design elements are crafted to meet AA compliance standards, accommodating a diverse user base. For example, maintaining sufficient contrast for text on various backgrounds is achieved by specifying font weights and sizes that enhance readability without compromising the design integrity. These considerations are seamlessly integrated into the responsive design framework, maintaining accessibility across all device sizes.

Key outcomes

  • Consistent branding: achieved uniform branding across all Traxi products, enhancing brand recognition and trust.

  • Efficient workflow: organized component naming and structure streamline the design and development process.

  • Flexible and scalable: the system’s adaptable framework supports the integration of new components and contexts with ease.

  • Accessible design: all components comply with AA accessibility standards, ensuring inclusivity for all users.

Lessons learned

Dynamic evolution: TRX Design System is a living framework that evolves based on user feedback and practical application, continuously improving its effectiveness.

Proactive collaboration: encouraging open discussions about design deviations helps identify edge cases early and educates team members on established patterns.

Tool utilization: leveraging powerful design tools and plugins enhances the ability to maintain consistency and streamline the design process.

Continuous improvement: ongoing experimentation and learning are essential for refining components and maintaining an intuitive, user-friendly system.

Key outcomes

  • Consistent branding: achieved uniform branding across all Traxi products, enhancing brand recognition and trust.

  • Efficient workflow: organized component naming and structure streamline the design and development process.

  • Flexible and scalable: the system’s adaptable framework supports the integration of new components and contexts with ease.

  • Accessible design: all components comply with AA accessibility standards, ensuring inclusivity for all users.

Lessons learned

Dynamic evolution: TRX Design System is a living framework that evolves based on user feedback and practical application, continuously improving its effectiveness.

Proactive collaboration: encouraging open discussions about design deviations helps identify edge cases early and educates team members on established patterns.

Tool utilization: leveraging powerful design tools and plugins enhances the ability to maintain consistency and streamline the design process.

Continuous improvement: ongoing experimentation and learning are essential for refining components and maintaining an intuitive, user-friendly system.

Other projects

Copyright 2024 by Fabian Rubio

Copyright 2024 by Fabian Rubio

Copyright 2024 by Fabian Rubio