Designing for offline-to-digital car rentals: the context
Business Challenge
Legacy offline operations, manual booking limitations, and customer reservation friction threatened the client's ability to scale. The solution required a transparent, accessible booking channel to transition offline loyalty into online conversion.
The client is a small, family-run business providing local car rental services. Historically, the company built a loyal customer base through social media and word of mouth, relying entirely on phone calls and WhatsApp to manage reservations. With growing demand, this manual model became unsustainable.
My role as a freelance UX designer was to research and design their very first website. The core goal was to transition their customer base to an online portal, ensuring the interface is intuitive and accessible, while avoiding the confusing patterns and hidden pricing structures common on mainstream car rental platforms.
How Might We Statement: How might we design a frictionless car rental search and booking experience that builds user trust and minimises drop-off rates?
Interactive Prototype Preview
Uncovering booking friction: usability testing insights
Rather than jumping straight to designs, I structured and conducted remote moderated usability tests with representative users on competitor sites. The goal was to identify where users find friction and drop out of the booking process.
During testing, I observed that users experienced cognitive fatigue when presented with complex vehicle option lists. Rather than moving forward, they spent significant time trying to decode pick-up terms and insurance conditions. To address this, I composed bias-free discussion guides to allow participants to discover navigation bottlenecks naturally, recording exactly how they behaved.
Participant testing showing user feedback on date and calendar selectors.
Remote user feedback sessions carried out.
Synthesising user pain points: pricing ambiguity & vehicle details
I synthesised the user observations into affinity mapping clusters and customer journeys. The research yielded three specific learnings that directly shaped the design requirements:
- Anxiety Over Hidden Fees 100% of tested users expressed frustration when mandatory surcharges or CDW (Collision Damage Waiver) fees were hidden until the payment screen, causing transaction dropouts.
- Unclear Documentation Rules Users felt confused and anxious about the exact documentation requirements and security deposit values needed at the pick-up counter.
- Vague Luggage & Size Indicators Standard vehicle category labels (e.g. "Compact") failed to help users understand if their specific travel bags or family luggage would fit in the car.
Friction reduction: simplifying the booking pathway
Mapping the user workflows exposed severe booking fragmentation. In the First Draft Flow, the user had to navigate 7 separate screens to search, filter, select extras, choose protection, and confirm details. This created multiple high-risk drop-off points.
Applying core interaction design principles, I streamlined inputs, touch target dimensions, and confirmation states. I consolidated the flow into a logical 4-step sequence: Search → Filtered Selection → Unified Extras/Protection → Transparent Checkout.
I then sketched out paper layouts to map out how filtering controls and optional items would expand and collapse on the mobile screens.
Sketched wireframes mapping out pickup location inputs, date controls, and checkout options.
.png)
Interactive mid-fidelity wireframe prototype
I translated paper layout sketches into an interactive mid-fidelity Figma wireframe prototype, testing search forms, calendar rental selectors, and initial details confirmation.
Mid-fidelity wireframe flow mapping vehicle listing, detailed specifications, extras selection, insurance covers, and booking confirmation.
Interactive prototype of mid-fidelity wireframes.
Design evolution: aligning wireframe structure with high-fidelity clarity
The evolution of the user interface shows how the initial wireframe structures were translated into finished high-fidelity components, focusing on clear information hierarchy, readable data tables, and interactive states:
Visual & component progression
I translated the structure established in wireframes directly into polished interface designs. The wireframe focused purely on element size and grid layout, which made it easy to align labels and CTA hit zones.
Iterating on design feedback
To refine the user interface and validate usability further, I gathered final design feedback from user tests. Based on their reactions, I addressed specific concerns surrounding pricing breakdowns and option layout densities.
Usability comments detailing overall layout clarity, process steps, and simplified options.
Test comments confirming clear hierarchy, visual clarity, and simple language cues.
Developer hand-off: interaction state blueprints & accessibility rules
The blueprints below highlight the interaction patterns, component state definitions, and accessibility features designed for the development handoff. All interactions and component behaviour is described in detail in order to leave no room for interpretation.
Reflecting on the design process & next steps
Developing the Hi! Car Hire mobile interface provided critical insights into optimising conversion rates and information architecture for complex transactional flows.
What went well: streamlined booking & clarity
Consolidating the fragmented user flow into a logical 4-step sequence proved to be highly successful. Key achievements include:
- Reduced Anxiety: Addressing hidden surcharges and transparent pricing breakdown early in the selection funnel minimized checkout anxiety, aligning well with user usability expectations.
- Clear Presentation of Options: Clearly and concisely offering booking extras by presenting the most commmon options (e.g. additional drivers and car seats) upfront reduces cognitive load, stress and worry of forgetting to book essential extras.
- Design-to-Dev Efficiency: The detailed interaction blueprints and state-by-state annotations created a solid developer hand-off pipeline, eliminating guesswork around interactive UI states.
Next steps: areas for future growth
Moving forward, my next steps would be to explore further enhancements to refine the booking experience even more:
- Localisation & Multi-currency Support: Testing how different regions interpret security deposits and local insurance policy phrasing to make the app globally friendly.
- A/B Testing on Filters: Conducting quantitative A/B testing on search filter densities to see if a collapsible drawer or quick tags above listings yield faster transaction times.
- Extended Accessibility Testing: Gathering feedback from users utilising screen readers to validate all custom interactive select elements, focus trap behaviours, and state announcements.