Lotus
Cars
The automotive e‑commerce website, configurator, and online marketing channels for the much‑loved British sports car manufacturer: Lotus. Built on top of WordPress with HTML5, CSS, and JavaScript.
In Detail
My involvement in the development, maintenance, and evolution of the Lotus website spans well over a decade, beginning before the relaunch eighteen years ago (in time for their launch of the Evora) and coming right the way up to the more present day and 2020 launch of the Evija, which included more online marketing and hype around the reveal than any previous model.
In 2008, and as part of a tiny team (in which I was the junior – and only – UI developer), we launched an all‑new website for Lotus. Although advanced for the time, this was a relatively modest affair built using CodeIgniter, but with some stand‑out features, including a Flash‑based 3D vehicle configurator and tool that automatically put visitors in touch with their local dealership, with the details of their dream car pre‑defined.
It is fair to say that the website has evolved and grown since then to a point where nothing of that original site remains. The site now sits on top of WordPress, using a mixture of HTML5 and CSS animations alongside vanilla JavaScript (although a little jQuery also appears to have snuck in).
The previous 3D configurator has been replaced with a version that does away with 3D models in favour of an enormous set of rendered images, covering every option and variant available. These are switched between to display your specific configuration as you scroll through the options available on each vehicle. The mechanism of building your dream configuration is still there, as is the ability to share it directly with your local dealership.
As the brand has seen an upsurge in popularity over the past decade, the website now receives in the region of 200,000 visitors every month, many from outside the UK. As a result, the website now hosts content in over thirty different languages to cater to these international customers.
Model Overview
Each vehicle in the Lotus line‑up is displayed by dedicating as much of the screen as possible to imagery and key figures. The user can then choose to scroll further through images of the car, delve further into the vehicle specification, find out more about finance options, or enter the configurator.
Vehicle Configurator
The cornerstone of any sports car manufacturer's website is the ability to show just how diverse and individual a customer can choose to specify their vehicle. Subtle animations and careful consideration of the movement between smaller and larger screen sizes make this as close as possible to an immersive experience.
Following the big‑image theme, the website car configurator uses a standalone (back‑end) image generator that passes imagery rendered from 3D models to the front end as each option is selected, further caching the image in case anyone selects the same set of options again in the future.
All‑Electric British Hypercar
Underpinned by WordPress, the client can manage the content on‑site as they please. There is an extensive library of components and layouts that can tell their own story, as well as the story of their latest vehicle developments. This includes the use of animations and hypermedia, which can be used to, for example, demonstrate the aerodynamic efficiency of the new Evija via a short looping video.
Pre‑Owned Car Sales
Equally valuable to a car company as its new‑purchase customers are those seeking a used example. The Pre‑Owned section allows website visitors to find their ideal car, offering extensive filtering to narrow down results to specific models, trim levels, locations, and many more. This section of the site connects to their dealership network stock systems and updates automatically as cars become available or are sold.
Dealership Finder and More...
With a large network of specialist dealerships, offering an easy way for customers to find their local dealership is a principal requirement of any car manufacturer's website. In the case of Lotus, this follows the same big‑image format seen across the site, allowing visitors to use their postcode or browser geolocation to centre the map on their location.
