Smiles
Smiles
Overview
Flight search redesign
Area
Travel/loyalty
Year
2020 — 2021
Context and role
Smiles is the loyalty program of GOL, one of Brazil's largest airlines. I was a Product Designer on the Smiles project for two years. On flight search, I owned the visual direction, components and screens, working in a pair with a UX Designer who led architecture and research, inside a team with a UX Writer and a Design Lead.
Context and role
Smiles is the loyalty program of GOL, one of Brazil's largest airlines. I was a Product Designer on the Smiles project for two years. On flight search, I owned the visual direction, components and screens, working in a pair with a UX Designer who led architecture and research, inside a team with a UX Writer and a Design Lead.
The short version
Problem: flight search, the most important tool on the site, was buried in a page of banners, and marketing could not afford to lose the offers.
Decision: we tested a bold inherited concept that cut the first fold down to a single banner and broke the search convention. I designed a conventional search that lives alongside a carousel with strict rules.
Insight: testing caught a flow that every participant completed and none understood, something completion rates would have called a success.
The short version
Problem: flight search, the most important tool on the site, was buried in a page of banners, and marketing could not afford to lose the offers.
Decision: we tested a bold inherited concept that cut the first fold down to a single banner and broke the search convention. I designed a conventional search that lives alongside a carousel with strict rules.
Insight: testing caught a flow that every participant completed and none understood, something completion rates would have called a success.
Usability test participant
"I'm already tired just looking at all this orange and things flashing around."
Usability test participant
"It feels like everything is crammed together. Lots of things repeated."
Usability test participant
"I'm already tired just looking at all this orange and things flashing around."
Usability test participant
"It feels like everything is crammed together. Lots of things repeated."
Usability test participant
"I'm already tired just looking at all this orange and things flashing around."
Usability test participant
"It feels like everything is crammed together. Lots of things repeated."
A search with no priority
On the old homepage, flight search competed with a page made almost entirely of banners, with orange on nearly every element. The challenge was to give the search back its place as the primary action without removing the offers that marketing and business teams depended on.
Research ran in two rounds with real users, plus a benchmark of other companies in the sector. The first was a remote perception test with 11 participants (8 customers, 3 non-customers), comparing early proposals with the live site. The second was a set of remote moderated tests with prototypes, with 12 participants (6 customers, 6 non-customers).
A search with no priority
On the old homepage, flight search competed with a page made almost entirely of banners, with orange on nearly every element. The challenge was to give the search back its place as the primary action without removing the offers that marketing and business teams depended on.
Research ran in two rounds with real users, plus a benchmark of other companies in the sector. The first was a remote perception test with 11 participants (8 customers, 3 non-customers), comparing early proposals with the live site. The second was a set of remote moderated tests with prototypes, with 12 participants (6 customers, 6 non-customers).
The concept that was right in theory
The concept came from another team and was built on 11 in-person discovery interviews, run before our work, with people from 25 to 66 years old, customers and non-customers. Some said they already knew where and when they were going: "I would just search the destination directly, I wouldn't keep looking for the cheapest deals of the week."
So the home asked a single question, "Where do you want to travel?", with the origin pre-filled from geolocation. Dates came on later pages, one at a time, with a calendar showing the price in miles per day. The first fold shrank to a single banner, replacing the offers carousel. The logic was real: one decision per screen.
The concept that was right in theory
The concept came from another team and was built on 11 in-person discovery interviews, run before our work, with people from 25 to 66 years old, customers and non-customers. Some said they already knew where and when they were going: "I would just search the destination directly, I wouldn't keep looking for the cheapest deals of the week."
So the home asked a single question, "Where do you want to travel?", with the origin pre-filled from geolocation. Dates came on later pages, one at a time, with a calendar showing the price in miles per day. The first fold shrank to a single banner, replacing the offers carousel. The logic was real: one decision per screen.
3
3
3
2
2
2
4
4
1
1
1
4
No banners on the first fold, only a single banner left
One question on the home: “Where do you want to travel?”
Origin pre-selected from geolocation
One decision per screen, with a price-in-miles calendar
No banners on the first fold, only a single banner left
One question on the home: “Where do you want to travel?”
Origin pre-selected from geolocation
One decision per screen, with a price-in-miles calendar
I explored it next to two other directions and did not follow it, for three reasons that pointed the same way:
Usability: We had flagged a less conventional search in the analysis, and early testing confirmed it: the change in the order of things bothered people right away.
Benchmark: No other company in the sector did anything similar. People arrive with a mental model built across every travel site they have used: origin, destination and dates together, in that order.
Business: Replacing the offers carousel with a single banner was too big a change for marketing and business teams to approve.
I chose the direction that met both sides: a conventional search, and a place for offers.
I explored it next to two other directions and did not follow it, for three reasons that pointed the same way:
Usability: We had flagged a less conventional search in the analysis, and early testing confirmed it: the change in the order of things bothered people right away.
Benchmark: No other company in the sector did anything similar. People arrive with a mental model built across every travel site they have used: origin, destination and dates together, in that order.
Business: Replacing the offers carousel with a single banner was too big a change for marketing and business teams to approve.
I chose the direction that met both sides: a conventional search, and a place for offers.
Proposal 1 (the concept)
Minimal search card, one decision per screen
Proposal 2
Image-led hero with the search bar underneath, offers carousel kept
Proposal 3
search on a flat background, no image, offers in showcases below the search
A search that leads, offers that support it
A search that leads, offers that support it
The carousel stayed, with stricter rules for brand use and composition, so the page went from "everything is a banner" to "the search leads, and the offers support it."
Taking the text out of the image changes who the carousel works for. Marketing can update copy without commissioning a new image, and every banner stays consistent by construction.
Orange stopped dominating the page. It now marks what is interactive.
The search itself follows the order people think in. Trip type comes first, top left, because it changes the fields below. Origin, destination and dates sit in one row. Required fields are set apart from the items that already have defaults.
The carousel stayed, with stricter rules for brand use and composition, so the page went from "everything is a banner" to "the search leads, and the offers support it."
Taking the text out of the image changes who the carousel works for. Marketing can update copy without commissioning a new image, and every banner stays consistent by construction.
Orange stopped dominating the page. It now marks what is interactive.
The search itself follows the order people think in. Trip type comes first, top left, because it changes the fields below. Origin, destination and dates sit in one row. Required fields are set apart from the items that already have defaults.
Dates inside the search
In my first version of the conventional search, dates still came on a separate page, because the plan was to show the price in miles for each day, so people could pick a date by what it cost. Technical and business constraints made that price impossible to show, and without it the separate page had no reason to exist. I moved the dates into the search, next to origin and destination, the pattern across flight-booking sites.
Dates inside the search
In my first version of the conventional search, dates still came on a separate page, because the plan was to show the price in miles for each day, so people could pick a date by what it cost. Technical and business constraints made that price impossible to show, and without it the separate page had no reason to exist. I moved the dates into the search, next to origin and destination, the pattern across flight-booking sites.
A lighter version of the geolocation idea
Instead of deducing and pre-filling the origin, the field suggests airports based on the person's location. In testing, participants filled origin and destination without trouble.
A lighter version of the geolocation idea
Instead of deducing and pre-filling the origin, the field suggests airports based on the person's location. In testing, participants filled origin and destination without trouble.
Language from the tests
On the old search, "cabin" was airline jargon: "The word cabin bothers me. Cabin is very airline language, the general public doesn't use the term. [...] I need to understand what you mean by it: seat or class?" We renamed it "class" and kept the same default.
Language from the tests
On the old search, "cabin" was airline jargon: "The word cabin bothers me. Cabin is very airline language, the general public doesn't use the term. [...] I need to understand what you mean by it: seat or class?" We renamed it "class" and kept the same default.
Hero and flight search
I repositioned the search component over the offer carousel, with a dark overlay applied to the images. The decision was intentional: I wanted users to feel, when clicking into the search field, that they had entered a focus mode. The darkened background removes any visual competition and clearly signals that the primary action is underway.
I reorganized the fields to reflect the natural thinking process of someone searching for a flight: origin, destination, date. I visually differentiated the required fields (airports and dates) from items with preset defaults (trip type, passengers, cabin class), making the form easier to scan.
On mobile, I introduced a compact version that keeps the offers visible on the first fold. When the user interacts with it, a dedicated search page overlays the content with all fields available, solving the cross-device inconsistency without sacrificing content space.
Hero and flight search
I repositioned the search component over the offer carousel, with a dark overlay applied to the images. The decision was intentional: I wanted users to feel, when clicking into the search field, that they had entered a focus mode. The darkened background removes any visual competition and clearly signals that the primary action is underway.
I reorganized the fields to reflect the natural thinking process of someone searching for a flight: origin, destination, date. I visually differentiated the required fields (airports and dates) from items with preset defaults (trip type, passengers, cabin class), making the form easier to scan.
On mobile, I introduced a compact version that keeps the offers visible on the first fold. When the user interacts with it, a dedicated search page overlays the content with all fields available, solving the cross-device inconsistency without sacrificing content space.
THEMED SHOWCASES
Instead of keeping products in generic banners, I proposed themed showcases: one module per category (flights, hotels, cars, Smiles Shopping), each with a horizontal card carousel, its own visual hierarchy, and product-specific imagery, such as city photos for flights, room photos for hotels, and product images for the Shopping section.
The choice of cards in a horizontal carousel was deliberate: each product has its own image that is an essential part of the purchase decision, and horizontal scrolling is an established pattern that lets you surface many options without extending the page vertically. The modules can be reordered, activated, or deactivated depending on context, solving the maintenance problem entirely.
In parallel, another team was working on personalized recommendations based on customer profiles and behavior. The showcase structure I built was reused in those contexts as well, including suggestions shown after a flight purchase.
THEMED SHOWCASES
Instead of keeping products in generic banners, I proposed themed showcases: one module per category (flights, hotels, cars, Smiles Shopping), each with a horizontal card carousel, its own visual hierarchy, and product-specific imagery, such as city photos for flights, room photos for hotels, and product images for the Shopping section.
The choice of cards in a horizontal carousel was deliberate: each product has its own image that is an essential part of the purchase decision, and horizontal scrolling is an established pattern that lets you surface many options without extending the page vertically. The modules can be reordered, activated, or deactivated depending on context, solving the maintenance problem entirely.
In parallel, another team was working on personalized recommendations based on customer profiles and behavior. The showcase structure I built was reused in those contexts as well, including suggestions shown after a flight purchase.
Outcome
The Homepage redesign put flight search back at the center of the experience and organized complementary products in a way that allowed them to actually be found. But the impact went beyond the Homepage itself. The component library, built in parallel throughout the project, became a shared reference across tracks, reducing rework and bringing consistency to a portal that had started entirely fragmented. It ended up shaping the direction of the whole ecosystem.
Outcome
The Homepage redesign put flight search back at the center of the experience and organized complementary products in a way that allowed them to actually be found. But the impact went beyond the Homepage itself. The component library, built in parallel throughout the project, became a shared reference across tracks, reducing rework and bringing consistency to a portal that had started entirely fragmented. It ended up shaping the direction of the whole ecosystem.
Click to see the prototype
Click to see the prototype
