Launching our new forms UI: reasons, process and results

At Arengu, we have been working, for some time, on taking forms to the next level. Not only at a functional level, but also at a design and UX level, aiming to make the use of something mundane, such as online forms, a special experience.

We were aware that we needed to evolve and refine the library of components that allow us to create the forms, in order to improve their aesthetics and interaction design. The goal: to define a scalable and recognizable visual language. 

To achieve this, we decided to enlist the help of the Mendesaltaren team, which helps companies around the world to ship beautiful digital products.

The start point

Of course, the first step was to analyze the current components. A crucial task to ensure the compatibility of the new components with the existing version, to facilitate the transition for our clients and users.

The main conclusion, after this audit, was that current components lacked a system of proportions and spaces, fundamental rules that regulate the grouping of related fields.

The typography and its hierarchies were another point of improvement: sizes had to be refined and we needed to define a harmonious and versatile scale that would visually align the shapes with the aesthetics of the brand.

At an interactive level, the UI components lacked certain states, and were rigid and cold when providing feedback to the user.

Defining a visual language

The proposed system had to be capable of responding to two major parameters: the structural and the interactive. In terms of structure, we had to study the optimal relationship between label, placeholder and content.

One option was to include the label inside the field but we ended up discarding it. While it was visually simplified, it greatly complicated the management of the structure and interactivity in a systematic way.

At the level of interaction, we had to define rules that help understand, at a glance, what the content, selection and interaction are. We had to take care of micro-interaction details that would make the use of the new forms a delight in any device.

A consistent structural system

To land all these ideas, we worked on different visual concepts in which we became obsessed with the idea of ​​making a rigorous and coherent visual language tangible. 

At this point, one of our biggest dichotomies was: Line or surface? Both. Finally, our decision included both options. This way, we would improve the global perception of each component, while guaranteeing accessibility and facilitating scannability.

We decided to refine sizes through a standardized 8px grid, proposing a new generous typographic hierarchy, to improve readability, especially on mobile devices. A system to articulate the vertical rhythm of the forms through spacing rules between sections, fields, etc. was also implemented.

We established a tokenized styling system that will make it easier to make decisions when scaling and creating new components, while allowing users to easily customize them from a solid foundation.

Interaction states and transitions

To emphasize the response to user actions, we especially focused on defining the interaction states of each component and its transition. 

For this, we prepared documentation focusing on hovers, actives, filled, errors, etc. Beyond aesthetic issues, we made this decision to increase the overall surface area of ​​each component and its interactive elements.

This would eliminate frustration, especially on touch devices, that users might experience in the previous version of the components.

The result: A timeless and user-friendly identity

All this series of decisions that combine structure, interaction, usability and aesthetics have crystallized in an interface that breathes timelessness and character.

The new interface and design system will help us in the implementation of a new repository open to user collaboration, with groups of optimized components, that will respond to the most generalized needs.

Do you want to try the new UI? Sign up to Arengu for free.