Concept · Solo project · Feb–Apr 2023

The trip, planned in one place — not twelve tabs.

A field journal through Tripling — a travel platform that carries a trip from first idea to last itinerary stop. Twenty-seven screens, read in order, the way a traveler would meet them.

27 screens 5 flows 2 UI systems — light & dark 1 interactive prototype
RoleProduct Designer (solo) TypeSelf-initiated concept ScopeResearch · UX · Visual · Prototyping TimelineFeb–Apr 2023
The problem

Twelve tabs, one trip.

Planning a trip means a hotel search in one tab, a spreadsheet for the itinerary, a group chat for who’s actually coming, and a maps app for what’s nearby once you land. The tools all exist. None of them talk to each other.

Tripling was a bet that discovery, booking, day-by-day planning and the social side of travel belong in one connected flow. What follows is that flow, walked end to end.

The market

The fragmentation shows up in the data, not just the tabs.

This wasn’t only a personal annoyance. The travel industry’s own numbers describe the same problem at scale — and one of its biggest players already tried a version of the fix Tripling proposes, then walked it back.

Expedia · Path to Purchase, 2023

277 web pages, on average, before a single booking.

Up from 38 pages in 2013 — a sevenfold rise across a decade in which every individual booking tool got better and the trip between them didn’t. The tools solved their own step. Nobody owned the whole thing.
Google Trips · shut down, Aug 2019

A dedicated trip-planning app already existed. Google discontinued it.

Trips launched in 2016 to unify reservations, itineraries and day plans, then folded back into Maps and Search three years later. Read honestly, that’s a complication for this idea as much as support for it: the failure argues less that a unifying app can’t work, and more that it has to live inside a habit people already have, rather than ask them to open a new one.

The point solutions that exist mostly specialize rather than unify. TripIt stores itineraries after you’ve already booked elsewhere; Wanderlog pairs a map with a collaborative planner; Roadtrippers is built specifically for driving routes. Each is good at one slice of the trip. None of them is asked to be the whole thing.

The walkthrough

Five stops, one flow.

Stop 01

Sign in & sign up

Splash — the brand moment

The first thing the app asks of you is nothing at all. A wordmark, a lake fading into the gradient, and two ways in — the five seconds of calm before any form appears.

Splash — the brand moment
Splash — the brand moment
Sign in, mid-entry

Sign-in was designed twice: once empty, once mid-entry. This is the second one — a checkmark has already confirmed the username before the password field is even reached.

Every field in the sign-up flow carries the same inline check, with the terms checkbox gating the button. Nothing surprises you after the tap.

Sign in, mid-entry
Sign in, mid-entry
Confirmation

“We sent you an email!” A closed loop with one clear next step — not a silent redirect that leaves you wondering whether anything happened.

Confirmation
Confirmation
Stop 02

Discover & filter

Discover — pick a category

Browsing opens on a question, not a wall of listings: pick a category for your next adventure. A Popular sort up top, a featured strip below, two cards showing.

Discover — pick a category
Discover — pick a category
Sort, applied — the list re-orders

The sort dropdown is the control most apps fake. This one works: switch to Recently added and Mt. Catlin Hotel jumps to the front of the strip, live, on screen.

Three separate states were designed to prove it — closed, open, and applied — because an interaction isn’t designed until its middle frame is.

Sort, applied — the list re-orders
Sort, applied — the list re-orders
Featured — 214 spots

The full list runs 214 spots deep. Deals wear strike-through pricing, and every card carries distance, weather, and a review count — enough to judge without opening it.

Featured — 214 spots
Featured — 214 spots
Filter — one sheet, no detours

Dates, amenities, price range, distance, room count — one tall sheet instead of a chain of pages, so narrowing the list never loses your place in it.

Filter — one sheet, no detours
Filter — one sheet, no detours
Near me — browsing by mood

And when you don’t know what you’re looking for, the app stops asking: Nature’s Light, Cultural, Modern Life, Sun & Sand — moods with spot counts, not another sorted list.

Near me — browsing by mood
Near me — browsing by mood
Stop 03

The hotel, considered

Hotel detail

Mt. Catlin Hotel, $967, Chicago. A photo carousel eight frames deep, live weather, and a rating that arrives with faces attached — 8.4 from six thousand votes, three of whom you can see.

Hotel detail
Hotel detail
Top reviews

The votes break open into reviews you can actually read — praise, complaints, a three-star “Not worth the hype!” left in — because a trustworthy average is one you can argue with.

Top reviews
Top reviews
Map — the hotel, situated

The same hotel, now on a map: pinned, routed from where you stand, the full address written out, and a phone call one tap away. Get directions closes the loop between deciding and going.

Map — the hotel, situated
Map — the hotel, situated
Saved — 72 items

Everything bookmarked collects in one place — 72 experiences at last count — instead of dissolving into a browser history. This is where trips actually start.

Saved — 72 items
Saved — 72 items
Stop 04

