UI/UX Designer for mobile app
Budget: $30 – $250 USD
I'm looking for a UI/UX designer to join our team on a project basis to design new sections/mini-apps in our app that meet the general aesthetic and branding of our app.
For the first task, we have a 7-screen ride-hailing app:
Ride-Hailing App (Rider Side) — Final UI/UX Scope (Lean MVP)
Assumptions:
Payments, profiles, and onboarding are handled in the main app
This scope only covers the rider-side flow
Supports Pool rides, scheduled pickups, airport trips, and surge pricing
Focus is on minimal, smart screens
1. Main Booking Screen
Purpose: Core screen to enter ride details
Elements:
Map centered on current location
Dropoff input: “Where to?”
Pickup input (defaults to current location, editable)
When? selector:
Default: “Now”
Toggle to “Later” → opens date/time picker
Payment method selector:
Shows default (e.g. "•••• 4242 - Visa")
Tap to switch to another saved method
Surge Pricing Badge (if applicable):
Small label: “High demand – fares may be higher”
Airport-specific logic (if pickup or dropoff is airport):
Prompt: “How many passengers?”
Prompt: “How many bags?”
Auto-assign larger/multiple vehicles if needed
CTA: “See Ride Options”
2. Ride Options Screen
Purpose: Choose vehicle type
(Skipped if airport trip)
Elements:
Cards for: Standard, XL, Pool
Show: fare estimate, ETA, car capacity
Pool: “You’ll get a discount if matched”
Surge pricing indicator if active
CTA: “Request Ride”
3. Matching Screen
Purpose: Confirm ride request and wait for a driver
Elements:
Animation: “Looking for a driver…”
Cancel option (if within grace period)
Contact Driver button (chat or call)
Message: “Feel free to message your driver if needed.”
4. Live Ride Screen (En Route + In Ride combined)
Purpose: Follow the ride in real-time
States:
A. Driver En Route
Map tracking
Panel: ETA, car/driver details, Contact buttons, Cancel button
Contact Driver (chat or call)
Emergency/Safety button:
Opens modal with:
“Call emergency services”
“Share live ride with contact”
“Report an issue”
B. During Ride
Live map
ETA countdown
Ride info panel:
Pool messaging if matched:
“Shared ride activated — you may stop along the way”
“Another rider added — you saved 18%!”
If no match: “Ride continues as private”
Emergency/Report button (same modal as above)
5. Ride Complete / Feedback
Purpose: Wrap-up screen
Elements:
Trip summary (duration, fare, distance)
Pool discount if applicable
Rate driver (stars + comment)
6. Trip History
Purpose: View past & upcoming rides
Simple list layout with date/time & status
7. Trip Detail
Purpose: Deep dive into a past trip
Route map
Driver + vehicle info
Fare breakdown
Support link
Final Screens: 7 Total
Main Booking
Ride Options (skipped if airport)
Matching
Live Ride
Ride Complete
Trip History
Trip Detail
---
Brand color is FF0000
Font is Roboto
For the first task, we have a 7-screen ride-hailing app:
Ride-Hailing App (Rider Side) — Final UI/UX Scope (Lean MVP)
Assumptions:
Payments, profiles, and onboarding are handled in the main app
This scope only covers the rider-side flow
Supports Pool rides, scheduled pickups, airport trips, and surge pricing
Focus is on minimal, smart screens
1. Main Booking Screen
Purpose: Core screen to enter ride details
Elements:
Map centered on current location
Dropoff input: “Where to?”
Pickup input (defaults to current location, editable)
When? selector:
Default: “Now”
Toggle to “Later” → opens date/time picker
Payment method selector:
Shows default (e.g. "•••• 4242 - Visa")
Tap to switch to another saved method
Surge Pricing Badge (if applicable):
Small label: “High demand – fares may be higher”
Airport-specific logic (if pickup or dropoff is airport):
Prompt: “How many passengers?”
Prompt: “How many bags?”
Auto-assign larger/multiple vehicles if needed
CTA: “See Ride Options”
2. Ride Options Screen
Purpose: Choose vehicle type
(Skipped if airport trip)
Elements:
Cards for: Standard, XL, Pool
Show: fare estimate, ETA, car capacity
Pool: “You’ll get a discount if matched”
Surge pricing indicator if active
CTA: “Request Ride”
3. Matching Screen
Purpose: Confirm ride request and wait for a driver
Elements:
Animation: “Looking for a driver…”
Cancel option (if within grace period)
Contact Driver button (chat or call)
Message: “Feel free to message your driver if needed.”
4. Live Ride Screen (En Route + In Ride combined)
Purpose: Follow the ride in real-time
States:
A. Driver En Route
Map tracking
Panel: ETA, car/driver details, Contact buttons, Cancel button
Contact Driver (chat or call)
Emergency/Safety button:
Opens modal with:
“Call emergency services”
“Share live ride with contact”
“Report an issue”
B. During Ride
Live map
ETA countdown
Ride info panel:
Pool messaging if matched:
“Shared ride activated — you may stop along the way”
“Another rider added — you saved 18%!”
If no match: “Ride continues as private”
Emergency/Report button (same modal as above)
5. Ride Complete / Feedback
Purpose: Wrap-up screen
Elements:
Trip summary (duration, fare, distance)
Pool discount if applicable
Rate driver (stars + comment)
6. Trip History
Purpose: View past & upcoming rides
Simple list layout with date/time & status
7. Trip Detail
Purpose: Deep dive into a past trip
Route map
Driver + vehicle info
Fare breakdown
Support link
Final Screens: 7 Total
Main Booking
Ride Options (skipped if airport)
Matching
Live Ride
Ride Complete
Trip History
Trip Detail
---
Brand color is FF0000
Font is Roboto