Photoshop Invision

Fiat Parkside

Having built the previous version of Fiat Parkside’s website, I felt fairly confident with the customer’s tastes. The previous website had been built when we first offered responsive websites, and the customer had had a lot of full width imagery. The brief now was to refine what was there.

This type of brief is sometimes welcome - it means you can use the time to work on the finer details instead of starting from scratch and having to spread your focus thinly in the time allowed. I also worked closer to Fiat’s website, giving me further direction on colour palettes, font weights etc.

Vehicle details page
Desktop home
Home on mobile

The refinements to the homepage included reduced height on the slideshow, and smaller promotional blocks. Making everything less ‘in your face’ meant that navigational items actually stood out better, despite being a lighter font at a smaller size. The customer requested centrally aligned welcome text, something I am not a fan on, so I added a partly visible vehicle either side of the text so that the alignment looked more purposeful, and didn’t have to span the width of the grid. These disappear on smaller displays (Click on images above for reference).

Style Guide

Search result

With the search results and details page, the sidebar was done away with to bring the focus on the page content itself, iconography was used to make spec items more digestible, whilst content on the vehicle details page was tabbed in order to reduce excess scrolling and help break content down further for the user.

Abarth 500
New Abarth page

The rule-breaker was the Abarth section, which used the stark reds and yellows on the dark background - quite different to the Fiat branding on the rest of the site. I created an Abarth branded new vehicle page, complete with video/car montage to capture the mood depicted on the main brand website.

Abarth 124