The Ugliness of Working on Design Systems: Expectation vs Reality - Jessica Tsang IntoDS - June 2024

Summary

In this talk, Jess, a product designer at Job Adda, shares insights into the challenges of working with design systems. She discusses her journey from being a front-end developer to a designer, and the lessons learned while building and maintaining Job Adda's design system, Scales. Jess highlights the importance of collaboration between design and engineering teams, the difficulties of managing design and technical debt, and the role of feedback in improving the system. The session covers key strategies for aligning teams, improving UI consistency, and fostering better communication, with a focus on the ongoing effort to enhance both design and development processes.

Takeaways

• 😀 Jess is a product designer at Job Adda, with a background as a front-end developer, bringing a unique perspective to design systems.
• 😀 The company faced challenges with their immature design system, which had undergone multiple iterations leading to tech and design debt.
• 😀 There was a misunderstanding among team members, with many thinking a UI kit was a design system, which caused trust issues and inefficiencies.
• 😀 To rebuild trust, Jess and her team focused on gathering feedback from designers, developers, and business analysts to identify the root causes.
• 😀 The design team at Job Adda addressed the issue by introducing an engineering champion for each vertical, promoting advocacy for the design system.
• 😀 The design team used sales and marketing data (such as closed and lost deals) to align their efforts with the company's business goals and gain buy-in.
• 😀 One major hurdle was resolving mismatched semantics between design and development teams, with differences in icon naming conventions and tokens.
• 😀 By focusing on small, foundational elements (like matching token names and icons), Jess and her team laid the groundwork for better alignment between design and development.
• 😀 Documentation was critical, and the team found that having something, even minimal, in Confluence was better than having nothing at all for tracking progress.
• 😀 The team faced technical complexities and delays, but emphasized that the real value came from collaborative work, learning from failures, and maintaining patience.
• 😀 Jess shared the importance of understanding both design and development, as having a bit of knowledge about coding helps designers collaborate better with developers and bridge the communication gap.

Q & A

What is Jessica's background before working as a product designer at Job Adda?

Before becoming a product designer at Job Adda, Jessica worked as a front-end developer. Her development experience has played a significant role in her ability to understand and build the design system at Job Adda.

What is one of the main challenges Jessica mentions about working with a design system at Job Adda?

One of the main challenges Jessica highlights is that Job Adda's design system was immature, which led to technical and design debt. This created complications when trying to make improvements or maintain consistency across the product.

How did Job Adda's team address the issue of trust in the design system?

To rebuild trust in the design system, Jessica and her team focused on gathering feedback from designers, developers, and business analysts. They worked closely with peers, spread awareness, and educated others about the system's usage.

What approach did Jessica and her team take to solve issues of mismatched semantics between design and development?

Jessica's team worked to match semantics between design and development by aligning naming conventions. For example, they standardized terms like 'Arrow up' in design and 'Arrow upward' in development to ensure both teams were speaking the same language.

How did the team at Job Adda get buy-in for working on the design system?

The team used sales, customer success, and marketing data to get buy-in. They gathered feedback from sales teams to understand why users were turning away from Job Adda and found that inconsistent UI and poor functionality were major reasons.

What was the name of the design system at Job Adda and how did it relate to the company's branding?

The design system at Job Adda is called 'Scales.' The name came from the company's branding, which was initially based on a snake logo, tying into the theme of scales.

What specific challenge did Jessica's team face in terms of component matching between Figma and the development library?

The challenge was that the components in the Figma design libraries did not match the development libraries, leading to discrepancies and inefficiencies in the design system. This required a lot of work to synchronize them.

How did Jessica's team approach updating the components and documenting them?

Jessica's team focused on slowly building trust by matching tokens and components between design and development. They used Confluence to document even the smallest details, and worked to ensure that everyone was aware of changes through regular updates and communication.

What role did teamwork and collaboration play in the success of the design system improvements?

Teamwork and collaboration were crucial in Jessica's process. Working closely with engineers, product managers, and other stakeholders helped align everyone’s efforts, ensured better communication, and facilitated faster adoption of design system updates.

What is Jessica’s perspective on the importance of design and development collaboration?

Jessica believes that understanding both design and development is key to successful collaboration. She emphasizes that designers should have knowledge of coding, as it helps with communication and empathy with developers. Similarly, developers who understand design can appreciate the 'why' behind design decisions, leading to better outcomes for the team and the product.