Swiset, building a design system with an approach to identity, usability and accessibility

Introduction

This was one of the most interesting projects for me, because apart from learning a lot about the design systems, it was also a very enriching experience in the sense of teamwork. In this case study I will share with you how we approached and built a design system.

About

As Swiset grew we realized that it was time to create a font of truth, a system that would provide us with elements, styles, components and all the patterns of the company, so that all the visual components of the brand would be coherent. Design systems are also useful to streamline the teamwork of large projects, to maintain a stable organization in all designs and much more.

🪪‍ Visual Identity

The visual identity is extremely important when building a coherent design system, because it is this aspect that gives us the context. Swiset is a modern, institutional Fintech and wants to transmit seriousness and accessibility in its products, so these principles will guide us when designing.

⚛ Atomic Design

Breaking down the interface elements into smaller elements results in more scalability and consistency within our design system, and a much more efficient way of both creating our components and organizing them in the UI.

🧱 Documentation

It is time to present all the principles, components and variants that will make up our design system. Also in some cases there will be documentation on how to use, context, application forms and description.

Grind System Layouts & Spacing

to maintain consistency within our design system, we created a grid system and a spacing pattern of 8 x 8 pixels:

Iconography

We love this recognized repository, because at UX level it is quite solid, aesthetically it transmits what our brand is looking for, which is a constitutional aspect, and that through the set of flows generates a consistent and coherent environment.

Radius & Shadow

With these elements we finish the basis of our design system, the corner radius is essential to create components such as modals, pop ups, information blocks, buttons among many others, this element will give a better look and differentiate it from the background. The shadow is an equally important element, and helps us to create depth and differentiation between the element we want to show and the background.

Components

For the components, which is where we delve into all the other elements that make up the UI, we took into account several aspects, best practices creating different states in each component to improve the scalability of the project, using atomic design, taking into account all the most popular design patterns used in the industry, always maintaining consistency and visual coherence, understanding the context and the audience, among other aspects.

Other UI Elements

Finally, some of the other components that make up the Swiset design system, with their respective status and features, where each one was thought and has a sense objective: to improve the experience that users have when using them.

What I Learn?

In this project I have acquired a vast knowledge about design systems, from the basic concepts to more complex and fundamental aspects for their construction, scalability and implementation. Some of the general knowledge I learned were:

• Concepts which I had previously studied and put into practice in personal projects, such as components, design patterns, style guides, tokens, component libraries, documentation and iteration, variants and prototyping, among many other aspects were tested in depth and in full understanding.
• Teamwork was fundamental to achieve all the objectives of this project, I loved sharing and learning from all my team, thanks to all my team, with whom we had many feedback sessions where we iterated and scaled the project.