tato.

Tato-007 · Case Study · Travel · 2019

Building Avantrip's design system, component by component

Avantrip is an online travel agency. This case study follows one process end to end: component-level studies of product cards, cluster cards, headers, and search boxes, that fed directly into the homepage redesign shown at the end. This is a small sample of the work done there.

Role: UI/UX Designer Tool: Sketch Year: 2019
↓ Begin the tour
—

Overview

Avantrip is an online travel agency where I worked on many parts of the site over several years. This case study highlights one process: component-by-component studies of the pieces that make up the homepage, followed by the Landing HD, the design that came out of that analysis.

I.

Component Studies

Before redesigning the homepage, I documented each of its recurring pieces on its own: what it is, when a user sees it, where it appears across the site, and every state it needs to support. Five of those studies are below, presented as they were presented to the client.

Product Card

Anatomy of the card used across every vertical — flights, hotels, packages, cars, cruises — in both its full and minimal variants.

Your browser can't preview PDFs inline. Open the PDF ↗

Open in a new tab ↗

Cluster Card

The card used to group several related results together.

Your browser can't preview PDFs inline. Open the PDF ↗

Open in a new tab ↗

Headers

Navigation, logo lockups, and color variants for light and dark contexts.

Your browser can't preview PDFs inline. Open the PDF ↗

Open in a new tab ↗

Search Box

The general-purpose search box shared across verticals.

Your browser can't preview PDFs inline. Open the PDF ↗

Open in a new tab ↗

Search Box — Hotels

A variant of the search box tailored to hotel search: destination autocomplete, dates, and guests.

Your browser can't preview PDFs inline. Open the PDF ↗

Open in a new tab ↗
II.

Landing HD

The homepage that came out of all five studies above — every card, header state, and search box behaving exactly as documented. Click to explore the full page.

Full Avantrip homepage design, a long scrolling landing page built from the component studies above
Landing HDThe full homepage, assembled from the components studied above. Click to zoom.
—

What this demonstrates

Redesigning a homepage all at once tends to produce a page that looks good in a mockup and falls apart in production, because nobody agreed on how the pieces behave in isolation. Studying each component first, including its edge cases, meant the final landing page was mostly assembly, not negotiation.

Next projects