Building the Tridonic Design System: Unifying Digital Product Design

COMPANY

Tridonic - Zumtobel Group

ROLE

Senior Product Designer

DURATION

Endless

CONTEXT

Tridonic, a global leader in lighting technology, aimed to revolutionize lighting systems through intelligent networks. However, the company faced challenges with inconsistent digital product designs, developed by multiple teams without unified guidelines. This led to fragmented user experiences and inefficiencies in product development.

THE STARTING POINT

One clear example that highlighted the need for a unified design system at Tridonic was the inconsistency in how users were asked to select a date across different products. We had three different products, each with four distinct methods for date selection. This inconsistency not only created a fragmented user experience but also resulted in significant inefficiencies. By reinventing the wheel four times, we were expending four times the effort to develop a solution that could have been standardized.

Developing a shared design system and component library would allow teams to streamline their workflows, significantly reducing development time and improving overall efficiency. This unified approach would enhance the usability of our products and reduce the learning curve for users migrating from one product to another, ultimately fostering a more cohesive and intuitive user experience across all Tridonic products.

Screenshot-2022-03-23-at-13.04-1

Product A - Setting date and time screen

Screenshot-2022-03-23-at-13.04-2

Product A - Schedule screen

Screenshot-2022-03-23-at-13.04-3

Product B - Filtering data base on day

Screenshot-2022-03-23-at-13.04

Product C - Expire date

SOLUTION

To address these issues, I led the creation of the Tridonic Design System (TDS), a comprehensive framework of principles, guidelines, and reusable design solutions. TDS was designed to align with Tridonic’s vision of the “Internet of Light” and support the seamless development of digital interfaces.

PROJECT GOAL

• Improve consistency across user experiences
• Optimize production time for new digital solutions
• Establish TDS as the design reference for all digital interfaces
• Promote a user-centered design mindset within the company

MY ROLE

As the Senior Product Designer, I led the project and worked with a small team of designers and developers. My responsibilities included conducting user research, creating design documentation, and evangelizing TDS across the company.

THE DESIGN PROCESS

DOCUMENTATION DEFINITION

The process began with understanding Tridonic’s brand guidelines, vision, and values. Introducing a Design System without duplicating what the teams had already defined and used was important. This required integrating the company’s goals into the design system.

CREATION AND DISTRIBUTION OF DOCUMENTATION

I developed comprehensive documentation that included UI kits, best practices, and a library of components. This documentation was made accessible to the entire company, ensuring everyone had the resources needed to utilize TDS effectively. 

EVANGELIZATION

I actively promoted TDS at all hierarchy levels, from colleagues to the managing director and CEO. This step was crucial to gain buy-in and ensure consistent adoption across the company.

INCLUSIVE DESIGN AND ACCESSIBILITY

I incorporated best practices for inclusive design and accessibility, ensuring that all digital interfaces were user-friendly and accessible to a diverse range of users.

CONTENT AND VOICE AND TONE

I established guidelines for content, voice, and tone to maintain consistency in communication across all digital products.

TDS-documentation

UI KIT AND COMPONENT LIBRARY

I created a detailed UI kit and a non-coded component library, enabling developers to customize components as per the use case and generate code automatically. This streamlined the development process and ensured consistency across digital products.

TDS

DEVELOPMENT REVOLUTION WITH THE TRIDONIC DESIGN SYSTEM

The Tridonic Design System represented a significant breakthrough in software development efficiency and flexibility at Tridonic. This innovative tool allows developers to test components in real-time, adjust designs responsively, and seamlessly switch themes using tokens. The customization of components is user-friendly, and the system generates code that can be directly integrated into developers' projects. This not only sped up the development process, significantly reducing implementation times but also improved the consistency and quality of design across the platform. As a result, the Tridonic Design System has become an essential part of the company's development strategy, establishing itself as a true game changer in the field.

TDS3

THE RESULT

• Improved consistency and usability across Tridonic’s digital products
• Reduced production time for new digital solutions
• Enhanced brand awareness and trust in Tridonic values
• Increased scalability and accessibility of digital interfaces

LEARNINGS

Continuous collaboration and feedback are essential for the successful adoption of a design system.
Regularly updating and challenging design solutions ensure they meet evolving user needs and technological advancements.
This project reinforced the importance of a unified design approach and demonstrated how a well-defined design system can significantly enhance user experience and operational efficiency.

Thanks for stopping by

Work inquiries, website feedback, mentorship worldwide,
or just saying "hello" are always welcome!

 

Email me at geral[at]bfsilva.com or find me on social media:


© 2024 by Bruno Ferreira da Silva.