In Collegial old days, there was a design system and there were few standards and shared patterns in place. However, it was lacking a lot of things, which turned out to be a mess of inconsistencies in our platform. The experience started to get increasingly…inconsistent.
We were only two designers at Collegial, me as the UX designer and a colleague in Visual Design mostly working with marketing. Without a consistent design system in place, it was difficult to find components that aligned with our brand, leading to wasted time and inconsistencies across the platform. We needed a system that worked at a larger scale for both designers and developers.
To create a design system, we stablished that if our system only serves designers, we’re doing it wrong. We were only two designers and we needed to create a system that works at a larger scale for both designers and developers.
The first step we took was to fix the colours for the platform and for the branding guidelines. The brand colors were the key to the full spectrum of colors needed for expressing interaction states, errors, and accessible contrast. We used Material 3.0 guidelines to help us. We also have named the key colors after different locations around the world that represent the diversity and mixed cultures of Collegial employees.
Buddy was born as a living thing where it evolved as we started to work on that. We gave life to each part of it as we were delivering new flows, new wireframes and new high fidelity designs.
When we create a design framework that will feed and make our product more uniform, it’s a starting point. If we think that we are really building a house, we have a structure to follow. But, a solid structure like a house can’t adapt to changes because it’s expensive and it takes a lot of time to build. Rather than approaching design systems like architecture, we chose approach it like gardening.
During 4 months I was actually a gardener when I moved to the Philippines, I was responsible to plants seeds and I needed to take care of them. I knew what I had planted, but I did not know exactly what the garden was going to look like. I found out as it grew and intervened when I found weeds, when I needed to mow the grass, remove the dirt, or when I wanted to make changes. A design system needs gardeners, because they will care for it and evolve it continuously.
Creating a design system extends beyond just crafting visually pleasing elements in a Figma file; it's an all-encompassing process that needs robust collaboration and active involvement from developers right from the beginning. To make the design process seamless and cohesive, we decided to document our components directly within Figma. This way, designers and developers could easily access, understand, and employ the shared components.
Moreover, we adopted Storybook, a tool for building and visualizing UI components and pages in isolation. This proved especially valuable for development, testing, and documentation. It allowed developers to construct and test components independently from the rest of the application, ensuring that each piece functioned as intended before integrating it into the larger system.
Buddy is now the minimum standard for every Collegial product. It is a central library that both designers and developers work on together, which leads to smoother development, better quality, and more consistent branding. It is spread throughout the whole company, with active contributions from everyone who uses it.
It helped us achieve this by creating a unified language that ensures consistency across all of our products, while also making it easy for team members to understand and use the system.
As an advocate for Buddy and one of its main gardener, I continuously refine our design system based on user feedback, new technologies, and emerging design trends. I make sure that we are always evolving and meeting our design/development standards.
Definitely, one of the main lessons learned from this design system case is that creating a design system is not just about following the latest trends or using the most popular principles. It's about creating something that works for our team, our product, and our company's culture.
During this process, we learned that involving our teams in the creation of the design system was crucial to its success. We gathered feedback and suggestions from developers, designers, and other stakeholders, which helped us tailor the system to our specific needs.
Finally, we learned that creating a design system is not just about design. It requires communication, leadership, and collaboration. By taking on this project, I developed new skills in design management, team leadership, and effective communication with stakeholders.
.svg)