Case study · No. 05 · Mobility · rental · 2024
Rentcar: the price on screen is the price at the desk
Car rental in Casablanca and Rabat where everything is known before paying: final price, deposit, the car's condition. A site to book, and a back-office for the agency that hands over the keys.
- Web UX/UI
- Back-office
- Design system
- Role
- Product designer, from research to prototype
- Duration
- 8 weeks
- Team
- Concept project, solo
- Platform
- Web, desktop
- Tools
Figma 
Miro 
Google Meet 
Google Docs- Deliverables
- Benchmark, Proto-personas, Journey map, User flows, Wireframes, Design system, 36 screens, Prototype
The project in numbers
What was delivered, counted in the Figma file. A fictional product: no usage results.
36
screens
24 for the customer, 12 for the agency
2
spaces
The booking site and the agency back-office
32
components
Including the car card, the calendar and the condition report
01 · The project
Rental is decided at the desk
Morocco welcomed 17.4 million visitors in 2024, 8.6 million of them Moroccans living abroad: many land in Casablanca and pick up a car.
Booking online works; arriving disappoints. The price changes at the desk, the deposit held on the card was announced nowhere, and the car's condition is argued over on return.
Rentcar is a rental service designed for that moment: everything that will be paid or held is stated before paying, and the agency handles pick-up and return on a tablet, with photos.
Eight weeks, customer side and agency side
01 · Weeks 1–2
Discover
Four families of renters, their booking journeys and their terms.
- Benchmark
- Desk research
02 · Weeks 2–3
Define
The customer and the agency manager, the experience map of a rental.
- Proto-personas
- Journey map
- HMW
03 · Weeks 3–4
Ideate
Prioritisation, booking and pick-up flows, wireframes.
- Impact × effort
- User flow
- Wireframes
04 · Weeks 4–7
Prototype
Design system, 24 customer screens, 12 agency screens, a linked prototype.
- Design system
- High-fidelity UI
- Figma prototype
05 · Weeks 7–8
Check
Declined payment, cancellation, changes: the side paths, and the test plan.
- Heuristic review
- Test plan
02 · Discovery
Many arrivals, one chance to get it right
5,000 DH
deposit held on the card
The amount that shocks if it was not announced.
Hypothesis
10 min
from desk to road
The service's promise, if everything is ready beforehand.
Hypothesis
Four ways to rent
Named by family: the comparison site, the international renter, the local agency.
| Criterion | Rentcar · the projectThe project | Comparison siteAggregator | International renterNetwork | Local agencyIndirect |
|---|---|---|---|---|
| Final price from the search | YesOptions included | PartlyExtras at the desk | Partly | PartlyBy phone |
| Deposit stated before paying | YesAmount and duration | PartlyIn the terms | Yes | No |
| Digital condition report | YesPhotos, signature | Not applicable | Partly | NoPaper |
| Airport delivery | Yes | Partly | Yes | PartlyOn request |
| Pay at the agency | YesCard or cash | No | Yes | Yes |
The table scrolls sideways.
A desk review, verdicts simplified by family.
Takeaway
Comparison sites win on the displayed price, agencies on flexibility. Rentcar keeps the displayed price all the way to the desk, with an agency's flexibility.
03 · Definition
The one who arrives, the one who hands over the keys
Proto-personas: hypotheses to validate in interviews; their quotes are illustrative.
P1 · the customer
Ahmed, 33
Engineer, visits his family three times a year, rents in Casablanca
- Goal
- A car ready on arrival, at the price shown
- What gets in the way
- The price changing at the desk, an unclear deposit, scratches disputed on return
« I want to pay what I saw, not what the desk tells me. »
P2 · the agency
Mohammed, 45
Runs the Anfa agency, 38 cars, a team of five
- Goal
- See the day's pick-ups and returns, do condition reports without paper
- What gets in the way
- Bookings by phone, disputes over the car's condition
« In the morning I want to know which car leaves, when, and whether it is ready. »
Ahmed's rental, before
Ahmed
01Compare
02Book
03The desk
04The deposit
05Drive
06Return
Does
Thinks
Feels
Opportunity
The map scrolls sideways.
The problem to solve
Travellers need to know, before paying, what they will pay at the desk and what will be held on their card, because a rental is decided on arrival, tired and in a hurry. Today, price and deposit change between the screen and the desk.
The questions the design answers
Q1
How might we show a price that no longer moves?
Why this one · The desk is the lowest point of the map.
Q2
How might we announce the deposit without scaring people off?
Why this one · A surprise on the card ruins trust.
Q3
How might we make the car's condition indisputable?
Why this one · The other low point, on return.
Q4
How might we prepare the agency's day?
Why this one · Mohammed runs everything by phone.
04 · Ideation
What the first version keeps
Impact ↑
Quick wins · Impact high · Effort low
Final price, options includedIn V1
Q1
Deposit and release datesIn V1
Q2
Free cancellation 48 h beforeIn V1
Big bets · Impact high · Effort high
Condition report on a tabletIn V1
Q3
The agency's dayIn V1
Q4
Nice to have · Impact low · Effort low
Airport deliveryIn V1
Later · Impact low · Effort high
Cars on a mapIn V1
Loyalty programmeLater
Mobile appLater
The site is enough to book
Effort →
Book, then drive off
Start
Home
Place and dates
Screen
Cars
List or map, total price
Screen
Car details
Included, terms, deposit
Screen
Dates and details
Driver, extras
Decision
Payment accepted?
No: decline screen, another card or pay at the agency
Screen
Confirmation
Booking code
System
Condition report
Photos and signature at the agency
End
Return and review
Low-fidelity wireframes
01 · Home
02 · Cars on the map
03 · Payment
04 · The agency's day
05 · Design
A road-sign yellow on asphalt grey
Roboto, a near-black ink, a yellow kept for action and a red for picked dates.
Colours
Canvas
#F2F2F2
Background
Surface
#FFFFFF
Cards
Accent
#FBC400
Main action
Accent subtle
#FFF6D6
Banners
Accent text
#9A6B00
Readable yellow (AA)
Ink
#0F0F0F
Text
Secondary text
#333333
Captions
Success
#1E9E5A
Ready, confirmed
Danger
#C93030
Late, declined
Danger subtle
#FFE8E8
Alert
Type
Display
Roboto ExtraBold 72
Drive the car you want
Heading 2
Roboto Bold 32
Find your type of car
Price
Roboto ExtraBold 40
1,470 DH
Body
Roboto Regular 16
Insurance included, free cancellation.
Overline
Roboto SemiBold 12
POPULAR THIS WEEK
32 components
- Logo
- Button
- Badge
- Input
- Checkbox
- Radio
- Toggle
- Chip
- Avatar
- Rating
- Tab
- Stepper
- Navbar
- Footer
- Search
- Car card
- Brand
- Spec
- Plan
- Date cell
- Booking card
- Review
- Alert
- Payment option
- Setting
- Map
- Map pin
- Brand logo
- Stat
- Agency nav
- Sidebar
- Agency bar
Home: search from the first screen
First iteration
Final version
What changes
The promise states the service: ready in 10 minutes, insurance included, cancellation up to 48 h before.
UX law · Aesthetic-Usability EffectKept
The search is in the first screen, place and dates already filled in.
UX law · Tesler’s LawKept
One yellow button: search.
UX law · Von Restorff EffectKept
Payment: a rental is not a shopping cart
First iteration
Final version
What changes
The shipping address goes: you choose how to pay, now, at the agency or by invoice.
UX law · Jakob’s LawKept
The deposit is stated with its amount and release date.
UX law · Loss AversionKept
The price breakdown stays on the right, total at the bottom.
UX law · Serial Position EffectKept
The customer's journey
Cars
On the map
Car details
Dates
Details
Payment declined
Confirmed
My booking
Agency side
Q4 and Q3: the agency's day, the pick-up with its condition report, the fleet and the planning.
Today
Pick-up and condition report
Planning
Fleet
06 · Validation
UX laws at work
- Broken
Jakob’s Law
Users spend most of their time on other sites: meet their habits.
A shop's checkout for a rental.
Payment, first iteration
- Kept
Loss Aversion
Losing hurts about twice as much as winning pleases.
Nothing is discovered after paying: the deposit is stated.
Payment
- Kept
Tesler’s Law
Complexity never disappears, someone carries it: let it be you.
Place and dates prefilled: the search starts in one click.
Home
- Kept
Postel’s Law
Be liberal in what you accept, strict in what you send.
A decline offers three ways out, without retyping everything.
Payment declined
- Kept
Von Restorff Effect
The one thing that differs is the one thing remembered.
Yellow is kept for the main action.
Everywhere
- Kept
Peak-End Rule
People judge the peak and the end, not the average.
Return closes on the pick-up photos, not on a dispute.
Return
Expected results
What a test and a launch should show. Nothing has been measured.
| Expected result | Indicator | Indicative target |
|---|---|---|
| A price that no longer moves | Gap between the price paid online and at the desk | 0 DH (hypothesis) |
| A deposit understood | Testers who mention the deposit before paying | 5 out of 5 in testing |
| Fewer disputes on return | Returns disputed over the car's condition | Halved (hypothesis) |
The test that would validate the journey
ParticipantsFive people who rented a car in Morocco within the year, two of them living abroad, in 40-minute remote sessions; one agency manager for the back-office.
01
TaskRent an automatic SUV at the airport, 14 to 17 November.
Success criterionBooked, total and deposit stated without hesitation.
02
TaskThe payment is declined: finish the booking.
Success criterionA way out chosen, nothing retyped.
03
TaskChange the booking's dates.
Success criterionDone from “My booking”, new price understood.
04
TaskAt the agency: hand over Ahmed's car.
Success criterionPhotos, fuel and signature entered in under 5 minutes.
Interview questions
- Tell me about your last rental: what surprised you at the desk?
- What is a deposit to you, and when do you want to hear about it?
- How does a car return that goes badly unfold?
What I take from it
01
Design the moment that angers
The desk and the return, invisible on a website, decided the payment screen and the back-office.
02
A model that doesn't fit
The first iteration borrowed a shop's checkout: renaming each step revealed what a rental really needs.
03
The side paths
Declined payment, changed dates, cancellation: drawing them cost little and reassured the whole journey.
Got a project in mind?
Describe the screen or the workflow that gets in the way: I reply with a first reading of the problem.