Enhancing collaboration: Five design system principles

This article focuses on effective design system implementation, aiming to prevent common scenarios where impeccably designed prototypes result in frustrated developers, inconsistent user experiences, and a chaotic user interface.

Throughout my career, I have encountered design implementation challenges, which have inspired me to share my experiences. Important to mention is that these experiences arise from handling large-scale solutions and navigating complex team structures. The concepts presented here are based on best practices that have proven successful for out-of-the-box teams where generalists occupy leading positions.

I firmly believe that the quality of designed solutions lies in their usefulness to end users and their simplicity of implementation.

NICE TO READ

Previous experience and meaningful concepts

Before diving into recommendations, let me give you a glimpse into my design system journey throughout my career.

With a strong penchant for systematic thinking as an architect, I’ve always sought to organize and categorize my work. This trait I consolidated during my four years as a front-end developer amidst the popularity of frameworks like Bootstrap and Material. While the concept of design systems wasn’t officially in vogue then, my musings on the topic are detailed in Part I: Design System before Figma.

As my projects grew in scope and complexity and tech possibilities expanded, I encountered Figma. This game-changer allowed a seamless transition from code to design in a systematic and organized manner. Discover more about this transformative experience in Part II: Design System with Figma.

PROBLEM TO SOLVE

Translating design to product

In digital product development, complexity emerges from diverse roles. As an architect, I’ve noticed that design is often misunderstood as mere aesthetics, whereas its essence lies in innovative problem-solving.

The design process involves identifying genuine problems, optimizing for user ease, and addressing complexities with technology. Once a solution is accepted and we proceed with development, every time the same questions arise, especially in the implementation domain:

• What are the best practices for effectively communicating design deliverables to ensure fluid implementation by the development team?
• What strategies can be implemented to address consistency challenges effectively in large platforms with numerous products and multiple teams?

SOLUTION

Design system as a fundament

The conventional design process often involves designers presenting interactive prototypes. While these prototypes provide a glimpse into the visual aspects and user interaction scope, they fail to deliver the necessary level of detail and consistency required for seamless development.

The true foundation lies in a well-documented and comprehensive design system that provides information about business models and challenges, design principles, brand guidelines, UI libraries, and user experience recommendations.

Design system goes beyond the surface-level interactions seen in prototypes, addressing critical aspects such as design usage, dependencies, and basic UI components.

One of the articles I particularly favor for unraveling the nuances of the concept of a design system is by Nielsen Norman Group. This approach, coupled with my admiration for exemplary instances like the Salesforce Design System, fuels my enthusiasm to share the insights gained from years of theoretical exploration and practical experience in navigating the complexities.

BEST PRACTICES

Five principles of a design system

1. Holistic management of information

A well-crafted design system serves as a strategic document, offering a holistic understanding of the product, the problems it addresses, and the overall approach taken. A great example of one such design system is Apple’s human interface guidelines.

2. Set a design system like a “single source of truth”

Managed by a dedicated team, the design system is a set of flexible rules and proposals for the whole solution rather than a strict document. The Atlassian Design System is a good example of how it can be organized by proposing tools and approaches for designers and developers.

3. Keep it well-structured

Atomic Design, a method involving the deconstruction of the entire interface into its fundamental units followed by progressive building, is exemplified by Google’s Material Design. Alternatively, the Carbon Design System offers a noteworthy alternative for those who favor a non-atomic structure.

4. Accessible across diverse sectors

Atomic Design, a method involving the deconstruction of the entire interface into its fundamental units followed by progressive building, is exemplified by Google’s Material Design. Alternatively, the Carbon Design System offers a noteworthy alternative for those who favor a non-atomic structure.

5. Effectively managing the scaling and versioning

A well-orchestrated versioning strategy ensures a harmonized and efficient evolution of the design system, reinforcing its influence on both the product and the overall brand voice. Specifically, for UI components, leveraging features like Figma’s developer mode and versioning offers a comprehensive solution.

CONSLUSION

You are not a unicorn but an experienced generalist with holistic knowledge

“Original ideas are the easy part. Actually, producing the idea as a successful product is what is hard.”― Donald A. Norman, The Design of Everyday Things.

A design acts as the bridge, translating and connecting a product’s business, tech, and human aspects into a coherent and logical solution. To achieve this holistic approach, designers must possess fluid knowledge, blending their intellectual ability, experience, and lifelong curiosity.

Thankfully, we need not search for elusive unicorns. Working as a team and remaining open to enhancing our experiences are key. For a seamless development process, designers should possess a solid understanding of the technology used, the development process, and the necessary design deliverables for the development team.

Meanwhile, developers must approach design solutions empathetically, ensuring technology serves the business’s and users’ needs rather than imposing development simplicity.

Dealing with complexity isn’t an everyday task that can be readily learned. Instead, the path lies in exploration, testing, and continuous learning. By embracing this mindset, we can unlock new frontiers and achieve remarkable collective achievements.