Enhancing UI – The Motorpoint search

Don’t ask me why, but I ended up on the Motorpoint website today. I have no intention of buying a car now, or at any point in the near future. There must have been a reason I came to their website but I can’t shed any light why that was. Sorry.

Regardless, as with most car websites, I assume that the main interaction point of the homepage is the search. The current iteration looks dated and ugly. Using a garish blue and orange scheme (honestly, I hate that colour combination), I thought there must be a way to visually enhance it.

I wondered if there was a way that we could improve its appearance without changing structure and functionality of the rest of the site.

Here are the results.

The existing offering

See. It’s pretty nasty.

The main gripes (aside from colour) that I have with this design include:

  • The title and the toggle vertical alignment seems off. Would be good to amend that.
  • Postcode field is too long. It’s a confusing affordance for the user who’s expecting a short field for this kind of data
  • We read left to right, yet the form groups (price and car details) appear to be in column format
  • The button has rounded corners, but the inputs are all squared
  • The toggle of monthly and price range is too wide based on the ‘switch control’ inside it
  • The ‘Price Range’ label doesn’t feel right when placed next to ‘Monthly Payments’. This would probably be better as ‘Cash price’
  • There are 6,363 cars at the start of your search, but what about after applying filters? It would be good to provide a numerical indicator on the button
  • There’s an awful white drop shadow AND a white border on the containing box. Yuk.

 

Fixing the problems

After looking at the above issues that I had with the Motorpoint form, I opened up Figma and recreated the UI.

Leaving everything as it was on the site and focussing solely on the search overlay, this is the result I came up with.

I didn’t want to change the colours used or the fields that appear on the form. True, I’ve introduced a slight gradient to the background and the search button, but aside from that, it’s all largely the same.

I would list all the individual bits that I changed, but they’ll just be an opposite of the list I made above so I’ll not bother.

Instead, I’ll finish with a before and after comparison.

Thanks for reading 🙂