Group trip planner app
TripUp
From brief to a working prototype in four days: a group-trip app that decides, splits and settles in one flow.
At a glance
- 4 daysfrom brief to a working, deployed prototype
- Fewesttransfers to settle the group's debts
Challenge
Group trips run on quick decisions and shared money; anything slower loses to WhatsApp.
Approach
Market analysis, wireflow, hi-fi screens and design system in Figma, then the working front-end.
Result
A working prototype of the whole scenario in four days, plus features beyond the brief.
The problem
TripUp, a brand owned by a multi-billion-dollar company, needed a redesign of its group-trip app as the beta gained traction with early adopters. The brief came with user insights and one scenario to design for, from a group decision to settling up.
Organising a friend trip means deciding where to go, what to eat and who paid what, with everyone wanting a say. Most apps solve one piece and leave the rest to group chats, expense splitters and notes.
Brief · who TripUp is for
Sets up the trip, invites others and keeps things moving.
Want a say without being overwhelmed: suggest, vote, stay informed.
- Decisions happen on the fly, mid-trip
- Everyone wants a say on food, plans and money
- More than a couple of taps and they go back to WhatsApp
- Polls over long chats
- Simple expense tracking, settled in the app
- Decisions reflected instantly in the itinerary
The goal: one app for the whole group trip. Decide together, keep the plan in sync, split costs fairly and settle up in a few taps.
Market analysis · where group trips break
| Group chats | Expense splitters | Trip planners | TripUp | |
|---|---|---|---|---|
| Quick group polls | ||||
| Shared itinerary | ||||
| Poll result written into the plan | ||||
| Split a bill by line item | ||||
| Exclude people from single items | ||||
| Fewest transfers to settle | ||||
| Pay and nudge inside the trip |
Covered Partly MissingEach tool solves one piece; the hand-offs between them are where groups drop out.
My role
Role
Product Designer · Front-end
I worked alone, from brief to working prototype in four days: market analysis, wireflow, hi-fi screens and design system in Figma, and the front-end prototype itself.
What I owned
- 01Market & competitor analysis
- 02Scenario wireflow
- 03Hi-fi screens & design system in Figma
- 04Working front-end (React, TypeScript)
- 05Balance & settle-up logic
From brief to working prototype · 4 days, solo
Scenario, user insights, competitor review
The scenario, screen by screen
Figma: type, colour, components, key screens
React front-end, mock data, deployed
How I approached it
I started from the market. Group chats are great for polls, expense splitters for money, trip planners for itineraries, but nothing connects them. The opportunity sat in the hand-offs: a poll that writes its winner into the plan, a bill split item by item, balances settled in as few transfers as possible.
Then I mapped the scenario as a wireflow, screen by screen, with every actor, system event and decision point, before any visual design.
Key decisions
- 01One trip, three tabs: summary, itinerary, budgetEverything about the trip in one place.
- 02The poll writes its winner into the itineraryThe group decides, the plan updates for everyone.
- 03Split by line item, with exclusions in placeTwo people can skip the wine without extra steps.
- 04Fewest transfers, not a pairwise ledgerDebts netted across the trip, settled in as few payments as possible.
- 05Pay and nudge from the balance itselfSettle where the number is, not in a banking app.
1234- 1The total leads, in the trip's editorial serif
- 2Who paid, changed in one tap
- 3Scan the receipt to fill amount and line items
- 4Each line item opens its own split, so two people can skip the wine
1234- 1What's still open, at a glance
- 2Debts netted across the trip into the fewest transfers
- 3Your payments first, with a single Pay action
- 4Everyone else's status, pending or paid, in real time
What I built
Hi-fi screens and design system in Figma, then a working front-end in React and TypeScript with Framer Motion, running on mock data. Beyond the brief I added receipt scanning, a trip map that appears from under the clouds, nudges, payment methods and an end-of-trip recap.
- Add a late-joining friend
- Live group poll
- Poll winner added to the itinerary
- Receipt scan & line items
- Exclusions per item
- Debt simplification
- Pay, nudge, settle
- End-of-trip recap
The result
- 4 daysfrom brief to a working, deployed prototype
- Fewesttransfers to settle the group's debts
The prototype covers the whole scenario end to end, four days after the brief. Try it below: it is the real prototype, not a recording.