Creating a design system without a clue
Coming from a startup, usually, there is not much time to develop tools that aren’t meant to put out fires. In Cobre’s case, a design system (DS) was no exception.
I started my work at Cobre on June 2022, as a Product Design associate, with this role I had the opportunity to be hands-on with literally everything revolving around product and design.
Indeed it was at first, a role entirely focused on developing experiences based on the clients' needs and focusing on the priority at hand.
Obviously, as the title says there was no design system at all. This means that every single screen had to be created from scratch, things were out of date and the simplest change to the flow meant an excessive amount of effort had to be put in to be able to fix it.
Picture this, if we had a flow with about 30 screens and we suddenly decided that the button that we were using in each one, wouldn’t be blue anymore but instead would be black, that meant changing it 30 times. That’s 30 clicks for just one small change, now imagine that at a bigger scale… that’s basically unsustainable.
That’s one of the many reasons why design systems are so great, but that’s a story for another time. For now, I’ll tell you about that day, when my boss gave me the chance to jump on this amazing task without having a clue about design systems and I said YES!
What's a Design System?
So, here it is, this is how I created a design system from scratch, with 0 knowledge.
It all first starts with understanding what a DS is, which are good references, and what exactly it should include at first.
To quickly put down what a DS is, here is how I explained it to my whole company:
Think of a lego box, filled with bricks and pieces.
Having one of these allows you to build whatever your imagination creates, you can focus on your designs and you can put them to life. Now imagine, this box is gone, how can you build your lego structures without the legos?
You gotta make them from scratch, but if it's not just you, but many people creating the bricks, most likely they won't all be the same, you might end up creating your amazing structures, but they'll end up looking wonky, and inconsistent. Also, you'll be more focused on creating those bricks, instead of polishing your designs.
So a design system is basically a lego box, a Christmas present from your DS team to you, so now you can focus more on the experience and less on creating legos.
A design system is the source of truth, when in doubt, come to it. It's a set of reusable components and guidelines designed to make every process simpler and more efficient. It's a tool that will allow for easier changes and avoid rework.
Check out these links for more:
As my boss always says, this can be as big as you want this to be… so take this into account and start with the basics and take it slow. Remember, this will be your company’s source of truth and the foundation of all your work, so take it slow and don’t rush into results. It takes time.
Take it from someone who rushed it, and had to go back and make many many changes.
My experience with color 🌈
Think about color, your brand team probably already has a basic color palette so take that as a starter and work your way up.
Always think about scalability, think about where your company is today and where it will be in the future, you might need to have a wide range of colors, in case one day a new brand is created and you need to define its colors, have it ready before it’s even required 😉 you’ll thank me later.
You'll also need semantic colors, these are the ones you define and will tell your user information. We usually use red for errors, yellow for warnings, green to indicate success, and in our case, blue for information.
Here are some more links on color:
Typography
Think of typography, and do your research. Depending on your brand and its values you should pick your font family. You'll also need to create a type scale, and the one you choose to base it on also should reflect your company's values.
After you pick your font family, it's time to create a type scale, you can do this by using a type scale calculator, but first, you'll need to pick a scale to base on. Check out this Designcodes's site to learn more about this.
Here are my links (The last one is my fav 🤩)
Key takeaways
When thinking about your DS, ask yourself; what are your brand goals, and what do you want to portray? Take it from there. Think about meeting your company’s goals through your design system. Let’s say you want to make people create more payments through your platform, what color can you use to meet those goals? What font? What are your brand values? How can you portray them using micro-interactions?
Thinking about it this way will make the most out of your DS. The small details in your designs can have a GIGANTIC impact on your company’s goals.
Thank you for reading the article. I hope that this article helped you shine some light on this task which can be challenging sometimes. I'll be uploading more about my experience later. 🥳😊
