From brand book to booking flow.

Watch it run first

Before reading how it was built, watch it run. I creative-directed the videocase documenting the site, the shipped product and the brand system underneath it. It's also where the project's two halves met: the product designer who'd spent months inside a booking flow, and the art director who could still cut a case film.

A brand system waiting to become a product

GOL Linhas Aéreas, one of Brazil's largest airlines, had a new brand system with nowhere to live. It had already been designed and awarded: FutureBrand, 2017, Brasil Design Award Gold in 2019. What it hadn't done was ship on the airline's main digital asset.

The distance between a brand book and a working airline website isn't decorative. An airline site is a booking flow, a check-in, a seat map, a baggage calculator, a status board, a rewards program and an account, all under one brand and all at production traffic. As X.Lab, TV1's digital branch, our job wasn't to invent a visual language. It was to make an existing one hold across hundreds of screens without breaking.

From art direction into product design

This was my first serious product design project, after more than a decade as a Senior Art Director on brand campaigns, films and activations.

Advertising teaches you to design for a hero shot. I wanted to learn to design for a task. So I moved onto X.Lab's UX team and asked for the hardest thing they had, which turned out to be an airline booking flow.

The library was the deliverable underneath the deliverables

The first working artifact wasn't a page. It was the component library. Every brand rule (type, color, spacing, iconography, motion, states) became a component with variants and documentation. We built bottom-up: primitives first (tokens, base components), then patterns (search, filters, cards, forms), then compositions (a booking step, an account page, a status board).

In advertising one hero visual carries a campaign. In product, no single screen matters as much as the system holding two hundred of them together. The library was where I stopped thinking in frames and started thinking in kits.

One system, two surfaces

The site shipped across desktop and mobile as a single system. Every component on desktop had its mobile counterpart, sharing tokens and states. The most-visited flows (search, booking, check-in) were the sharpest tests: they had to work on both, at speed, without losing the brand.

Still the airline's front door, five years on

The site launched in late 2020 and became one of Brazil's largest airline websites. As of 2025 voegol.com.br draws roughly 6.94 million visits a month, an average session of 10:53, and about 88% Brazilian traffic (SimilarWeb / SEMrush).

Art direction is compression: three seconds to land a feeling. Product design is accretion: a thousand small choices about defaults, states, error copy, tap targets, keyboard behavior. Neither is a harder version of the other.

What I picked up here was the agile rhythm underneath product work: atomic design, design systems, component libraries. Not delivering finished visuals, but shipping systems that keep working after I've moved on. Everything I've done in product design since traces back to this project.

Brand system · FutureBrand (2017)
Product design & implementation · X.Lab (TV1 Group), 2020
X.Lab team led by Felipe Accorci and Rodrigo Fernandez Garcia

Sources · SimilarWeb (traffic, 2025) · GOL 2021 annual report (Form 20-F, filed with the U.S. SEC)