Our project · iOS concept
RoadMate: the screens
Eight key screens for planning and taking a road trip, from the first launch to the end-of-trip recap. Built around Apple’s Human Interface Guidelines: system type, clear hierarchy, one accent colour and native iOS controls.
Screens
The example trip is the Pacific Coast Highway, San Francisco to San Diego. Every screen uses the same trip data, so the flow reads as one product.
9:41
Make the drive
the best part.
Plan the route, find stops worth the detour, and keep every day in one place.
Plan Your First Trip
Sign In
01
Welcome
- The map itself is the hero image, with no stock photo or gradient. It shows what the app does in one glance.
- One filled button for the main action, one text button for the secondary one (HIG: make the most likely action prominent).
- Large Title type and a short line of copy: no feature carousel to swipe through.
9:41
IM
Trips
Next Up
Drafts
Utah’s Mighty Five
5 parks · 1,104 mi
Route 66, First Half
Chicago to Santa Fe
Napa Weekend
3 stops · 140 mi
02
Trips
- The next trip gets the big card; drafts drop to a plain inset list. The layout shows what matters most.
- A floating, frosted tab bar with four destinations, each named with a noun (HIG tab bar guidance).
- The "In 3 days" label is the only accent colour on the screen, so the eye goes there first.
9:41
New Trip
From
Current Location
To
San Diego, CA
Add Stop
Dates
LeaveThu, Jun 12
ReturnWed, Jun 18
Vehicle
Car
RV
Electric
Route Preferences
Scenic Roads
Prefer coastal and mountain routes
Avoid Highways
Avoid Tolls
03
New Trip
- Shown as a sheet: creating a trip is a self-contained task the user can cancel at any point (HIG on modal sheets).
- Only standard controls: inset grouped lists, a segmented control and switches. People already know how they work.
- Close (✕) and confirm (✓) sit in the same place as in Apple's own apps.
9:41
Search along route
Along Your Route
214 places within a 10-minute detour
All
Food
Views
Camping
Fuel
Bixby Creek Bridge
Viewpoint · ★ 4.8
+4 min
Nepenthe
Restaurant · ★ 4.6
+2 min
Pfeiffer Beach
Beach · ★ 4.7
+11 min
04
Map planner
- Map plus a resizable bottom sheet, the pattern Apple Maps uses: the map stays visible while you browse places.
- Each category keeps one system colour on the map pins (food = orange, views = purple). The route is the only orange line on the map.
- Every result shows its detour in minutes, the number that actually decides whether to stop.
9:41
Bixby Creek Bridge
Viewpoint · Big Sur, California
4.8(2,140)·Open 24 hours
Add to Day 1
Directions
Website
More
Detour
+4 min
Parking
Free
Best Light
Sunset
About
Built in 1932, this single-span concrete arch is one of the most photographed bridges on the California coast. The best view is from the pull-out on the north side.
Good to Know
Pull-out fits RVs up to 30 ft
Fog usually lifts after 11 AM
05
Place detail
- Header buttons are frosted glass, so they stay readable over any photo.
- Four action buttons in one row, with "Add to Day 1" filled. The button names the exact day, so it's clear what tapping it does.
- A three-cell fact strip answers the road-trip questions first: detour, parking, best time.
9:41
Pacific Coast Highway
Itinerary
THU12
FRI13
SAT14
SUN15
MON16
TUE17
8:00AM
San FranciscoStart
1 h 32 min · 75 mi
9:30AM
Santa Cruz WharfBreakfast · 1 h
52 min · 43 mi
11:25AM
Monterey Bay AquariumAttraction · 2 h 30 min
38 min · 27 mi
2:30PM
Bixby Creek BridgeViewpoint · 20 min
28 min · 13 mi
3:20PM
Big Sur CampgroundOvernight · Site 42
3 h 30 min driving
158 mi · 4 stops
Start
06
Itinerary
- A calendar-style day strip, and one timeline for the selected day: you always know which day you're looking at.
- Drive times are shown between the stops, quieter in grey, so the stops stay the main focus.
- The summary bar floats above the content and keeps "Start" reachable with your thumb.
9:41
SPEED
LIMIT
LIMIT
45
43mph
NEXT STOP
Big Sur Campground
3:20
arrival
6
min
2.4
mi
End
07
Drive mode
- Readable at a glance: the next turn is the biggest thing on screen, in high-contrast white on black (HIG: designing for use while driving).
- The map turns so the direction of travel points up; the ocean is on the right, as it is when you drive south.
- Arrival time, minutes and miles in large numbers; "End" is red because it ends the drive.
9:41
Trip Recap · Jun 12–18
Pacific Coast
Highway
812miDriven
14Stops
21h 40mBehind the wheel
3Nights camping
Highlights
08
Trip recap
- The whole route in one wide strip: start in blue, end in the accent colour, the main stops in their category colours.
- Four honest numbers in a simple grid, without confetti or badges. The trip itself is the reward.
- Share sits in the toolbar where iOS users expect it, instead of as an extra button in the content.
Design language
The rules that keep RoadMate feel like a native iOS app and not a generic template.
Colour
CanyonAccent #D6471C
Grouped#F2F2F7
Label#1C1C1E
Land#F1EEE7
Water#AFD3EC
Park#D7E9CC
Highway#FBDE8C
CategoriesSystem colours
Type: SF Pro, Dynamic Type sizes
Large Title34 / Bold
Title 222 / Bold
Headline17 / Semibold
Body17 / Regular
Footnote13 / Regular
Rules
- One accent, used rarely. Canyon orange marks the primary action or the route, never decoration.
- No gradients. Depth comes from layering and Apple's frosted-glass material, not colour fades.
- Hairlines, not heavy shadows. 0.5 pt separators; shadows are 1–4 pt and nearly invisible.
- Real content. Real place names, real distances and one trip across every screen.
- Flat illustrations. 5–6 colours per scene, with consistent sun, sea and land tones.
- Standard controls first. Sheets, switches, segmented controls and tab bars behave as iOS users expect.