designsbyben.co.uk
Photoshop Invision
Devices mockup

Hawthorns

The brief for Hawthorns was fairly open and short, but it was clear they they wanted something that delivered a powerful impact on the user. The words ‘iconic, flash, cinematic’ conveyed the energy they wanted to see in this new website, and being dealers of performance cars lent very well to this.

The site was to be very current, but also capture their long pedigree in motor racing. Upon further conversation, I discovered the customer was inspired by websites of premium watch companies, which gave me a clearer direction to take the designs.

Hawthorns crest

"They want something different but that encompasses their long pedigree in motor racing... Old meets new... very new, very flash, very iconic"

Potential styles

Initially, I had chosen a slightly different direction for the site - a more classic heading font, and a gold colour was added to their red and grey palette. They then requested keeping fonts from their current site, so I took a more modern direction with the theming, ditching the gold and relying on the imagery to tell the heritage tale.

Heritage and performance

The customer then supplied me with a lot of imagery which was to feature where I deemed suitable within the site. Although I was initially engulfed, I did end up using most of it, plus adding a few of my own sourced images to fill the gaps.

Hawthorns homepage on laptop
Hawthorns homepage on tablet
Hawthorns homepage on mobile

I chose to work from one particular watch website, the account manager confirming they would love the use of the asymmetric tile layout seen there. This website was framed at a smaller width, so I took the idea and modernised it with a larger screen layout (please click on images for previews).

Increasing the width of this format also meant a naturally increased height. Upon leasing with the developer, a decision was reached to add a script to set these to match the height of the browser window. Now pretty much every section of the homepage was designed to fit within a ‘frame’. It made sense to do this, as it helped create the sense of a story being told as a user scrolled, as opposed to a hurried collection of website sign-postings which many of our websites feature.

Careful consideration was required as to how this information was administered to the user on smaller screens, and mockups were created to aid the process. The high use of imagery within the layout made this easier to achieve.

Overlay navigation Overlay search

(Above) The customer also liked minimal content to be visible when a user arrived on the page, one such solution was to hide the search and navigation behind symbols. These then slid out in an app-like fashion when touched or clicked, occupying 50% of the screen on desktop and tablet, 100% on mobile. Click/tap left/right to view overlaying menus.

Vehicle search results page
vehicle details page

I also created visuals for the vehicle search results and details pages for developer reference. Style guides had been created for the general user interface, but I felt some of the form options needed to be coloured differently to create a visual hierarchy. Some of the filters were more important than others, and this would help guide the user to these.

The spacing of elements on these pages also needed to be addressed, as a site can quickly fall apart if these aren’t done correctly. This wasn’t in the brief, but I was happy to produce these to ensure quality was maintained throughout the website.

UI Style guide