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

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

Comprehensive framework for Web and Mobile

Streamlining complexity

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

Passenger App

This app enables users to access company-contracted transportation with QR codes, search and save favorite routes, and track trips in real-time using live maps and ETAs. Additionally, users can rate their experiences to provide feedback and improve service quality.

Driver App

An app designed to streamline daily transportation by managing trips, starting/ending rides, scanning boardings, and reporting incidents effortlessly.

Transportation Management System

Revolutionizing personnel transport management with a light-asset platform designed to optimize daily operations, streamline scheduling, and provide real-time visibility.

Validator device

The device offers an automated validation solution for passenger boarding. With advanced scanning capabilities, it streamlines driver workflows, reducing manual tasks, shortening boarding times, and enhancing overall operational efficiency.