The long way round,
beautifully planned.
Fourteen screens that cover every feature from the Roadtrippers research: discovery map, filters, map layers, place pages, editorial guides, trip builder, Autopilot, itinerary, navigation, sharing and Pro membership. Photo-led, with Apple-style frosted glass, in dark and light themes (switch at the top right).
Earlier light version: RoadMate screens v1First launch & home
The first impression, and the screen people return to every day. Real photography sets the mood; glass keeps text readable on top of it.
RoadMatethe destination.
Welcome
Sells the feeling first, then asks for one decision.
- Shows
- Full-bleed coast photo, brand mark, promise, two choices
- User can
- Start planning as a guest, or sign in
- Design
- The text panel is frosted glass, so the photo stays visible behind it. The panel's corners follow the iPhone's own rounded corners.
Home
Three ways back into a trip, in priority order.
- Shows
- Search, Autopilot invitation, the trip in progress, saved favourites
- User can
- Search anything, start Autopilot, resume planning, save places
- Design
- Five tabs in a floating glass bar (the same five as Roadtrippers). The progress bar shows planning is 30% done.
Map, filters & layers
The discovery engine. Everything floats on glass so the map is never covered by a solid panel.
Discovery map
Every stop on the route, with the best ones shown as photos.
- Shows
- Route, photo pins for top places, coloured pins by category, a preview card
- User can
- Search, switch category, open filters, change layers, switch to list, add a stop
- Design
- The selected pin gets an accent ring. Price and detour sit in small tags so they can be compared at a glance.
Filters & sort
Narrows thousands of stops to the ones worth this trip.
- Shows
- Sort order, place types, maximum detour, minimum rating, open now, big-rig access
- User can
- Combine filters and see the result count update before applying
- Design
- The button shows the live result count ("Show 128 Places"), so nobody filters down to nothing. "Detour" replaces Roadtrippers' "distance" because time is what drivers care about.
Map styles & overlays
Lets the map answer road-trip questions: Where can I camp? Will I have signal?
- Shows
- 6 base maps as real previews, plus overlays for public land, smoke and cell coverage
- User can
- Switch style instantly; Pro styles and overlays show a lock
- Design
- Public-land overlay is live on the map above the sheet. Locks are quiet, not nagging.
Place detail
Everything a driver needs to decide in ten seconds: is it worth it, can I park, is it open, can I bring the dog.
Place detail
Answers the questions a driver has, in the order they ask them.
- Shows
- 24-photo gallery, rating, price, hours, detour from route, address, amenities
- User can
- Add to trip, navigate, open website, share, save to favourites
- Design
- One white main button; navigate and website are secondary circles. Amenities that aren't available are crossed out, not hidden, so the answer is clear.
Editorial road trips
Ready-made trips written like a travel magazine. Read it, preview it, then copy the whole route into your own trips.
Guides
Inspiration for people who don't know where to go yet.
- Shows
- Featured guide carousel with drive time, distance, stops and cost; themed collections
- User can
- Browse Featured, Nearby or Saved guides; swipe the carousel
- Design
- Serif titles mark this as editorial content; the four key numbers are visible before opening.
Highway
Few drives match Highway 1 between San Francisco and Los Angeles. Cliffs drop straight into the Pacific, fog rolls through redwoods, and every turn-out is a reason to stop.
Guide article
Reads like a magazine, then turns into a trip with one tap.
- Shows
- Hero photo, title, author, 4 summary numbers, article in serif type
- User can
- Preview the full route on the map, save the guide as their own trip, share or bookmark
- Design
- The action bar floats on glass and stays put while reading, so "Save This Trip" is always one tap away.
Guides header: pick one
Screen 07 had an empty gap between the status bar and the title. Here are four ways to fill the top. Tell me the letter and I'll make it the main Guides screen.
Title + toolbar
The title moves up into the navigation bar row, next to search and saved guides. The empty gap is gone and the hero card gets 40 pt taller.
Search + topic chips
Fills the top with something useful: a search field across 240 guides and swipeable topic chips instead of tabs. Best if people browse by theme.
Full-bleed hero
The featured guide fills the top of the screen, behind the status bar, with the title and tabs on glass. The most premium, magazine-cover feel.
goes this summer
Editorial header
A magazine-style serif headline with simple underlined text tabs. It feels curated and calm, and matches the guide article pages.
Trip builder & Autopilot
Two ways to plan: build stop by stop, or answer a few questions and let Autopilot do it.
Create a trip
One short form, with the plan choice made explicit.
- Shows
- Start, destination, optional stops, planning mode, dates, vehicle
- User can
- Swap ends, add stops, choose Autopilot or Quick Start, pick dates and vehicle
- Design
- The selected mode gets an accent outline and tint. Choosing a vehicle changes the routing (RV avoids low bridges, EV adds chargers).
to stop for?
Autopilot questions
Four short steps instead of one long form.
- Steps
- 1 Who’s coming (adults, kids, dogs) · 2 Must-visit places · 3 Interests & budget · 4 Pace & avoid highways
- User can
- Multi-select interests, set daily budget, go back without losing answers
- Design
- Selected options turn solid white, the rest stay frosted glass. The blurred desert photo behind gives the questions a sense of place.
Your trip, planned
The result of Autopilot: a real day plan, not a list of ideas.
- Shows
- Numbered route on the map, day summary, day switcher, timed stops with photos and drive legs
- User can
- Switch days, reorder or remove stops, invite people, start navigating
- Design
- The same numbers appear on map pins and photo badges, so map and list match. The dotted line means driving between stops.
Drive & share
Glanceable navigation for the driver, simple sharing for everyone else in the car.
LIMIT
Drive mode
Built to be read in under a second at 60 mph.
- Shows
- Next turn, the turn after, speed limit and current speed, next stop with photo, arrival, time and distance left
- User can
- Open the stop, end navigation; Pro hands off to Apple Maps or Google Maps automatically
- Design
- The map turns so the direction of travel points up (the ocean is on the right when driving south), and the destination shows as its photo.
Trip members
Plan together without stepping on each other.
- Shows
- Trip summary, each member’s role and recent activity, share link and visibility
- User can
- Invite people, change roles (edit / view), copy the link, turn link sharing off
- Design
- Each person's activity ("Added 3 stops") is shown under their name, so changes to the trip never feel anonymous. The privacy setting explains itself in plain words.
RoadMate Pro
Shown right after Autopilot delivers a trip, when people are most excited. Clear, honest pricing.
Pro membership
Says exactly what you get and exactly what you pay.
- Shows
- Six benefits that match the locked features, yearly vs monthly price, free trial terms
- User can
- Pick a plan, start the trial, restore a purchase, close without friction
- Design
- The only accent-filled button in the app, so it stands out. Trial terms sit right under it, as Apple's App Store rules require.
Widgets & Live Activities
The trip without opening the app: Home Screen widgets in three sizes, Lock Screen widgets, a Live Activity while driving, and the Dynamic Island. They follow the Dark / Light switch.
Today · Day 1Pacific Coast
Home Screen widgets
Today’s plan, the next stop, the countdown and fuel, without opening the app.
- Medium
- Today: day route, progress through stops, next stop with time, mini map with your position
- Small
- Next stop (photo) · Days until the trip · Next gas on the route and the gap after it
- Design
- One idea per widget, big numbers, and the app icon as a small badge. Tapping a widget opens straight to that stop or day.
Lock Screen & Live Activity
While driving, the trip lives on the Lock Screen.
- Widgets
- Inline: miles to tonight’s stop · Ring: trip progress · Rectangle: next stop and time · Round: arrival time
- Live Activity
- Next stop, arrival, a progress line with every stop of the day, time and distance left
- Design
- Lock Screen widgets are white-on-glass, as iOS requires. The Live Activity's progress line uses the same dots as the itinerary screen.
Dynamic Island
Turn-by-turn stays visible while you use other apps.
- Expanded
- Next turn and distance, street, arrival time, stop progress (shown here on a long press)
- Compact
- Turn arrow and distance on the left, arrival time on the right
- Minimal
- Just the turn arrow, when another app shares the island
Widget gallery
Every size at actual iPhone size (points). They switch with the Dark / Light toggle.
Pacific CoastToday · Day 1
RoadMate on the wrist
For the moments you can't look at your phone: the next turn, the next stop and a nudge to take a break. watchOS screens are always black, so they look the same in both themes. Only the watch case changes.
Watch face complications
Modular face: the large complication shows the next stop; the round ones show trip progress, miles left today and the next gas station.
Turn-by-turn
Glanceable at a red light: the turn, the distance and the street, with a wrist tap before each turn.
Next stop
The next stop with its photo; navigate or skip it right from the wrist.
Today’s stops
The whole day in one scroll. Done stops dim out; the current one is highlighted.
Break reminder
After two hours of driving, RoadMate suggests a well-rated stop just ahead. Safety first, but still worth the stop.
Smart Stack
Scroll the Digital Crown on any face and RoadMate is waiting in the Smart Stack while a trip is active.
What makes it feel premium
The rules behind every screen above.
Colour
Type
Instrument Serif
Editorial titles only: guides, welcome, Pro.
SF Pro
All interface text at standard Dynamic Type sizes (34 / 22 / 17 / 15 / 13).
Rules
- Photos do the colour work. The UI itself stays black, white and grey.
- Two kinds of glass. Light glass over photos, dark glass over the map and UI. Each has a thin top highlight.
- White is the main button. Ember orange is kept for the route, selection and the Pro button.
- No decorative gradients. The only fade sits under the Pro photo so the text stays readable.
- Every number earns its place: detour minutes, drive legs, cost, members.
Photo credits (Wikimedia Commons)
- Bixby Creek Bridge: Diliff, CC BY-SA 3.0
- Big Sur coast: Carol M. Highsmith, public domain
- McWay Falls: King of Hearts, CC BY-SA 4.0
- Route 66, Amboy: Dietmar Rabich, CC BY-SA 4.0
- Monterey Bay Aquarium: Rhododendrites, CC BY-SA 4.0
- Pfeiffer Beach: Kace Rodriguez, CC0
- Golden Gate Bridge: Brocken Inaglory, CC BY-SA 3.0
- Yosemite Tunnel View: Diliff, CC BY-SA 3.0
- Monument Valley: King of Hearts, CC BY-SA 4.0
,_Hist._Route_66_--_2012_--_1.jpg){kind=link}
.jpg){kind=link}
.jpg){kind=link}
