Bambú: Flexibility, Cohesion & Efficiency
How to Build a Design System and Live to Tell the Story
Keeping up with the design and delivery of new functionalities and flows while building a design system can be challenging. In this article, I want to talk about my experience in creating “Bambú” and reflect upon:
- Reasons for having a design system and its benefits.
- Who is it aimed at? And why is it considered a “source of truth”?
- How it differs from a UI kit.
- The approach chosen to build one and how we grew it together as a team.
- How we came up with its brand name and isologo.
To Begin with, What Is a Design System?
A design system is a guide, a set of patterns, rules and usage practices and it is mainly addressed to Designers and Developers, but it also comes into contact with areas such as Marketing, Sales, Communication and Content.
It is tangible and intangible:
- Tangible, because it contains the tools that we use to develop products; tools such as the pattern library -UI kit- with instructions to understand how the components are used and how to bring into play the elements of the interface and with code lines that come with and that represent each component).
- Intangible, because it also includes the company’s values, principles, intentions, goals and philosophy (style guide, brand image, style manual and voice tone).
It is an iterative and incremental process and a tool for language and dialogue definition between Designers and Developers.
It is considered a “source of truth,” because it is a document that is collectively built by the team and that contains “truths” that must be complied with in terms of tangible and intangible aspects, but it is also considered a flexible document that is open to change (nothing is carved in stone).
Now, What Is the Point and Benefits of Having a Design System?
Its goal is to document and standardize the company’s patterns, rules, usage practices, language, values, principles, intentions, goals, and philosophy.
A design system guarantees companies brand consistency since flows and projects can be updated with unbelievable speed. Why? Because it focuses on the atomic design theory (atoms, molecules, organisms, templates).
With this approach, our project starts with “atoms” which are single units that, together with other units, make up “molecules,” which, when combined, form “organisms.” These organisms, in turn, contribute to the development of “templates,” which then become web pages.
In addition, a design system serves as an educational tool and reference to Designers, Content Creators, and other departments that join the team or that are already in it, thanks to explicitly written usage guidelines and style guides.
When Is It Important to Plant the Seed?
A design system is valuable and has a huge impact when we are working on an app, service, or large system and there are too many people involved within the creation process. By having standardized documentation, all members involved understand and know how and when to use an element and how to implement it, which means that there are no doubts when it is time to design and develop.
Who Is It Aimed at? And How Is It Different from a UI Kit?
A design system encompasses much more than a UI kit, because it goes beyond a set of components, therefore, it exceeds the Design Department. It can also affect the Marketing, Sales, Communication, Content, and Development Department, and it is always subject to and willing to change (constantly evolving).
A UI kit is a small part within the DS. It focuses on providing the design team with the visual templates needed to create new pages or page views. It is the visual side of the brand: the elements, typography, iconography, shapes, and colors. On the contrary, a DS uses that existing library (UI kit), but it is much more advanced and complete, it creates a central library in which both Designers and Developers can work together, which makes the development more fluid, of better quality, and much more consistent.
If you want to create internal prototypes or purely visual designs, a UI kit is an ideal choice. However, if you are looking for something that works on a larger scale (as we said, in a team with many members), and that does so for both Designers and Developers, then, a DS is imperative.
Providing Context: Why Was Bambú Developed?
As I mentioned earlier, understanding an organization’s needs and evaluating advantages and disadvantages is essential to decide if it is of key importance to have a design system.
In our project with IUDÚ, we worked with a considerably developed UI kit. But as the team and the amount of flows and functionalities became larger, we had the need to record the decisions made as Designers to be consistent throughout the app. On top of this, the rest of the team (from the Development, Marketing, Sales, & Communication Department), also needed to understand our decisions easily and clearly.
As Designers, the challenge resided in creating templates that would serve as the basis for one or more views or cards that worked with and without certain elements. In short, the goal was to make our product scale up in the best way possible, and that everyone involved in the project knew what was going on (in terms of components, templates, colors, backgrounds, iconography, and other elements).
Best Approach for this Example
There are three ways in which to integrate a DS into a company:
- Adopt an existing design system.
- Adapt an existing design system to one that meets your needs.
- Create your own design system or customize one.
There are pros and cons to each of them, but generally speaking, the more customized the design system, the more time (and therefore, money) it will take to implement it. Therefore, using an existing design system is the least expensive approach and it takes less time to implement it. However, more time will be needed to replace or update interface elements and to set a standard.
In the case of IUDÚ, we felt that investing in a custom design system and creating it from scratch would be worthwhile, because the organization had particular needs that open-source design systems could not meet. As a team, the key point was to understand the organization’s needs, evaluate advantages and disadvantages, and thus decide the best approach to build the DS.
Customized Approach
As I mentioned at the beginning of the article, it was challenging to design and deliver new functionalities and flows while building Bambú. Since it is an iterative and incremental process, a design system is only as effective as its management team. It requires ongoing maintenance and monitoring to ensure it does not become obsolete.
In our case, it was key to maintain a smooth communication flow between team members to come up with ideas and suggestions and to create spaces to work on the design system; we would find gaps on our calendars, and we would schedule meetings at least 1 hour a week to work on Bambú.
Thanks to such practices, we achieved a great understanding and great results in a short period of time. Besides, we also incorporated the use of collaborative tools such as Miro (which was very helpful for the weekly meetings proposed and held with Front-End Devs) and Slack (in which we created a special channel to clarify doubts, to remove blockers and to keep the development of prototypes aligned with each other).
It is known that, to develop a design system, the size of a team may vary, since there are different customization levels. But at the very least, the team should include an Interaction Designer (UX), a Visual Designer (UI), and a Developer (Front-End Dev), and they should help write interaction design guidelines, create visual examples, and provide both code snippets and implementation specifications for the different elements accordingly. Ideally, the team should also include a research profile, an architecture profile, and a Content Creator, if such roles existed within the organization.
In our case, our team is quite large, since we have a UX Head, 5 UXers, a UI Designer, 7 Front-End Devs, and 3 Content Writers. Together, we established a benchmark so that the rest of the team (from the Marketing, Sales and Communication Department) would learn the importance of having a design system, a brand name and an isologo that represents it. For this purpose, we followed the research, presentation, conversation, listening, proposal, and group voting pattern.
Is Branding a Design System Necessary?
Branding allows us to reveal our value proposition which sets us apart from similar products or services in the market. The brand name is the first step towards giving meaning to a brand; it makes it more attractive and, above all, more recognizable. The design of a logo, isotype, and isologo is the first graphic impression that clients get from a company, and it must certainly be a good one.
Although IUDÚ’s goal was to have a closed design system (only those who work on it would have access to it), branding it would add importance to it within the organization and it would help the system to obtain the entity it deserves.
Hereunder, I will share with you how we agreed upon Bambú’s brand name, isotype, and isologo, which are key elements when it comes to building brand identity and transmitting its values. Why? Because it is their job that clients remember, identify and differentiate Bambú from other design systems.
#1 Step: Brand Name
To conceptually understand why we chose the name “Bambú,” I established a benchmark, which I presented to the group, and in which I analyzed other existing design systems. From that, I drew conclusions, submitted proposals and held a vote.
Conclusions:
There are names that are directly related to the brand and that allude to it in a certain way, such as Equis (Orange X) and Flame (Santander). There are others that allude to features of the design system like its consistency, modularity, unification, and scalability, such as Carbon (IBM), Brick (Galicia), Andes (Mercado Libre) and Lighting (Salesforce). Finally, some of them are explicitly related to the meaning of a word; take for instance Fare (Ualá) which means “to do” in Italian and is related to the verbs: achieve, create, manufacture, and perform.
Proposals:
After researching existing brand names, many ideas came to mind, and among those ideas, there were preferred options: “You Do,” “Uva” [Grape], “Forma” [Shape], “Iglú” [Igloo], and “Bambú” [Bamboo]. Each brand name was backed up by its meaning, origin or reason for its proposal.
Based on this, I held a vote using the Miro platform (collaborative tool) to reach a final decision.
Voting stage:
We voted 3 times, first, during the discard phase, then we voted on the preferred options and, later on, we took part in the final vote. The process was dynamic, and it allowed us to reach an agreement. The name of IUDÚ’s design system became “Bambú,” which makes reference to its flexibility, cohesion and efficiency.
Bamboo has strong trunks and has traditionally been used to build houses in certain countries or communities, since it can be found there and it is also a strong and long-lasting material. So, we associated “Bambú” with construction and the aforementioned features of the plant, and it immediately led us to decide that it would be the right brand name for our design system. A plus? It sounds similar to IUDÚ.
#2 Step: Logo, Isotype or Isologo?
After agreeing upon the brand name “Bambú,” I conducted an activity to decide its isologo. I analyzed what we needed and followed the same process we used for the system’s name: I built a benchmark in which we reflected upon the idea of logo, isotype, and isologo.
We had to find harmony and a connection between the name chosen and what IUDÚ represents as a brand. The idea of incorporating IUDI, our journey companion, in this challenge was the defining element to reach a decision. We were creating life; we were creating Bambú.
When analyzing the proposals as a team, we used Miro once again as a collaborative tool. We discarded some proposals, and we came up with new proposals to work on.
In another meeting, I revealed my proposals, and, finally, we reached an agreement: we had Bambú’s isotype and isologo!
#3 Step: Growth and Development
Getting together every week with the team and Front-End Devs to understand the behavior of templates and specific components was one of the many challenges we had to overcome so as to move forward with the development of the design system.
These living libraries, which are constantly iterated, save time for Designers, since they have a glossary of the elements that help create an interface in a consistent and dynamic way.
Final Thoughts
At Flux IT, we worked collaboratively with the IUDÚ team, which allowed me to meet a group of talented people willing to take on all kinds of challenges. Smooth communication brought us great results, and that is why I would particularly like to thank Fernando Mac Dougall for leading this project and all the people who made Bambú’s creation possible: Nicolás Di Ciaccio, Fernando Rago, Emilia Suárez Azar, Mariela Peralta, Paulina Trubbo, Sonely Urdaneta Garcia, Martin Salatta, and Juan Zalazar.
Building a design system is not easy, but it is possible. Living to tell the story is an opportunity to share my knowledge and to exchange opinions. Have you had the chance to take part in the development of a DS? Do you think you could suggest building one with your team and succeed in it?
To those of you who have come this far and want to, I would like to exchange some experiences with you, thus creating a sense of companionship. You can leave me your comments here👇 or you can send me a message on LinkedIn. Thank you!