Plans, not just bookings

Explore — written like a recommendation

Editorial, not just algorithmic: “an exquisite trip you’ll rave about to your friends” is copy with a point of view, written the way a friend recommends — not the way a database returns.

Explore — written like a recommendation
Explore — written like a recommendation
Day plan — hour by hour

The screen a spreadsheet usually ends up being: breakfast at 9:00, camel riding after, each block with its own photo and note. An itinerary that was designed, not exported.

Day plan — hour by hour
Day plan — hour by hour
Dates — coarse, then fine

Picking dates happens in two steps — month first, then the day on a proper calendar grid. Coarse before fine, which is how people actually think about when to travel.

Dates — coarse, then fine
Dates — coarse, then fine
Bookings — one itinerary

Hawaii to Sevilla, Sevilla to Monaco, Atlanta to Marrakech — flights, trains and ferries as one running itinerary rather than a stack of confirmation emails in four inboxes.

Bookings — one itinerary
Bookings — one itinerary
Stop 05

The people you travel with

A traveler’s profile

The social layer treats a traveler as someone worth following: twelve thousand followers, forty-eight trips, a bio, a place. Travel apps usually skip this part; here it’s a first-class surface.

A traveler's profile
A traveler’s profile
A real thread

“Hey, ready for the trip?” A real conversation — text, a shared photo from 2016, a NEW divider marking where you left off. Built like messaging, not like a support-ticket log.

A real thread
A real thread
Activity — one feed

Follows, review likes, and the reviews themselves thread into one timeline instead of four notification types. The feed reads as what happened, not as what the app wants tapped.

Messages split active threads from the archive; settings sit behind three tabs. The unglamorous screens got designed too — that’s most of what makes a concept feel shippable.

Activity — one feed
Activity — one feed
Field notes

Before the screens: paper, then a map of all of them.

First pass · on paper

Conceptualization sketches

Hand-drawn wireframe sketches covering sign-in, sign-up, the featured list, hotel detail, map view, side menu, messages, bookings and settings
Tens of sketches and white-boarding sessions, narrowed to the screens that made the cut — sign-in to settings, first pass on paper.
Second pass · 27 screens, 5 flows

The interaction map

Full interaction flow diagram: sign-in and sign-up branch into a shared discovery flow, which forks into hotel booking and curated experiences; a side rail reaches profile, messages and activity; a separate thread handles bookings and trip dates
The interaction model — every screen plotted into one map before any went to high fidelity, so the navigation got tested as hard as the screens did. Every arrow became a transition in the prototype.
Notes on the system

Two registers, one accent.

The interface runs on two registers: a warm gradient for the moments that are about you — splash, sign-in, your profile — and near-black for the moments that are about the world — browsing, booking, planning.

Everything below is read out of the working file rather than eyedropped from a screenshot, so the values are the authored ones and the counts are real.

The gradient — one ramp, 257 uses
#D23078 0% #FE6161 72.6% #FF7955 100%

One three-stop ramp does every warm surface in the app. On the splash it carries a second layer: a greyscale lake plate at 15% opacity — which is why that screen reads as weather rather than as a photograph. Same treatment as the cover of this page.

Two accents, two jobs
#E9486Daction · 238 uses
#F4327Factive / selected · 150

The softer pink is what you press; the hotter one is what is currently on — the selected tab, the filled bookmark, the live dot on the nav.

Neutrals — a ten-step grey ramp, no tint
FFF EEE DADADA CCC AAA 888 666 444 333 222

Pure neutral, deliberately. With a gradient this saturated carrying the brand, any warmth in the greys would have muddied the dark screens — so the ramp stays untinted and the colour does all the talking.

Type — Montserrat, three weights
Pick a categorySemiBold · screen titles · 219 uses
Mt. Catlin HotelMedium · card and list headings
Located in the heart of downtown Chicago, this luxury hotel offers elegant rooms.Medium · body · 381 uses, the workhorse
NEAR MEBold · tabs and micro-labels · 35 uses

One family, three weights, and the hierarchy carried by size and case rather than by adding faces. Medium does the bulk of the work; Bold appears only where a label needs to read as a control.

Components — the primitives that recur
Get directions
Primary — gradient fill
Login
On gradient — white fill
Create an account
Secondary — ghost outline
+ FiltersSee all ›
Chips — filter and overflow
22°Sunny♡ 4k☐ 766
Card meta — weather, likes, reviews
8.4+6k Votes★★★★☆
Rating cluster

Every card in the app is the same object with different content: image, title, price and distance, then a meta strip. Learn it on the featured list and you already know how Saved, Explore and Bookings work.

Surfaces
Light — about youSplash · sign-in · profile
Dark — about the worldDiscover · hotel · bookings
The prototype

Click through the whole thing yourself.

Every flow above — plus the states that don’t make it into a case study — lives in the Figma prototype, exactly as designed.

Play the prototype