Triply
A high-fidelity, function-complete itinerary planner that lets users discover stops, plan day by day, book flights and stays, and trace their route on a live map without ever losing their place.
2026
Frontend Prototyper
- Next.js
- TypeScript
- Tailwind CSS v4
- Shadcn UI
Tech Stack
Technologies and tools used to bring this project to life.
- Next.js
- TypeScript
- Tailwind CSS v4
- Shadcn UI
- Motion
- React Context
- Figma
My Role
Frontend Prototyper • A few of the surfaces I shaped on this project
Map exploration with pin details
Every place on the map opens an in-context card with photos, summary, and a direct save-to-itinerary action. The map and itinerary share the same state, so adding a stop here updates the day plan in real time.
Adding stops to the itinerary
Adding a location surfaces a focused sheet for day, time, and notes, then commits straight into the persistent itinerary store so the change appears everywhere the user lands next.
Flights search
A full search and results flow with filters, sort, and date-range navigation, designed to match the rest of the surfaces so booking does not feel like a hand-off to a third party.
Stays search
Hotel browsing with map-anchored cards, price filters, and a save action that ties each stay directly to the matching leg of the trip in the itinerary.
Triply was engineered as a function-complete prototype to support real user testing rather than a scripted click-through. Users can jump from the middle of a planning flow to the map, open a pin, swap a stay, and land back in the itinerary with every choice still intact.
I translated the full Figma file into a Next.js application, mapping every design token (the glass surfaces, the type ramp, the brand palette) into Tailwind v4 with a Shadcn UI component set. Micro-interactions and transitions were rebuilt with Motion so the prototype feels the way the design was meant to read.
The biggest UX iteration came after the first round of desk critiques. The original hero was confusing users about where to start, so I consolidated destination, dates, and travellers into a single Fast Planning hub and routed every entry point through the same shared planning state.