Flame Design System
The challenge of applying movement and interaction to the components of a design system.
In 2019, Flame Brasil was born. In 2021 it became part of the "Santander Design Ecosystem", which, while aiming to propose global standards, respects and maintains our country's own characteristics to ensure proximity to Brazilian users, thus maintaining the specificities and tone of voice that speaks to this audience.
As part of the team that built the design system, my main role during the creation and development process was to define the interactions and motions of the components with the aim of providing a more fluid and pleasant experience for users.
Motion and interaction in components
The motions defined for Flame's components always seek to achieve a purpose, since they are a tool for improving the quality of the user experience. For this reason, it has been defined that they should have purposes such as informing, guiding and/or celebrating so that they can be part of users' journeys.
When thinking about motion for digital interfaces, loaders are one of the first components to appear. A component that has been solidifying itself as indispensable, and which has as the basis of its existence the movement to indicate to the user that the system is working, and also brings with it the responsibility of reducing the sensation of waiting.
In the example shown, you can see the primary and secondary loader in operation.
The first, which appears more often to the user when navigating the interfaces, as it is present in almost every screen transition, also takes the opportunity to reinforce the brand through the use of its main icon: the flame. The second, on the other hand, has been designed to remain coherent with the first, as if it were part of it, and to clearly indicate to the user that the content is loading.
Example of two application screens with animated loaders, the primary loader on the left and the secondary loader on the right.
The main buttons, for example, are already present on the interface and react to the user's click with a movement to let them know that the interaction has actually taken place. This so-called feedback is a very important resource for letting the user know that their action is having an effect on the system.
Example of feedback when the main buttons are clicked.
Unlike buttons, Tooltip and Dialog are components that depend on a user action to be displayed. This action triggers a motion which, in addition to displaying the component on the screen, also directs the user's gaze. Thus demonstrating that, at that moment, this is the most important information.
In the image, you can see that both components use the same tokens (scale, opacity and time), what changes between them is only the position of the so-called "anchor point", which is the point where the animation starts.
Example of the Tooltip and Dialog components being triggered by the user.
Motion tokens
Design tokens play an extremely important role in maintaining standards and consistency in the application of a design system. For this reason, what we call "motion tokens" have also been defined. So, when you want to add movement to a new component, there are already some predefined patterns that can be applied according to its function, size and purpose.
Among the tokens defined, the time tokens - illustrated in the image - are a good example of how the movement patterns were designed to work at scale.
Each token has its own characteristics and has defined when it should be applied, so together with the complete motion documentation, it is clear at what times that token should or should not be used.
Motion applied to user journeys
In addition to the motions applied directly to the components, work was also done on applying specific movements to each journey.
The main objective of individualized motion work in a journey is to better explain more complex content, and also to bring celebration moments to the user. This consequently improves the understanding and receptiveness of the user.
Graphics in motion
Graphs display information that is mostly very complex, and this makes it difficult for people to understand and lose interest in them.
That's why adding movement to graphics can help both to improve understanding and to highlight the information. In this way, you can direct the user's gaze to the information at the right moment. In addition, motions also make lines, bars or circles and their numbers more interesting.
Here are two examples of the same information being presented to users, but in completely different ways. The first is a line graph and the second is a bar graph. There is no right or wrong, but rather which one best suits what you want to convey and highlight.
Example of a user journey with animated graphics to encourage the user to achieve their goals.
Like it? Check out other projects:
Global loader: scalable, customizable and accessible
As part of Santander's UX team, I had the opportunity to create a new loader to be used by all countries in their apps and digital platforms. This project was part of a global challenge in which my proposal was the winner.
Quati Curioso Expedition
A gamified digital educational platform for use in the classroom in the early years of elementary school. As coordinator, my responsibility was to work with the team to find the best experience and interface, with the main goal of having educational content accessible to as many people as possible.
EN 
PT