Collaborative UI Development

André Rusakow
4min read

illustration by some cool human

Introduction #

This guide will help frontend engineers and people from the UI community to develop a common understanding of collaboration and why this particular skill can improve the process of software development and product design in your company. I will not describe implementation details or how to create the next big Design System. But I will provide you the right methods and practices to build a pattern library or even a design system. It will also help people who already maintain a pattern library. To point out some problems I will start with some storytelling.

The Status Quo Story #

Let’s imagine ourselves in a successful company with a customer-centric application. The company has a product department with a bunch of cross-functional teams. The product designers maintain a design library to align the design files, which they share with developers and managers. Besides that, the developers maintain a pattern library, which provides UI components and variables for the code in the product.

It's not a Technical Problem #

The root of all evil here is the lack of collaboration. It’s like they are all aliens from different planets and everyone speaks it's own language (terminology). Yes, we’re all aliens… This is often the root cause of why pattern libraries or design systems are failing in companies. A more common condition is that the pattern library is initially built and maintained by a frontend engineer. Nobody else than the frontend engineers know about the pattern library. The maintenance condition of the pattern library is in a poor state because of the fast-changing design library (which is maintained by the product designers). Eventually, the developers gave up using the pattern library, because it is not aligned with their new design files from the product designers. Last but not least nobody feels responsible for maintaining the pattern library.

Let’s sum up the problems:

Solution: Culture of Freedom ☮️ #

Everybody should have the freedom to think outside the box. We tend to end up caught in the treadmill of daily business. This could have a negative side effect that people aren't motivated and productive anymore. Trust me a motivated person will add a lot of value to the company. It should be self-evident to have that freedom in a healthy company culture. Nevertheless, the reality is sometimes different. Then you should probably talk with your manager about it because communication can sometimes work wonders. ✨

Regarding the problem described above this solution could be helpful for you if you're just starting out with your goal and you need to create a solid foundation. The main requirements for this solution are self-organization and discipline. The crux here is to find a good balance between daily business and your goal. Here's the way how it could work for you. Start with 1 hour per day working on your goal. Try to stay focused and avoid distractions during that time.

Let's sum up the requirements:

When you've created a solid foundation to reach your goal, it's time to gather people around you.

Solution: Create a Guild #

A guild is a group of people who are working interdisciplinary on a problem. This kind of collaboration works particularly well with cross-team projects like a pattern library.

The main difference is that a guild is a group of people who are sharing the same interests. Those people are working across the whole company. Let's take a look at this visual to get a better understanding:

Most important thing is to break the communication barriers between frontend engineers and product designers. Once this is done you should find a balance between talking, listening, educating, and learning from each other. You should always understand both sides and needs and this implied that you have to be flexible and open-minded. The requirements for a guild are:

To increase productivity within your guild it makes sense to designate a guild coordinator. This role is more about keeping the process running like set up meetings and define agendas.

Things You Should Try as a Guild #

The following methods and practices could help you to establish a well functioning guild:

With the guild, you should now have a solid foundation to develop a consistent pattern library or even a design system that can be used across the whole company. The important thing here is to keep the focus on alignment.

Conclusion #

The truth is that things are not getting easier with it, but they should get better. Collaboration and communication are often the most difficult parts of our jobs and you need to learn how to use those skills. By the end of the day, nothing here is set in stone and it’s not the ideal path to success for everyone. But I hope that these thoughts and opinions can help you to find your ideal way to establish a pattern library or design system in your company that works.

Good luck 🍀