02 / BaconAI
Live product
Product design and build, solo
A trip page reshaped over three rounds of critique.
A travel planner where the itinerary and the map follow the same numbered order, so a day reads as a route.
- 3rounds of redesign on the trip page
- 1of my own decisions reversed
- Liveand free to try
Built with Next.js, TypeScript, Tailwind, shadcn/ui, Framer Motion, MapLibre and MapTiler. Try it live (new tab)
The problem
A wall of text, or a map full of pins with no order.
Most trip planners hand you one or the other. BaconAI puts both side by side: an itinerary split into days, each with timed stops and a theme, and a map whose numbered pins follow the same sequence.
Finding a direction
From generic dark to warm editorial.
The first version was a dark hero with white text, the default look of a hundred demos. I compared a few directions and chose a warm magazine style: cream paper, charcoal text and one coral accent.
The first landing page read like a sales page. I stripped it back so the empty space did some work: one field that accepts a plain sentence, quick-pick destinations so nobody faces a blank box, and three steps underneath.
The decision that changed it
Three rounds on the trip page, and one U-turn.
Each round started with me using it and writing down what felt wrong. Round one: the buttons were too small, the sharp corners felt hostile, and the map looked awkward squeezed at the side.
Round two: I made each stop open the map on itself. Round three: I reversed that, because you lost the overview of the day. Every stop is now plotted from the start, day filters narrow the map, and opening a stop offers three nearby alternatives you can swap straight in.
Opening the map per stop turned out worse. I reversed my own decision.
Plans that work on the ground
A route, not a scatter.
An itinerary that zigzags across a city looks fine as a list and falls apart on a map. The planner clusters each day by neighbourhood, respects opening hours and meal times, leaves travel time between stops, and keeps a comfortable pace.
Every stop shows the address, how long to allow, and whether it's free or roughly what it costs. Alternatives carry the same details, so you're comparing like with like.
What I took from it
Cost shaped the product, and that is part of the design job.
I switched mapping providers for a free tier, and the language model behind the planner changed three times as free tiers ended. Knowing what a platform will actually cost, and letting that reshape the experience, belongs in the design.
Highlighting a stop used to make the map stutter, because every change redrew it. Updating the map directly made selection feel instant. An engineering fix, but I only found it because the interaction felt off.