The Shepherd Neame project began as a simple website build, but within hours of kicking off it became apparent that a new design language for digital channels was the primary requirement of the client. They has invested heavily in a new customer proposition and brand identity but had not considered digital channels. This project moved from website build to brand digitisation, website design, build, and platform support.
The brief: Working with an offline brand agency, create a new website to re-launch the brand.
Outcomes: New site on new CMS, using new digital brand and design language. An increase in traffic of over 300%, an increase in conversations of 32%, and a reduction in IT platform costs of over £120k per year.
My role: Creative Director, Front-End Technical Director
My role: Creative Director, Front-End Technical Director
The site was to be led by photography. Our research showed that if done well, photography would increase the primary conversion metrics - brand awareness and new landlord sign-ups. I decided to delay photography until the master grids, typography, and user journeys were created. We would work later with a photographer directly to create imagery that met the needs of the site at different break points, and spoke to the specific journeys a customer was on.
A new tool was created to ensure the photography worked technically. By working tethered, the photographer was able to frame the composition and view the results directly in the website's design. He was able to choose the page, the journey, and the breakpoint size and create images that fit. By working this way, we didn't have to guess, the photography sessions were more efficient, and the quality increased.
Although unlikely to be noticed by anyone, the entire design language was created around the data Shepherd Neame was create - 1698. The grids, typography, colour systems etc all used this ratio (16:98). Whilst fun, it serves as a functional ratio used by the browser to render the site. This way the typography scales correctly, and the placement of the images within their frames remains consistent.