Luana

Connect

Select Language

English

Redesign of the Smiles App following the new design system

How we revamped the Smiles App by reducing platform maintenance time and improving the user experience.

Context

The project arose from the need to realign the Smiles application with the company's new design guidelines and migrate the technology to React Native. We used the "As Is App" approach, maintaining the business rules of the product, but modifying the design and the technology used. In this way, we were able to ensure that the changes were applied without impacting the users' learning curve.

Old components

Visual inconsistency

Impaired accessibility

Impact on usability

Outdated language

Features addressed

Flight issuance

My flights

Menu and Navigation

Registered cards

Uber

Mileage purchase

Smiles Club

Checkout

Back Credit

Radar Smiles

My orders

Smiles Mission

Notifications

Cobranded

Extract

My category

Favorite passenger

Account cancellation

Reactivation of miles

My account

Immersion

Phase 1

At this stage, the business and product teams had already defined their objectives and strategies. In the design team, we conducted an immersion in the functionality, analyzing the existing context in the application and evaluating the best practices adopted in the market for similar products.

Mapping the scenarios

At first, together with the Product Owner, we mapped all existing scenarios in the functionality. It was a challenging task, as it was necessary to test with different types of users, such as Gold and Diamond customers, Smiles Club members, and other types of customers from the company. Each of these users could present different scenarios and messages, and all had to be included in the As-Is.

Analysis of competitors

To better understand the context of the product, we conducted a benchmarking analysis. During this analysis, we examined best practices, market trends, and competitors' strategies. This approach allowed us to identify valuable insights and implement improvements to the product.

Design

Phase 2

In this phase, we developed the high-fidelity prototype and created new components, following the guidelines of the Design System. This stage also involved organizing the flow, demonstrating the interactions between the screens, and, in some cases, creating a navigable prototype.

Highlights in the screen design

UX Writing

During the design process, we had someone on the team dedicated to reviewing the Writing on the screens. With this support, we were able to map out improvements in the flows and maintain a friendly language in accordance with Smiles' tone of voice.

Mapping of improvements

Although we are limited by the As-Is, we had the opportunity to suggest usability improvements in the flows. These suggestions went through design approval and analysis with the squad to understand feasibility and were included when possible.

Illustrations

We use illustrations to reinforce the friendly tone that the brand wants to establish with the audience. The error messages have been softened, and the success screens have a greater positive impact with the use of illustrations.

Consistency

One of the big challenges was maintaining consistency between flows that were worked on by different designers. The Design System was an ally in this aspect, along with the constant exchange among all the designers on the project.

Validation
and delivery

Validation and delivery

Phase 3

At this stage, we developed the high-fidelity prototype and created new components within the guidelines of the Design System. This phase also involved organizing the flow, demonstrating the interactions between screens, and in some cases, creating a navigable prototype.

Validation rites

At this stage, two meetings were held: one with the Smiles design team to assess consistency with the Design System and propose changes to the flow, and another with the product stakeholders to verify compliance with the strategy and business rules of Smiles.

Meeting with the Smiles Design team

Meeting with the Smiles Business team

Project validated for development!

Handoff
and tests

Handoff and tests

Phase 4

At this moment, there was a transfer of technical information between the product team and the development team. At this moment, we evaluated together the available possibilities in code and defined strategies to handle technical limitations. After this moment, the project was developed and in the end, we met with the QA person to assess whether what was built by the development team was in accordance with the prototype delivered by the design team.

In this phase, we developed the high-fidelity prototype and created new components, following the guidelines of the Design System. At this stage, the organization of the flow also took place, demonstrating the interactions between the screens and, in some cases, creating a navigable prototype.

Design reflecting the service

During the validation with the development team, we encountered some limitations of information coming from the service (back-end) that could not be modified. Elements such as icons and spacing that were not in the service could not be modified on the front end layer; thus, some adjustments were necessary.