Anjali
Emily
Bryan
Where should we go eat?
Tokyo · 4 online

TripJam

Making group trip planning more collaborative, playful, and effortless.

View source
SCROLL
TripJam board for a Tokyo trip: hotel cards with votes and an arrow between them, a post-it, live chat, and the hotels sidebar
Swipe sideways to see the whole board.

TripJam is a collaborative trip-planning canvas where friends can discover destinations, organize ideas, and turn their collective decisions into an AI-generated itinerary. Built during a 24-hour travel-themed hackathon at Carnegie Mellon University.

My role
Concept development, interaction design, front-end engineering
Duration
24 hours
Team
Emily J., Quynh V., Anjali K.
Context
Travel-themed hackathon, Carnegie Mellon University
02 — The problem

Making trip planning feel like part of the adventure.

Planning a trip with friends often means juggling Google Docs, Slides, messages, and in-person discussions. We wanted a more enjoyable way to explore and organize ideas together, instead of coordinating information across several tools.

Design challenge

How might we make group trip planning feel more like collaborative exploration and less like coordinating a document?

03 — The concept

The board is the prompt.

Rather than build another itinerary manager, we imagined a shared canvas where friends collect destinations, arrange cards, vote on places, and collaborate in real time.

The key idea: let the planning itself give the AI its context. By reading the group’s selections, votes, and connections, TripJam can generate a structured itinerary without anyone re-explaining their decisions.

  1. Places sidebar listing hotels near Tokyo

    1Discover

    Collect destinations and ideas.

  2. Two hotel cards on the board with a post-it and an arrow

    2Collaborate

    Arrange, discuss, and vote.

  3. 3Generate

    Transform the board into an itinerary.

04 — Design iteration

Finding structure within freedom.

Our first design put flights, hotels, attractions, and other planning information on one canvas. It was flexible, but became overwhelming as information accumulated.

We tried dimming less relevant items to help people focus. The interface still felt cluttered. So we split the workspace into dedicated planning sections, keeping the canvas interaction while showing less at once.

  1. Conceptual reconstruction1Everything at full volume

    Iteration 1 · Unified canvas

    Everything shared one space. Flexible, but crowded as items piled up.

  2. Conceptual reconstruction2Dimmed, still present

    Iteration 2 · Opacity filtering

    Dimming less relevant items cut some noise, but the canvas still felt cluttered.

  3. The shipped board with Hotels, Attractions, Food and Itinerary focus tabs
    Original screenshot3Focus tabs limit what is visible

    Iteration 3 · Dedicated sections

    Focus tabs separate planning categories: same canvas interaction, less on screen at once.

Open-ended interfaces still benefit from thoughtful constraints.

05 — Interaction design

Bringing personality to the experience.

We wanted TripJam to feel like a space friends would enjoy using together, not another productivity app. I contributed to the interactions below, and treated them as one design language rather than a list of features.

  • Draggable, slightly tilted cards

    Cards are rotated and offset a little, for a more informal feel.

  • Live, together

    Real-time collaboration and live chat keep everyone in the same space.

  • Board to plan

    AI itinerary generation turns the board into a day-by-day plan.

These details gave the interface a tactile, approachable personality and contributed to a polished final demonstration.

06 — Implementation

From prototype to product in 24 hours.

Time was our greatest constraint. Design-focused teammates used Figma and Figma Make to rapidly explore the visual experience while development moved forward on the underlying functionality. We then brought the two together, updating the application to reflect the visual direction.

In collaboration with Emily J., Quynh V., and Anjali K.

Design-focused teammatesFigma and Figma MakeRapidly explored the visual experience.
DevelopmentUnderlying functionalityRooms, presence, place search, voting, and the itinerary endpoint.
Brought together in CursorApp updated to match the visual direction.Screens were reshaped against the real data and interactions.
One productCards, sidebar, toolbar, chat, itinerary.One visual system across the board.
Design exploration
Final TripJam application
The final application

One of my biggest technical challenges was integrating AI with the canvas context: translating selections, votes, and connections into structured information the model could interpret.

  1. CanvasSelections · votes · connectionsWhat the group did on the board.
  2. /api/itineraryStructured context for GrokBoard state translated into a form the model can read.
  3. ItineraryPublished to the roomEveryone sees the plan; it also exports as a PDF.
  • React 19
  • TypeScript
  • Vite
  • Liveblocks
  • Google Places
  • xAI Grok 4.6
Key learning

The time limit pushed us toward quick, reversible decisions we could evaluate and refine, instead of chasing the perfect answer up front.

07 — Outcome and early feedback

What we built, and what we learned.

The final TripJam board for a Tokyo trip
Swipe sideways to see the whole board.

Within 24 hours we had a working collaborative planning prototype: shared boards, destination discovery, voting, real-time interactions, and AI-generated itineraries.

  • Shared boards
  • Destination discovery
  • Voting
  • Real-time interactions
  • AI-generated itineraries

We didn’t win the hackathon, but we were happy with the experience and what we created. Friends reacted positively to the demo, and some mentioned using FigJam to plan their own trips, which suggests a collaborative canvas is relevant to at least some travelers.

08 — Reflections

What I’d take forward.

  1. Freedom needs structure.

    Our canvas iterations showed that flexibility without enough organization creates unnecessary visual complexity.

  2. Fast decisions enable faster learning.

    Working within 24 hours taught me to make reversible decisions, build quickly, and refine through collaboration.

  3. A polished prototype isn’t a complete solution.

    We demonstrated the core concept, but real travel planning brings schedules, group preferences, and logistics we didn’t fully address.

09 — Next steps

Where I’d take TripJam next.

  1. Improve onboarding

    Help first-time users understand how to add destinations, use the canvas, collaborate, and generate an itinerary.

  2. Support complex trips

    Explore different arrival dates, individual availability, conflicting preferences, and day-by-day scheduling.

  3. Validate the core experience

    Test whether people enjoy planning with TripJam, and whether its itineraries accurately reflect their selections and constraints.

Two questions I’d want to answer

Does TripJam make planning a trip with friends more enjoyable than existing tools?

Can AI reliably translate a group’s ideas and constraints into an itinerary they trust?

View source
TripJam · CMU Hackathon 2026