How we redesigned and rebuilt Belgium’s largest branded used car website
Nearly New Car is a subbrand of Mercedes-Benz. Their business model is in fact an interesting one. Being part of the Mercedes mothership, they have access to slightly used Mercedes and smart cars. They fix any visual damages to the cars and check them on a series of technical aspects before selling those cars again to people who are dreaming of a Mercedes-Benz, but can’t really afford a new model.
We’ve been maintaining the Nearly New Car website for about ten years when the call finally came. Their website was old and it no longer lived up to industry standards. We spent months convincing the client, but after a while we were able to persuade him to start from scratch.
Don’t get me wrong. The old website had its good points too. Although they were slow, the search modules worked well. The conversion points were clear for our target group. All content was well structured and organised. But let’s face it: you just can’t have a non-responsive website in 2019 anymore.
Research, concept & wireframing
To start off the project, we looked into the way people buy cars. Because a car is a product you’ll use for a long period of time, it makes sense consumers don’t buy cars on impulse.
A few years ago it was perfectly normal to spend an entire day visiting different car dealerships to find the car that best suited your needs. Today, our smartphone is our personal connection to the dealership. On average, it takes about three months to decide which brand, which model and which options are best. During those three months a consumer goes through five stages in his customer journey.
It’s important to realise a consumer has a different surfing behaviour and different questions during each of these 5 stages. While designing the new website we had to keep in mind that we needed to answer questions in all stages of the buying process.
Further reading on the car buying process: Think With Google
We realised the website would be a drastic change for both the end-user and our client. To explain our goals, we looked for websites where the user experience resembled what we were aiming for. We also linked these examples to the stages in the user journey. This made it easier for the client to see the direction we wanted the website to move towards and also to realise what needed to get done. By doing this, we also managed to get some buy-in from our client without actually designing anything ourselves.
Early on in the process we made a few key decision on how to build the new website. We wanted the website to be fast and flexible.
We made sure the website was flexible as soon as we started wireframing and designing the new pages. The speed came during development.
Designing & Prototyping
To kickstart the design process, we documented all screens and flows the old website had to offer. People could browse cars in a list, filter models based on their preferences, contact the dealership where the car was located, request a personalised offer and test drive, get info, and so on.
To make sure we focussed on the right pages and functionalities, we researched our target users needs. We installed the Hotjar snippet on the old NNC website to see what parts of the website users interacted with most. It didn’t really surprise us, but we saw that the pictures of the cars were the most valuable asset on the website. We had to focus on images on the new website too.
By surveying a few of our visitors we determined how to build the new search engine and what data types to integrate into the filter mechanism. Turns out, people don’t need a filter for color: they can see the cars’ color in the pictures. We also discovered people tend to search more and more based on what they can afford each month rather than their total budget. Nearly New Car offers a great monthly payment plan, so we decided it was necessary to integrate this in our filters.
After our research we started the actual design process. We designed the new website with Sketch. This helped us to build a flexible language with reusable components. Working with Sketch made going through feedback with the client really easy. We were able to update small things on the fly during feedback sessions.
After creating a few pages, we took some time to clean up our design file and made sure all the different elements were structured in symbols and styles. This useful Sketch feature helped us further in the process to keep all our different pages and flows synchronised. Once your symbols and styles are defined, creating new pages is actually more like wireframing than designign. Also, the components helped us to work closely together with the projects’ developers.
So, we wanted a fast website. Not an easy task with an outdated back end and an overly complex database structure. To tackle this challenge, we decided to build a middleware API that only sends the absolutely necessary data to the front-end.
All of the logic for filtering and searching is handled in the front-end. During the initial site load, a JSON file with car objects is saved in the local storage of the browser. When you start to use the filters, or update your search query, there is no need to fetch updated results in the database. All information is already stored in your browser so we can instantly show you the cars you are interested in.
The chosen filters are also saved during your session. If you check out a car’s detail page and realise this car might not be the one for you, you can just go back to the overview page and pick up where you left off. Your filters and your search results are still there in the same way you set them up before.
Initial results and feedback
Since launching the website we’ve been keeping a close eye on the metrics. After two months we see a decline of almost 30% in bounce rate and a 128% increase in pageviews.
We also see some great loading speed gains on the homepage (-8.2%) and on the car detail pages (-23.4%).
Based on Hotjar recordings we see visitors engage more with the filters to find the car they are looking for. And they also check out more detail pages than before.
We’re really happy with these first results. We’ll definitely keep an eye on the further evolution of the metrics and optimise where needed.