It is noticeable that companies are beginning to understand the importance of design as a tool for building efficient interfaces. There is a clear rise in the seeking for the evolution of digital products, which generates a demand for new digital solutions.

As a UX/UI designer at Capyba, I’m responsible for designing and optimizing users’ experiences in digital interfaces. So today, I bring you a study of a successful case, in which I elaborate the main points of the project for you to understand more about how we handle the design processes here at the company.

Problem statement

First of all, let me bring some context to the situation. For those who are not familiar with the brand, Alugue Foco is a low-cost car rental enterprise whose mission is to amplify mobility access with innovation.

The stakeholders’ main goal is to increase customer acquisition through a mobile application, bringing a practical and satisfactory experience to their users.

They brought up the necessity of redesigning the app, the first version of which had not been launched yet. At the same time, it would be necessary to structure the system flow, to study the possibility of creating new functionalities and, consequently, new user interfaces.

Furthermore, we would also need to design a new platform for the staff who drives customers from the airport to the store — aiming to improve the communication and to deliver a better service to their clients.

The challenge: all of this would need to be done within one-month scope.

‍

The design process

We followed the design process used at Capyba, a framework based on design thinking, which follows the steps: problem exploration, ideation, prototyping, and testing.

This process is dynamic and, therefore, non-linear. It presents a series of techniques and tools that can be used according to the needs of each project, giving us the freedom to always work in an adaptable and collaborative way.

Especially for this project, we started with two processes in parallel.

The first one was a user interface study in which my goal was to identify the usability problems. For that, we used the Heuristics Analysis, a technique based on Nielsen’s Heuristics to recognize improvement points.

We documented the system interface in criticality levels (low, mid, and high) and described all the issues presented on each screen. The main neglected heuristics were:

• User control and freedom
• Consistency and standards
• Flexibility and efficiency of use
• Aesthetic and minimalist design

As you can see, the application did not present a good performance, both in terms of intuitiveness and standardization of elements with a more clean aesthetic.

We also executed a second analysis, now of competitors, in which we were able to observe the interface patterns focused on the car rental flow in different companies with similar products.

In parallel, we studied all the documents provided by Alugue Foco and the data available on Google Analytics’ website report to understand the users’ behavior. All this material gave us enough information to start a series of interviews with the stakeholders so that we could start mapping the process of vehicle reservations in the company and the real necessities of the drivers and the clients.

The interviews were carried out in one week and, as a result, we could observe these main points:

• The stakeholders miss conveying the company’s value during the journey of its customers, having difficulties in retaining those clients. They also felt like the company brand wasn’t well put in the former interface.
• The company wanted to make the user experience more transparent and intuitive, given the bureaucracy that renting a car naturally demands.
• The clients were not satisfied with the service responsible for driving them from the airport to the store. According to them it was slow, confusing, and tiring. So, it needed to be optimized.
• The clients required more independence. They wanted to be able to manage their reservations anytime and anywhere.

Now it is time to systematize all the inputs. For the user journey, we mapped the flow from the moment of reservation until the car returned to the store and combined it with the system flow — that had the functionalities that were in the first version of the app and the new ones created in a brainstorming session.

‍

Defining the style

Finally, it was possible to start the app’s redesign. First, we need to rethink and define the interface style properly. It is really important to focus on aligning AlugueFoco’s visual identity with the user necessities and the system specifications.

During this process, we thought of key points that would help create the base of the new interface:

‍

Colors

The brand colors are strong and have a high contrast especially when it comes to digital interfaces. Led by a really bright red, the pallet was used to fill a lot of screen space, sometimes even used as a background color. This makes the content difficult to read and does not help in accessibility, making the user journey tiring and confusing.

Back to the redesign, we made the choice of using white as the main color. Thus, the bright red became present only in minor details such as icons and CTA buttons so that it gives importance to the elements while drawing the attention of the users for the main activity — the car reservation.

Voice and Tone

It was necessary to focus on the way we would communicate with the user on the mobile application. The clients must feel protected and taken care of by the brand that recently went through reformulation in its visual identity.

Therefore, we changed the typography to Poppins, which is more friendly and — aligned with a kind, reliable, but also objective language — made the voice of the brand more fitting to AlugueFoco’s identity.

‍

Components

When designing the components, the main goal was to make them clean and simple. All the elements tend to follow design patterns, we also used lots of images to expose the vehicles in the best way possible. The information is presented in a well-defined hierarchy since there is a lot of text on each screen — essential to direct the user in their choices.

As said before, here the red color enters as the highlight color in the CTA buttons and the components’ different states. By providing a better visual hierarchy we delivered a more intuitive and responsive UI, preventing users from making mistakes while using the app.

Style adaptations for the driver’s app

An important point is that, as we define the style, we need to understand that in this project there are two different use cases. The interface for the drivers’ version of the application needed to be adapted for their specific usage: the driver tends to use the cell phone farther away from their face, usually in the device holder on the vehicle’s dashboard. Besides that, they won’t be able to press as many buttons as a regular user could, since they will be interacting with their phones while driving.

Given the context, we changed the size of the components and typography for the driver’s app. All the elements are now bigger and the flow is shorter, making the readability and interactions easier. The amount of text was also reduced to improve the performance.

‍

Documentation

We are near the end of the project and, along with the prototype development, we also started its documentation.

We focused on structuring the Style Guide, a document that describes the design guidelines that were developed during the creation of the solution. This documentation is essential to ensure a more efficient and frictionless handoff for the development team, as it contains the information necessary for the buildout of a standardized and consistent interface.

‍

Final result

It is rewarding to see that this project ended with satisfying results — where we delivered two applications created based on studies and a process focused on solving both users and business problems. After all, we can see how the design process makes it possible to translate the users’ needs, and I’m grateful to contribute to this movement.

Got questions or want to know more about the design processes here at Capyba? Contact us!

‍