Padre Rides
Padre Rides
Padre Rides
Book a ride across Madrid in one step: pickup, drop-off, see prices.
Book a ride across Madrid in one step: pickup, drop-off, see prices.
ROLE
ROLE
UI/UX Designer: UX flows, UI design, responsive layouts and mockups
UI/UX Designer: UX flows, UI design, responsive layouts and mockups
PLATFORM
PLATFORM
Responsive web (desktop and mobile)
Responsive web (desktop and mobile)
TYPE
TYPE
Personal concept project
Personal concept project
View on Behance
View on Behance
View on Behance
Overview
Overview
Overview
Padre Rides is a personal concept for a modern ride-hailing platform that helps people book safe, reliable and convenient transport across cities in Spain. The design covers a full desktop marketing and booking site, two in-product booking screens (Find a trip → Ride Options) and a complete mobile version of the landing page, all set in Madrid.
Padre Rides is a personal concept for a modern ride-hailing platform that helps people book safe, reliable and convenient transport across cities in Spain. The design covers a full desktop marketing and booking site, two in-product booking screens (Find a trip → Ride Options) and a complete mobile version of the landing page, all set in Madrid.
In my words
In my words
In my words
Padre Rides started with one question: what does someone getting around Madrid need first? My answer was a price, so I put pickup, drop-off and See prices on the very first screen, with the option to ride now or schedule for later. In the booking screens, the map stays large from Find a trip through Ride Options. I treated discovery as a feature, with Plan your journey suggesting places to go, and moved Reserve, Courier, Drive and Business below the fold so they never crowd the booking. One green and navy system carries it across desktop and mobile.
Padre Rides started with one question: what does someone getting around Madrid need first? My answer was a price, so I put pickup, drop-off and See prices on the very first screen, with the option to ride now or schedule for later. In the booking screens, the map stays large from Find a trip through Ride Options. I treated discovery as a feature, with Plan your journey suggesting places to go, and moved Reserve, Courier, Drive and Business below the fold so they never crowd the booking. One green and navy system carries it across desktop and mobile.
The problem
The problem
The problem
Riders in a new city need three answers fast: Can I get a ride from here? How much will it cost? Can I plan ahead? Ride-hailing sites often bury the booking form under marketing content and split riding, reserving, deliveries and driving into separate experiences.
Riders in a new city need three answers fast: Can I get a ride from here? How much will it cost? Can I plan ahead? Ride-hailing sites often bury the booking form under marketing content and split riding, reserving, deliveries and driving into separate experiences.
Goals
Goals
Goals
Put the booking form (pickup, drop-off, See prices) above the fold on the first screen.
Put the booking form (pickup, drop-off, See prices) above the fold on the first screen.
Let people choose between riding now and scheduling a ride for later.
Let people choose between riding now and scheduling a ride for later.
Help visitors discover where to go in the city, not only how to get there.
Help visitors discover where to go in the city, not only how to get there.
Present the wider Padre ecosystem (Reserve, Courier, Drive, Business, apps) without crowding the booking flow.
Present the wider Padre ecosystem (Reserve, Courier, Drive, Business, apps) without crowding the booking flow.
Keep one visual language across desktop and mobile.
Keep one visual language across desktop and mobile.
Target users
Target users
Target users
Residents and visitors in Spanish cities who need quick, priced rides.
Residents and visitors in Spanish cities who need quick, priced rides.
Travellers planning trips to attractions, hotels and restaurants.
Travellers planning trips to attractions, hotels and restaurants.
People who like to schedule rides in advance (Padre Reserve).
People who like to schedule rides in advance (Padre Reserve).
Prospective drivers, couriers and companies (Padre for Business).
Prospective drivers, couriers and companies (Padre for Business).
APPROACH
APPROACH
APPROACH
How the design came together, step by step.
How the design came together, step by step.
01 Booking first
01 Booking first
The hero pairs “Your journey, your Padre” with a Pickup Now selector and a connected pickup/drop-off pair, with the green See prices button right underneath.
The hero pairs “Your journey, your Padre” with a Pickup Now selector and a connected pickup/drop-off pair, with the green See prices button right underneath.
02 A clear in-product flow
02 A clear in-product flow
Booking screens split into a task panel and a large live map. Find a trip leads to Ride Options, where three tiers show price, ETA and a Book Ride button.
Booking screens split into a task panel and a large live map. Find a trip leads to Ride Options, where three tiers show price, ETA and a Book Ride button.
03 Discovery as a feature
03 Discovery as a feature
“Plan your journey” adds category tabs, a list of destinations with Go buttons, a map and a preview card.
“Plan your journey” adds category tabs, a list of destinations with Go buttons, a map and a preview card.
04 Ecosystem below the fold
04 Ecosystem below the fold
Ride, Reserve and Courier recommendations, a Padre Reserve booking card, driver and business sections, and app downloads follow the booking area.
Ride, Reserve and Courier recommendations, a Padre Reserve booking card, driver and business sections, and app downloads follow the booking area.
05 Mobile adaptation
05 Mobile adaptation
The same sections restack into one column, with a swipeable “Explore what you can do with Padre” row and the dark gradient footer.
The same sections restack into one column, with a swipeable “Explore what you can do with Padre” row and the dark gradient footer.
KEY FEATURES
KEY FEATURES
KEY FEATURES
The screens that carry the experience.
The screens that carry the experience.
Instant price check
Instant price check
Pickup Now selector, linked pickup and drop-off fields and a green See prices button on the very first screen.
Pickup Now selector, linked pickup and drop-off fields and a green See prices button on the very first screen.
Find a trip
Find a trip
A left booking panel beside a full-height street map, with Trip / Rent / Eat tabs in the top bar.
A left booking panel beside a full-height street map, with Trip / Rent / Eat tabs in the top bar.
Ride options
Ride options
Economy, Comfort and Premium tiers as cards with car renders, price, ETA and a Book Ride button.
Economy, Comfort and Premium tiers as cards with car renders, price, ETA and a Book Ride button.
Plan your journey
Plan your journey
Category tabs, a destination list with Go buttons, a Madrid map and a place preview with Learn More.
Category tabs, a destination list with Go buttons, a Madrid map and a place preview with Learn More.
Padre Reserve
Padre Reserve
A green booking card with date and time fields, a Next button and a clear list of scheduling benefits.
A green booking card with date and time fields, a Next button and a clear list of scheduling benefits.
Service recommendations
Service recommendations
Ride, Reserve and Courier cards on mint backgrounds, each with an illustration and a Details button.
Ride, Reserve and Courier cards on mint backgrounds, each with an illustration and a Details button.
Drive and business
Drive and business
Driver recruitment and Padre for Business sections, each with a Get Started button.
Driver recruitment and Padre for Business sections, each with a Get Started button.
Mobile web
Mobile web
The full landing page restacked into a single column for phones.
The full landing page restacked into a single column for phones.
SCREENS & MOCKUPS
SCREENS & MOCKUPS
SCREENS & MOCKUPS
The full set of designs, screen by screen.
The full set of designs, screen by screen.
DESIGN SYSTEM
DESIGN SYSTEM
DESIGN SYSTEM
The colour palette used across the screens.
The colour palette used across the screens.
COLOURS
COLOURS
Padre green
Padre green
#4FC08D
#4FC08D
Deep navy
Deep navy
#0D0F3A
#0D0F3A
Mint surface
Mint surface
#F1FBF6
#F1FBF6
White
White
#FFFFFF
#FFFFFF
Slate
Slate
#263238
#263238
OUTCOME
OUTCOME
OUTCOME
One screen takes a rider from landing to a priced ride, with scheduling one tap away.
One screen takes a rider from landing to a priced ride, with scheduling one tap away.
A two-step product flow (Find a trip → Ride Options) keeps the map visible throughout.
A two-step product flow (Find a trip → Ride Options) keeps the map visible throughout.
City discovery makes the site useful before anyone books.
City discovery makes the site useful before anyone books.
One green and navy system covers marketing pages, product screens and mobile.
One green and navy system covers marketing pages, product screens and mobile.
HAVE A PROJECT IN MIND?
HAVE A PROJECT IN MIND?
HAVE A PROJECT IN MIND?
I’d love to hear about it. Let’s build something great together.
I’d love to hear about it. Let’s build something great together.
I’d love to hear about it. Let’s build something great together.
Get in touch
Get in touch
Get in touch
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
Phone: +2349038049003