UX case study
Sillage
Designing an all-in-one trip planner for travelers who plan everything
At a glance
One place for the whole trip
Problem
Trip ideas, bookings and times were spread across Docs, Sheets, Calendar, Maps and email.
Goal
One app that holds the itinerary, the map, reservations, links and packing for a trip.
Outcome
A working desktop and mobile prototype, tested on a real four-day trip to Colombia.
My role
Solo product designer and builder, from concept to coded prototype.
Timeline & tools
1 month. Figma for the first designs, AI-assisted coding to build and iterate.
Methods
User interviews, affinity mapping, a real-trip test, accessibility audit.
The name
A trail to follow
sillage /see·yazh/ · French
The wake a boat leaves on the water, or the trail of scent someone leaves behind. Sillage plans the trail you'll follow and keeps a record of the one you left.
The dashed route line runs through the product: map routes, the connectors between activities, empty days.
Cormorant Garamond
Titles, places, days
DM Sans
Times, labels, controls
The problem
Trip plans lived in five different apps
My friends, colleagues and I are type-A travelers. We plan a lot, and the plans ended up in too many places. Keeping those plans in sync across tools was the hardest part of planning.
Ideas and notes
Bookings and costs
Times
Saved places
Confirmations
One trip, one place
User research
Interviews across the planning spectrum
Detailed planners (Type A)
“I have a spreadsheet, a doc and a calendar for every trip, and they never match.” Need: one timeline they can trust.
In between
“I save places on a map and forget which day I meant to go.” Need: places tied to days.
Go with the flow (Type B)
“I just need my bookings and confirmation codes when I land.” Need: fast access, no setup.
Pain points
Four problems the interviews surfaced
1 · Scattered
Each detail lives in a different app, so nothing shows the full plan.
2 · Timing
Lists don't show overlaps, tight transfers or empty days.
3 · Place
Saved pins have no order, so the route across a day is a guess.
4 · Packing
Packing lists are disconnected from what the trip involves.
Version 1
The first build covered the basics
I designed the first version from the interview findings: itinerary, reservations, links and packing in one sidebar. Using it on a real trip showed what was missing:
- Activities kept the order they were added, not the order of the day
- Dates as 2026-05-19, with no weekday or city
- Map tiles blocked by an API key watermark
- Emoji were the only way to tell categories apart
Iteration
Each version 1 issue mapped to a fix
| Area | Version 1 | Now |
|---|---|---|
| Timeline | Order of entry | Sorted by time, with travel time and tight-transfer warnings |
| Days | 2026-05-19 | Tue, May 19 · Medellín, plus prompts for empty days |
| Map | Watermarked tiles, loose pins | Numbered stops on a dashed route, filtered by day |
| Reservations | A list of booked items | A wallet with codes to copy and confirmed or pending status |
| Packing | Manual checklist | Suggestions drawn from the plans, with a reason for each |
| Overview | None | A Trip check that lists what still needs attention |
Final prototype · desktop
Planning the whole trip on desktop
Trip check flags the 5-minute gap between landing and check-in.
Detailed, Week and Map share one data set.
Quick add accepts plain sentences.
Final prototype · mobile
Checking the plan on the go
Same data on mobile: bottom tabs, a quick-add button and bottom sheets.
- Bottom tabs reachable with one thumb
- Forms open as bottom sheets
- Every tap target is at least 44px
Color
A warm palette with tested contrast
Background
Text · 17.3:1
Secondary · 8.5:1
Meta · 5.1:1
Accent · 4.6:1 · white on it 5.0:1
Category colors (Flight, Stay, Activity, Meal, Transport) share one lightness and chroma, so none stands out more than another. Each measures 4.8–5.3:1. The audit caught Activity at 4.4:1 and the dark-theme accent at 3.8:1; both were adjusted.
Accessibility
Readable at a glance, by anyone
1 · 4.5:1 minimum
All text meets WCAG AA on cream, including the faintest meta text.
2 · Never color alone
Every category dot has a text label; warnings use an icon and words.
3 · Two type roles
Serif for names and places; sans with tabular numbers for times.
4 · Reachable controls
44px touch targets, visible focus states, a dark theme, and Undo after deletes.
AI in the experience
Where AI removes the typing
Natural-language quick add · in prototype
“Dinner at Carmen 20:30 day 2” becomes a meal on Day 2 at 20:30.
Paste a booking email · concept
“Avianca · AV9P3L · MDE→CTG 19:30” becomes a flight on Day 3 with the code saved.
Smart packing · concept
Forecast, plans and past trips: “Rain jacket: afternoon showers in Medellín.”
Group-chat summarizer · concept
A pasted group chat becomes decisions and open questions, ready to accept.
Takeaways and next steps
What I learned, and what comes next
Use it on a real trip
Real use showed problems that a review in Figma didn't: order, timing, gaps.
Building is designing
Coding the prototype with AI let me test ideas in hours instead of drawing them.
Test with other travelers
Usability sessions with the friends and colleagues who inspired it.
Shared trips and offline
Group editing, budgets, and access without a signal abroad.
Prefer slides?
See this case study as a slide deck
A condensed, presentation-ready version of this project that's easy to skim or share.
Want to talk it through? Message me @ reahrajmangal@gmail.com
