Select Page

DSN - Design System Nexxera



A Design System is designed to establish interface building guides, presenting patterns of shapes and components to be applied to a product's information architecture. Based on this, a digital product or group of products that make up a company's portfolio can be harmoniously and consistently scaled.

Once implemented, Design System minimizes the work of developers by describing components code. It becomes an important tool in quality assurance, minimizing QA incidences. From a designer's perspective, the Design System communicates and reinforces the visual and behavioral consistency of the user interface, introducing the design of the most basic components to the most complex, branding rules.

The Nexxera Group has about 300 employees and 9 companies, all presenting corporate digital solutions for financial management and banking, being the main gateway for financial and mercantile transactions in Brazil.

It manages about 2,5 billion bank transactions per year, moving more than R$ 356 billion, with 5,000 active corporate clients.

Project Details

Client: Grupo Nexxera – Florianópolis, Brasil
Date: 2018 – …
Responsibilities: Organize and design the GUIs for the company
Platform: Web, responsive
Tools: Adobe XD, Storybook
Deliverables: Graphic User Interface Design

The Challenge

With over 25 years of experience and more than 20 products developed, Nexxera has been undergoing an internal and innovative transformation in its way of development and understanding of market needs. The challenge is both the reformulation of products with legacy architecture, as well as the construction of new products that serve the B2C segment, hitherto untapped by the company.

For that reason, in order to bring a more focused look on the user-customer experience, in 2018 Nexxera decided to invest in the creation of a product design team, invited me to act on the Group solutions.

In face of a disharmonious scenario, in which each product would present a distinct graphic and interaction solution, often making the scalability and conversation between the product solutions unfeasible, I took the initiative to start building the Design System Nexxera - DSN.

In its first version, we are already applying DSN guideline to new corporate products and are preparing to review and update the Group's other products.

Development Process

For this project, I held a series of meetings with developer teams and POs, presenting the advantages of having our internally designed Design System.

It currently serves the company's web products and is quickly expanding to include Apps / PWAs artifacts. It will also feature branding elements of the Group's products and marketing materials.

Through a search for DSN publishing solutions, we selected the best source for our context, the open source Storybook platform, being Google Material Design the initial foundation of DSN, which already has its own components and structure.

Learnings and Conclusions

This project is still under development, with some initiatives by the development teams to componentize the material, creating a framework of its own. Some new Nexxera projects already follow Design System like Nix among others.

Did you like what you saw?

Get in contact