Evolving Arengu’s core
Arengu is a startup that offers various no-code solutions focused on facilitating lead generation through the creation of flows, forms and static pages. Backed by Y Combinator, they are one of the most promising Spanish startups.
The Arengu team approached us with the need to evolve and refine the library of components necessary to create their forms. The goal: to improve aesthetics and interaction design to define a scalable and recognizable visual language. To be able to transmit a feeling of "native Arengu" components.
The starting point
The first step was to analyze the components currently offered by Arengu to its users. This task was crucial to ensure the compatibility of the new components with the current version and thus ease the transition for users.
The main observations after the audit: we lacked a system of proportions and spacing, especially rules governing the grouping of related fields. The typography and its hierarchies were another point of improvement: refine sizes and define a harmonious and versatile scale that visually aligned the forms with the aesthetics of Arengu's own brand. At the interactive level, the components lacked certain states and were rigid and cold when giving feedback to the user.
Creating a language
The system to be designed had to be able to respond to two main parameters: structure and interaction.
In terms of structure, we had to study the optimal relationship between label, placeholder and content. One option we considered was to include the label inside the field. We finally discarded this solution. It simplified visually, but it greatly complicated the management of structure and interactivity in a systemic way.
In terms of interaction, we had to define some rules that would help to understand at a glance what is content, selection and interaction. We had to do our best and take care of micro-interaction details that would make the use of the new forms a delight on any device.
A structural system
It was time to bring all these ideas to life. To do so, we worked on several visual concepts in which we were obsessed with the idea of making a rigorous and coherent visual language tangible. At this point, one of our dichotomies was: Line or surface? Our decision: Both. This way we would improve the global perception of each component, guaranteeing accessibility and facilitating scannability.
We refined sizes using a standardized grid of 8px, we proposed a new typographic hierarchy more generous in terms of sizes to improve its readability on mobile. We also defined a system to articulate the vertical rhythm of the forms by means of spacing rules between sections, fields, etc.
We established a tokenized style system that will facilitate decision making when scaling and creating new components, while allowing users to easily customize them from a solid base.
Reinforce through interaction and affordance
To emphasize the response to user actions, we focused on defining the interaction states of each component and its transition. In this way we prepared a documentation contemplating hovers, active states, filled, errors, etc. Beyond aesthetic issues, we decided to increase the overall surface of each component and its interactive elements. In this way we were able to eliminate the frustration, especially on tactile devices, that a user could experience in the previous version of the components.
Providing an identity
All this series of decisions that combine structure, interaction, usability and aesthetics resulted in an interface that breathes timelessness and character. This new interface will help the Arengu team in the implementation of a new repository open to the collaboration of users with optimized groupings of components that will respond to the most generalized needs.
Expertise
Mendesaltaren team
Evolving Arengu’s core
Arengu is a startup that offers various no-code solutions focused on facilitating lead generation through the creation of flows, forms and static pages. Backed by Y Combinator, they are one of the most promising Spanish startups.
The Arengu team approached us with the need to evolve and refine the library of components necessary to create their forms. The goal: to improve aesthetics and interaction design to define a scalable and recognizable visual language. To be able to transmit a feeling of "native Arengu" components.
The starting point
The first step was to analyze the components currently offered by Arengu to its users. This task was crucial to ensure the compatibility of the new components with the current version and thus ease the transition for users.
The main observations after the audit: we lacked a system of proportions and spacing, especially rules governing the grouping of related fields. The typography and its hierarchies were another point of improvement: refine sizes and define a harmonious and versatile scale that visually aligned the forms with the aesthetics of Arengu's own brand. At the interactive level, the components lacked certain states and were rigid and cold when giving feedback to the user.
Creating a language
The system to be designed had to be able to respond to two main parameters: structure and interaction.
In terms of structure, we had to study the optimal relationship between label, placeholder and content. One option we considered was to include the label inside the field. We finally discarded this solution. It simplified visually, but it greatly complicated the management of structure and interactivity in a systemic way.
In terms of interaction, we had to define some rules that would help to understand at a glance what is content, selection and interaction. We had to do our best and take care of micro-interaction details that would make the use of the new forms a delight on any device.
A structural system
It was time to bring all these ideas to life. To do so, we worked on several visual concepts in which we were obsessed with the idea of making a rigorous and coherent visual language tangible. At this point, one of our dichotomies was: Line or surface? Our decision: Both. This way we would improve the global perception of each component, guaranteeing accessibility and facilitating scannability.
We refined sizes using a standardized grid of 8px, we proposed a new typographic hierarchy more generous in terms of sizes to improve its readability on mobile. We also defined a system to articulate the vertical rhythm of the forms by means of spacing rules between sections, fields, etc.
We established a tokenized style system that will facilitate decision making when scaling and creating new components, while allowing users to easily customize them from a solid base.
Reinforce through interaction and affordance
To emphasize the response to user actions, we focused on defining the interaction states of each component and its transition. In this way we prepared a documentation contemplating hovers, active states, filled, errors, etc. Beyond aesthetic issues, we decided to increase the overall surface of each component and its interactive elements. In this way we were able to eliminate the frustration, especially on tactile devices, that a user could experience in the previous version of the components.
Providing an identity
All this series of decisions that combine structure, interaction, usability and aesthetics resulted in an interface that breathes timelessness and character. This new interface will help the Arengu team in the implementation of a new repository open to the collaboration of users with optimized groupings of components that will respond to the most generalized needs.
