context

The goal of this work was to redesign the Sportwagen Paris website, focusing on improving overall usability, site structure and ease of use from a content management perspective.

Audit of the old website

To put into context the improvements made to Sportwagen's website, it's useful to have a look at the current interface. One of the main issues identified with the current site is poor overall usage of space:

• The home screen is not useful/does not direct customers towards products. It just shows a gallery of promotional pictures.

• The site header is huge and takes up a lot of space, most of it is unused.

• The vehicle list leaves most of the screen real estate empty, it cannot be sorted, and does not convey clearly what is new vs old stock.

On the car listing page, the description of the car is prioritized over the gallery, users most likely want to see pictures before reading about the car. To add to that issue, the font used for the description is huge (25px) this means that the gallery is consistently below the fold. Most importantly, there is no CTA to contact the seller.

From a seller perspective a big issue relates to maintenance, the car listing page does not use a template, each new entry needs to be manually created by copy and pasting an old one. This is rather time consuming and can create inconsistencies. 

On mobile devices, the layout of the site seems to work a bit better due to its simplicity, however some of the issues seen above are exacerbated: 

• On the car listing page, the 25px font makes it so that each line can only contain a few words.

• On the vehicle list, the "A venir" text overlaps the car name making it unreadable.

• The site banner is still huge.

Design Goals

Given the audit of the old site, here are some key improvements that were identified to elevate the user experience throughout the site, the first goal would be to make the home page a lot more useful:

• Incentify users to click on vehicles.

• Promote some vehicles that might need to be sold urgently (from a seller perspective it is not good to keep stock for too long)

• Show upcoming stock, it's common to have returning customers so we should make it easy for them to see what's coming.

• Link to reputable sources for new customers, we want to show that Sportwagen is a well established company, known sources can really help build trust.

Improving the structure of the car listing page is the second objective of the project:

• We should prioritize pictures as it's certainly what most users will want to look for at first. 

• There should be a better separation between the technical specifications and the description of the car.

The focus will then switch to strictly visual design work, i.e. Improving the usage of screen space in the the car list page and rethinking the visual structure on the rest of the site.

On classic car buyers

Classic cars are a commodity, expandable income is definitely needed to buy and maintain one. On top of that, it's not rare for these vehicles to be bought for nostalgia's sake. In other words, most classic car buyers will be from the older generation. This website will mainly be used by less tech savvy users, this is who we should design for.

Overview 

Starting with a quick look at the desktop designs, we'll later focus on mobile and early explorations.

Main page

The main page was completely overhauled as is the most important part of the site, its goal is to retain customers by allowing them to browse through our stock as soon as they land on the site. In this spirit a "promoted cars" carousel was added to the top of the page, here the seller can choose to promote specific vehicles (to liquidate old stock for example).

Just below this carousel we'll also display, in smaller tiles, a list of all the cars for sale, this makes it easy to access any car listing from the home screen.

After showcasing the cars in stock, we're listing out upcoming vehicles. It often happens that the seller buys a car, but does not have time to create a full listing for it. This section enables the seller to still advertise upcoming products without creating a listing. 

The block just below helps solidify Sportwagen brand image, it lists the main goals of the company, as well as different services provided to clients.

The bottom end of the page lists logos of well known sites and magazines that have published content using Sportwagen vehicles, again this helps solidify the brand.

Car screen 

This is probably the second most important screen of the site, after the home page, most of the updates were focused on improving the page structure:

• We have a two column layout, the description of the car to the left, the gallery to the right, we're using space more efficiently than before. 

• We are keeping a clear back button for less technically inclined users so that they don't get lost and know how to get back to the stock.

• A much stronger CTA to call the seller to make sure that the user knows what is the next step to buy the car.

• Information about financing and warranty are now surfaced directly on the car listing.

We're also Adding tabs to the cat listing page. It makes sense to split the vehicle description from tech specs as these are less important for classic cars. Finally our main CTA leads to a clear contact popup and lists all options available to reach out.

Car list

Modifications are mostly structural on this page, we switched to a grid based layout, each tile now gives a better glance at the car being sold: it displays metadata such as kms, price, year. During user research, we found that quite a few clients were periodically returning to the "vehicle list" page to check for new cars. The "NEW" pill is there to make it obvious what is new stock.

Note:  it's important that the milage is a text field as opposed to a numerical value input. This is because the odometer could be in miles, kilometers, or even have no value at all, if it has been stuck for a long time. The seller needs to be able to specify the unit or leave the value empty, a text field gives this flexibility.

Other screens

The other modifications were much more visual, there were no strong functionality changes: 

• The news page was reorganized, the overall layout was improved.

• We added some details on how the warranty works in the about page.

• The contact screen was updated to make it clear that appointments are mandatory and only give a general location of the garage.

Mobile

It was extremely important to adapt the site to tablet and smartphone as a significant part of the user base comes from these platforms as can bee seen in Wix statistics : 

The site was designed to be responsive out of the box, most of the layout and components transferred elegantly to mobile. Some modifications were made to the car listing page to have the images appear on top of the description, but most of the work was Design QA to make sure that all looks correct on mobile:

Alternative exploration

A few screenshots of a much more baroque Skeuomorphism style that was explored initially, the leathery style was rather fitting for the classic car market, however this was deemed heavy visually, it would also be much more complex to build and maintain.

Conclusion

I love classic cars so this contract was kind of a passion project for me. It was also extremely interesting to work on a site where both the needs of the seller and the users have to be taken into account. Even though I'm satisfied with the work, I still think there is room for improvement. I would love to do more user research to fully understand the personas behind this customer base, which is rather unusual and eccentric.

Implementation was done via editor X (ex Wix). This is because it's what the seller currently uses. I was able to implement the designs as expected with very few compromises (The screenshots here are from the site itself).

Note: as of Aug 2022 the new site is not online yet, However I'll be able to share it privately if this project is of interest to any reviewers. The project was designed in Figma, these files could also be shared if you're interested.