Overview

Family Rent a Car is designed as a user-friendly platform for renting vehicles in Belgrade. The primary goal was to create an intuitive interface that allows users to easily browse available cars, understand rental conditions, and complete reservations. The design emphasizes clarity, accessibility, and functionality to enhance the overall user experience.

Design Process

Color Palette

The website features a clean and professional color scheme, combining neutral tones with bold accents. This approach conveys trustworthiness while keeping users visually engaged. The strategic use of colors highlights key elements such as call-to-action buttons and important information, guiding users efficiently through the site.

Typography

Modern, sans-serif fonts were selected to ensure optimal readability across various devices. The text is simple and easy to digest, creating a smooth reading experience for all users.

Layout

The website layout is structured for simplicity and ease of navigation. The homepage includes well-defined sections for Vehicles, Rental Conditions, About Us, and Contact. Key elements, such as the vehicle gallery and booking form, are strategically placed for easy access, ensuring users find the necessary information with minimal effort.

Tools Used

• Figma – Used for wireframing, prototyping, and UI design. Figma enabled a collaborative approach, allowing quick iterations while keeping user experience the top priority.
• Webflow – Used for CMS integration and responsive design implementation. Webflow provided the flexibility to create dynamic content areas, such as vehicle listings and filtering options.
• Custom Code (HTML/CSS/JavaScript) – Applied for styling and interactive elements like the booking form and vehicle sliders.

Development Process

As the lead developer, I collaborated closely with the design team to bring the concept to life. The development focused on:

Front-End Development

• The website was built with Webflow for structural development, ensuring a strong foundation.
• Custom HTML, CSS, and JavaScript were used to enhance styling and interactivity, such as dynamic booking form fields, calendar date pickers, and dropdowns for vehicle types.

Responsive Design

• Webflow’s responsive grid system and additional CSS media queries were used to ensure a mobile-friendly experience.
• The website was tested on multiple devices to guarantee a seamless layout adaptation.

Booking Form Implementation

• The booking form was designed for an easy step-by-step process, including dropdown menus for vehicle selection, rental dates, and additional services (e.g., GPS, child seats).
• The form submission was linked to an email notification system, allowing the team to process reservations efficiently.

Webflow CMS Integration

• Webflow’s CMS was implemented for dynamic vehicle listings, allowing the client to easily add, update, or remove cars without needing a developer.
• Vehicle availability updates in real-time based on changes in the CMS.

Key Features

• Simple Reservation Form – A step-by-step booking process with clear selections for vehicle type, rental dates, and additional services.
• Responsive Vehicle Listings – A dynamic vehicle catalog where users can filter by type, price, and features, regularly updated via Webflow CMS.
• Clear Calls to Action – Well-placed booking and inquiry buttons guiding users smoothly through the rental process.
• Mobile-Friendly Design – Optimized layout and functionality for both desktop and mobile users.

Challenges & Solutions

Challenge 1: Ensuring a Simple Yet Comprehensive Booking Form

Solution: A multi-step form was implemented, breaking down the booking process into sections. Tooltips and example inputs were added to guide users.

Challenge 2: Creating a Dynamic Vehicle Listing System

Solution: Webflow CMS allowed the client to easily manage the vehicle catalog. The listings automatically update based on inventory changes.

Outcome

The final result is a modern, user-friendly website that allows customers to efficiently browse and book rental vehicles. The responsive design ensures a smooth experience across all devices. The reservation system is intuitive, and Webflow’s CMS gives the client full control over vehicle listings, reducing reliance on a developer for updates.

The website is live and designed to scale with the company’s growth, allowing for easy expansion of vehicle listings and services without requiring major redevelopment.

‍