Back arrow icon
Back
What's new icon
/ What's new

Xello Design Principles

At Xello, we have been talking about having design principles for a while, but never felt the necessity of it throughout our design process. Lack of time and resources contributed to postponing the discussion and diverted our attention away from it. There had been principles that were written a long time ago by earlier designers, but mostly left antiquated and has been gathering dust since.

As our team grew bigger, the lack of a shared and well-documented set of principles became more vivid. We needed to speed up our decision-making process especially in choices with a smaller impact on the system. We needed to make a consensus and standard design evaluation criteria across all teams. Something we could all refer to at different levels. A set of principles that could be utilized as a thinking toolset to bring our individualistic interpretations of design (at Xello) to a team level.

Victor Montalvão (another great designer at Xello) and I took the chance to prove that we can start this project with the shortest possible amount of time. Time was limited and everyone wanted to see result and progress.

Thinking together

Our approach to design and plan for this was a very participatory and collaborative one. A top-down approach is usually a big miss. People don’t feel ownership over them, and they will not invest the time to learn and apply them to their work. We wanted to make sure everyone’s voice is heard and their opinion is valued.

This difference was enough to require a standalone and sovereign design system and library. Several sprints passed, and a few pages were built before we realized the undeniable need for a cohesive guideline that could unify our designs. A guideline that sets up rules and standards to create new components. A set of foundational truths that would function as basic elements - DNA - to build our designs on top of. This guideline would also be a source for our developers to check and follow.

Clarifying Intentions

The first step to take was a clear goal and purpose for this project. We had to understand why we are doing this, what is the desired outcome and how we are about to facilitate it. We had to make sure our principles are aligned with our company values. We must consider the history of design principles at our company, and gather the collective knowledge that had been living in the earlier designer’s minds. We had to find what’s all ready to catch and what’s missed to add.

We want a system of guidelines that could help us to make better and faster design decisions. A guideline to evaluate ideas and concepts, and to provide criteria that could be used by all designers from different teams and disciplines. Both digital or print designers. So the idea was to collect information from all team members or look outside to other organizations. Then synthesize them into the most essential ones and generate a clear set of principles.

Collecting Knowledge and Distribution

Before anything else, we must have a good understanding of what principles are. How they are used outside of our company, by others. Victor and I started by our first source - Alla Kholmatova’s Design Systems book. We both read it and discussed to make sure we understand. We both gathered examples. We picked goods and bads. Dos and don’ts.

Then we must share our process and progress. It was a great opportunity for us to facilitate sessions that are informative as well as reporting. We designed participatory sessions to think and learn together. It’s important for everyone to have the same level of understanding about what principles are and why we need them. From the very start, we facilitated sessions and gave presentations on design principles in general. We looked at examples and discuss them in details. We design activities to make the sessions a bit more engaging than dry presentations where everyone falls asleep. In these sessions, all of the designers from all levels participated and were consulted.

In future gatherings, when we all have a general understanding of principles are, we would ask everyone to write down the principles that they use in their everyday designs. It’s about thinking about things you do automatically and bring them to consciousness based on the new knowledge you have. We put them all up on the wall and discuss them as a team. Everyone would discuss their choice and explain why it is important to them.

Synthesizing

With the great data gathered from all of those sources, now we need to extract the commonalities and formulate the chemistry with words. We brought a higher level structure to all generated ideas by affinity mapping. That would help us explore common areas and identify the core underlying principle that encompasses an applicable and a simple rule. We want to be direct and informative but at the same time widen the realm of application for each principle.

Make Them Applicable

We identified three key elements to every principle to make them useable and understandable:

Back arrow icon
Back arrow icon
🙌🏼
Slides are cortesy of Victor Montalvao, and the SCRIM logo is created by our design director Marcio Bomfim.