Route — Plan, price, and track rides with a clear map flow.
Full App Concept Showcase

Route

A Swift iOS ride booking concept for planning trips, checking fares, confirming payment, and tracking rides.

1 / 4
Concept Identity

Route

Plan, price, and track rides with a clear map flow.

Color Palette
#111111
#F4F4F4
#A9B8C4
#FFFFFF
#6A6A6A

Route is a ride booking concept focused on quick decisions and clear trip planning. The app uses a map-first interface with bottom sheets for destination search, saved places, fare estimate, payment review, and active trip status.

The idea was to keep the ride flow direct and practical. Ride apps are used when people need to move fast, so the design keeps the map visible, the destination flow short, and the price information easy to understand before confirmation.

The user begins on a map screen, opens the planner, selects pickup and drop-off locations, checks the fare estimate, confirms payment, and then follows the active trip with driver and route information. Each screen supports one decision at a time.

The design uses black for important actions, white panels for controls, soft gray map surfaces, muted blue-gray map labels, and neutral secondary text. The style is minimal, utility-focused, and built around clarity.

This concept was planned for Swift and SwiftUI using map containers, bottom-sheet layouts, saved place rows, fare breakdown cards, payment rows, and active ride panels. The design took around 3–4 days.

The flow is designed for speed: open the map, plan a trip, view the fare estimate, confirm payment, and track the active ride.

Product thinking

Problem

Ride booking flows can feel stressful if the user cannot quickly understand route, fare, payment, and trip status.

Solution

The solution is a map-first interface with focused bottom sheets that show only the next important decision.

Target user

Users who need quick ride planning, clear fare information, saved places, and active trip tracking.

Key features

Map homeSaved placesTrip plannerFare estimatePayment reviewActive ride tracking

User flow diagram

1

Map

Start from current location and nearby routes.

2

Plan

Enter pickup, destination, and saved places.

3

Fare

Review price, payment, and trip options.

4

Track

Follow active ride and driver status.

App structure

Information Architecture
MapLocation, destination search, saved places
PlannerPickup, drop-off, route preview
FareCost estimate, payment, confirm action
Active TripDriver info, route, status
UI System
Map PanelsBottom sheets for focused decisions
ActionsBlack primary buttons for confirmations
RowsSaved places and payment rows
StatusActive trip cards with route information

Design summary

Core Screens

Map home, plan trip, fare estimate, active trip.

Design Focus

Map clarity, bottom-sheet UI, fast destination input, price confidence, and active ride tracking.

App Feeling

Minimal, direct, functional, trustworthy, modern, and fast.

Next app to look at

Mono

Next, view Mono for an AI wardrobe experience with a clean monochrome look.