Road Trip app · 3 mockapp directions

Three complete design systems + three mockup versions.

All versions use the same product scope from the handoff: shared trip, offline expenses, itinerary, bookings/documents, sync state, and two users.

Version 1

System A — Night Navigator

Power users, clear sync states, dashboard density, serious planning.

Version 2

System B — Travel Atlas

Couple-friendly trip planning, visual itinerary cards, relaxed travel feeling.

Version 3

System C — Budget Pilot

Budget-first app, fast expense entry, very readable mobile interface.

Version 1 · Night Navigator

Precise dark app for serious roadtrip control.

Best if we want the app to feel like a polished operations cockpit: sync, budget, route, missing bookings.

Recommended for production MVP

Our trip · online

Dashboard

Total expenses

€2,418.90

3 offline items waiting

31Synced
3Pending
0Errors

Day 12 · Turin

Italy · 2 nights

Booked

Day 14 · Dolomites

Italy · mountain stop

Missing stay

Day 17 · Bled

Slovenia · lake day

Idea
Dashboard
Itinerary
Expenses
Docs
Settings

Itinerary command view

Turin

Day 12 · Italy · 2 nights

Booked
Dolomites

Day 14 · Italy · mountain stop

Missing stay
Bled

Day 17 · Slovenia · lake day

Idea

Expense queue

Fuel A22

Transport · Synced

€76.40
Apartment deposit

Accommodation · Pending

€120.00
Dinner

Food · Offline

€42.30

Document vault

Hotel confirmation
Fuel receipt photo
Insurance PDF

Design system tokens

Background #08090ASurface rgba(255,255,255,.05)Accent violet/skyInter 510/590Radius 12–22px

Version 2 · Travel Atlas

Warm, visual, couple-friendly planning.

Best if the app should feel like a travel notebook: pleasant, reassuring, easy to browse together.

Most emotional
Sync OK

Roadtrip Europe

Our trip

Next stop

Dolomites

Booking missing · 2 nights · mountain route

Budget

€2,418

Days planned

18

Hotel confirmation
Fuel receipt photo
Insurance PDF
Dashboard
Itinerary
Expenses
Docs
Settings

Visual itinerary cards

Turin

Day 12 · Italy · 2 nights

Booked
Dolomites

Day 14 · Italy · mountain stop

Missing stay
Bled

Day 17 · Slovenia · lake day

Idea

Fast expense capture

Fuel A22

Transport · Synced

€76.40
Apartment deposit

Accommodation · Pending

€120.00
Dinner

Food · Offline

€42.30

Receipts & bookings

Hotel confirmation
Fuel receipt photo
Insurance PDF

Design system tokens

Canvas #FFF9F2Ink #222222Coral #FF5A5FDM Sans 500–700Radius 20–32px

Version 3 · Budget Pilot

Fast money-first roadtrip app.

Best if the priority is daily use in the car: add expense, know budget, sync safely, move on.

Fastest to implement
Online

Shared budget

€2,418 spent

What needs attention?

3 expenses to sync
1 booking missing
2 receipts to review

Fuel A22

Transport

€76.40

Apartment deposit

Accommodation

€120.00

Dinner

Food

€42.30

Dashboard
Itinerary
Expenses
Docs
Settings

Expense-first dashboard

Fuel A22

Transport · Synced

€76.40
Apartment deposit

Accommodation · Pending

€120.00
Dinner

Food · Offline

€42.30

Sync confidence

31

Synced

3

Pending

0

Errors

2

Users

Route by cost

Turin

Day 12 · Italy · 2 nights

Booked
Dolomites

Day 14 · Italy · mountain stop

Missing stay
Bled

Day 17 · Slovenia · lake day

Idea

Design system tokens

Canvas #F6F7EFInk #0E0F0CLime #9FE870Inter 600/800Pill radius 999px

My recommendation

Choose Version 1 — Night Navigator for the first real app build. It matches the current dark MVP, handles sync/status complexity well, and is easiest to evolve into a robust logged-in app. Use Version 2 if emotional travel planning matters more than operational clarity. Use Version 3 if budget speed is the absolute priority.

Open structure tree