Spotawheel is the leading B2C used cars platform in Greece with an aim to empower people to buy a reliable car and to deliver the best value possible. Thus the most crucial business objective that needs to be kept intact is the transparency of the product and the seamless navigation through its main features.

Process

Discovery Phase

Business Goals

In order to find opportunities for improvements, I went through the main business goals that the product should serve and I came to the following:

1. Remove customer friction when searching and buying a used car.
2. Deliver a great online shopping experience to customers, similar to the big e-marketplaces such as Amazon, etc.
3. Radiate trust and authority throughout the experience that aligns with the overall brand position.

Red Routes analysis

Based on the most critical business goals mentioned above, I could now determine the red routes within the system, thus the most frequent and critical activities users perform. So, we have to make sure that we eradicate any usability obstacles along those journeys. Below, I’ve listed three red routes from which I picked the first one to audit. The reasoning behind my decision was that it reflects both business and user objectives the most.

Heuristic Markup

Usability heuristics are a standardized method to evaluate the quality of a product. I used them to audit the search flow of Spotawheel and markup some observations. Below you can read them in detail:

1. No predefined sorting when landing on car listing. This can be overwhelming for the user because the search results have a feel of randomness.

2. Some labels on filtering and sorting options are too technical or maybe too vague for the user (αμάξωμα — κιβώτιο — most famous)

3. The order of the filters should be reorganized from most frequent and critical to least.

4. You can’t overview the filters you’ve already selected; you can only do it when you have pressed the view all cars button. In conjunction with the lack of auto filtering of the cars in view on the right hand side, it doesn’t give users enough freedom. The system shouldn’t force the user to recall his actions and preferences. Instead, he should easily recognize what filters he has selected when he is on this stage of the flow. (6th Usability Heuristic — Recognition rather recall)

5. Even when you have selected all the filters you want, the system doesn’t inform you how many results match your criteria which leads often to landing on pages with no results which can be frustrating and make the users feel that they are guessing. (1st Usability Heuristic — Visibility of System Status)

Primary User Research (Hybrid)

Link to the entire Research Plan

It was now time to let the users speak in order to discover some helpful insights. Due to lack of time, I ran a hybrid research in which I incorporated 3 different research methods: a 5 second test, a User Interview, and a Moderated Usability Test. The main research goals were to understand better:

1. Spotawheel’s reputation and brand awareness.
2. Users’ challenges when they search for a used car.
3. Main search criteria users utilize and base their search on.
4. Key factors that help them differentiate and finally choose a specific car over another.
5. Issues when using Spotawheel’s platform.

Research Findings

The main insights that popped up from my research were:

1. Users didn’t understand the style filter and “αμάξωμα”
2. Sorting by lowest price is the most common sorting option
3. Main criteria: price, year, mileage
4. Users want to select multiple options inside a filter (e.g. manufacturer)
5. Annoyance from searches without search results.

Design Phase

Ideation

As research confirmed some of my assumptions, I have made my decision on some small tweaks:

1. Change the order of the filters
2. Change label “Αμάξωμα” into something that made more sense for the users.
3. Sort results by “lowest price first” by default.
4. The button “Δες Αυτοκίνητα” should include the number of results.

I could now concentrate on coming up with solutions to improve the visibility of system status in order to empower furthermore the users.

Concept #1 - Increase visibility through contrast

Whenever a user selects an option from the filters, this option will be highlighted by a stroke. This will make the option stand out from the others and inform the user subconsciously that it is selected.

Concept #2— Sticky section

My second idea was to design a small section above the filters that would stay sticky all the time. That would include all the filters selected in small tabs with an x button if the user wants to discard it.

I decided to go on with Concept #1 as it doesn’t overwhelm the design. Also, there is already a similar to Concept #2 design pattern when you land on the search results.

Design Explorations

I then tried to explore different ways to add contrast between selected and non-selected filters.

My first thought was to add a color overlay on selected filters but it seemed to me that it was a bit too much.

So I tried something more subtle by changing the font color of the selected filters into the primary brand color. The issue here was that the contrast between background and foreground color wasn’t enough (2.35) and could result in accessibility issues.

That’s why I came up with a third solution, to add stroke to each selected filter with a very subtle color overlay. I thought this was the best solution as it didn’t affect legibility, it retained the brand’s color and it didn’t feel as overwhelming as the first design

Contrast Issue on Main Button

As I checked the design for contrast issues I came across a serious one on the primary button of the search flow, the “View cars” button with a 2.52 score, which is relatively low.

So I decided to change it as well. I aimed to meet the contrast standards and to not diverge a lot from the brand’s main color.

The difference is significant as you can see below!

Final Design

Sum Up

Here is a list of all the tweaks and design changes I made on the search page:

1. Predefined sort by “ Lowest Price First”
2. The “Filters” label is distinguished from the actual clickable filters by a drop shadow on the container, font color ,and background color.
3. Selected filters are indicated by a border stroke and a subtle color overlay.
4. Rearranged the filters to match users’ needs.
5. Changed “Αμάξωμα” label to something less technical (“τύπος αυτοκινήτου”)
6. Changed main button’s background color to improve its contrast ratio as it previously was too low (2.52)
7. Added the number of cars that will show up