Introduction
Voetspore is a hugely popular travel-themed TV series in South Africa which has been running since the year 2000. Over the years the brand diversified into safari tours and branded merchandise. The latest venture is 4×4 vehicle rentals which we were approached to build the website for.
The Brief
Objective: Develop an online hub for Voetspore’s new 4×4 rental service, allowing customers to seamlessly book vehicles for African adventures.
Background: Voetspore, an established South African brand known for its exploration, camping, adventure, cooking, and outdoor living ethos, is expanding its offerings to include 4×4 vehicle rentals. With over 24 years of expertise in the 4×4 adventure space, Voetspore aims to provide highly curated self-drive experiences.
Requirements:
- User Experience: The website should be easy to navigate, similar to Bushlore’s website but with a more minimalist design.
- Functionality: Comprehensive information about vehicles, routes, and additional services. Seamless booking process integrated into the site.
Sitemap:
- Home Page:
- Banner image with two buttons
- Brief description of Voetspore and its unique offerings
- Planning section for selecting car, number of people, and destination
- Gallery
- “Book Now” button
- Vehicles:
- Overview of vehicle options (Land Cruiser, Hilux, Jimny)
- Detailed information pages for each vehicle
- Destinations:
- Information on destinations (Botswana, South Africa, Namibia, Mozambique)
- Images, routes, and suggested vehicles for each destination
- About Us:
- Information about Voetspore
- Embedded video
- Mission, vision, and unique selling points
- Reviews
- “Book Now” button
- Contact Us:
- General questions (email address and contact number)
- Head office details
- Directions
- Enquiry form
Design Philosophy: Create a website that reflects Voetspore’s ethos of quality, peaceful outdoor living while ensuring an intuitive and user-friendly experience for booking 4×4 adventures.
The design
Josh Sowter designed the prototypes in Figma, showcasing a high degree of interactivity and presented to the client and to the developer, Simon Barnett, using narrated explainer video walkthroughs.
In addition to being able to represent many aspects of a website to the client, such as design, website flow, animations, and interactivity, Figma is also built to handle handover to a developer. Figma features auto layout which functions in a very similar way to the way websites are coded using CSS flexbox.
A developer can not only quickly see the structure of the site, but gain very quick access to every value such as fonts, sizing and spacing.
In this particular case a relatively high degree of interactivity – such as the hover effect in the main navigation – was designed by Josh, and represented in the design prototypes. Additionally there were several elements such as tabbed views, sliders, and tooltips that had a custom design.
Development
When developing the site we chose to build it with flexibility and extensibility very much in mind. Although the website only started with two vehicles and two packages we built it using custom post types for each with fields for every aspect, such as make, model, price, different categories of features, etc. This allows the client to add additional vehicles and packages at a later stage.
We used Bricks Builder – the industry-leading tool for developers, offering a high level of flexibility, accuracy, and efficiency – to build the website. Bricks is a theme, but it starts with a blank canvas and powerful toolbox. As such we were able to custom-build advanced front-end features without using any additional plugins, keeping the website extremely lean and efficient.
To achieve fluid responsiveness we used a simple yet very powerful system of CSS variables to specify all numerical values such as font sizes, gaps, and spacing. The system not only saved a lot of time during building which was used to refine other aspects of the site, it also meant that everything scaled fluidly as the device size changed, effectively catering the website to an infinite number of devices: wide-screen desktops, laptops, tablets, and smartphones.
Table of Contents
