Year

2019-2020


  • Client
  • Bigbank

The Bigbank Design System is a library of design pattern specifications, code samples, and UX/UI standards that help us creating consistent and intuitive products and solutions through different user journeys @Bigbank, helping our users to successfully interact with our products.

Why?

At Bigbank, we provide a fully digital banking services approach to our clients and internal users.

Since we have many interconnection between different products and teams, it was very important from the beginning to make strong cohesive connections between all these products and keep design scalable across the company.

Building a solid foundation and strong connections between components helped us fill out the design system hierarchy which lead us to a better collaboration between design and development teams, allowing the design language to evolve over time.

How?

For us, having a design system was also a tool to improve our communication with different stakeholders and teams. Spending more time on initial planning, reflecting about how to connect products and scale them helped us to kick start it. Finding out what to achieve and how to set up the teams made a huge impact on how we decided to architecture the components.

Our tool of choice was Figma. W found out that when everyone can see the entire flow and process, it can rapidly change the conversation and strive for unified and scalable solutions within the company.

Our design structure consists of:

  • Core: where our design tokens are set.
  • Components
  • Organisms
  • Templates
Master components

Each of our components is built based on a master component, and every decedent component is a child of the master component. This allows us to quickly make change and updates in the future.

Apart from each core components having masters, we also have built masters for organisms and templates that are shared within one product. For example, our back-offices master, our self-service master, public pages master, etc.

Each team works mostly with one respective product, in which they all share the core principles, atoms and components. As an example, here is a master setup. The key in design was to have an overview of all countries flows. At Bigbank, each product is being delivered to 6 other countries and at times there are some flow differences, such as signing methods.

But, on the other hand, stakeholders must have an understanding of each countries product entire flow. And to keep our maintenance low, having these organisms helped us decrease inconsistencies when replicating these flows, we can easily set up a new flow by choosing which country we need to design and the template easily adapts. This helped us communicate with the development team, making it more clear what is reusable, what is common, what is specific.

How to reuse a template to display different country forms.
Flexible components and templates
How to build a different task with the same template.
Well described Specs

Another important part of our design system is to communicate specs. We always breakdown components into smaller atoms and explain the building blocks. Here is an example of a complex group of cards, which atoms and components are shared with one or more groups, how they are combined and which context are they in.

Cards structure and shared common atoms and components
Cards flow
You can also check it out how our components library is set up from dev team

Next

Ostiio