The Problem

The existing Rough Guides website was designed and built over 5 years ago. As a result the design was starting to look dated and some of the pages and user flows weren’t performing as well as they should.

With an average of 2,000,000 sessions a month Rough Guides is a huge site. Features account for 25% of that traffic with a large proportion coming via social media. That 25% was particularly important as it was based on current trends and helped build and maintain authority.

The existing design was uninspiring, so the task was to create an immersive and image-led look and feel that could be used to simplify the user flows, refresh the brand and to help promote special features, such as ‘The Rough Guide to 2016′ and ’50 things to do before you die’.

The Process

Our SEO and Insights team provided us with detailed analytics, heatmaps and behaviour videos so we could see how users were interacting with our existing pages. This meant we could be sure to construct and implement the new design to improve the user experience, build brand trust and awareness and to increase traffic.

Alongside the insights I conducted a thorough analysis of design across a large number of competitor sites, shared my findings with the content teams and stakeholders, then worked together to decide on an approach that would suit our brand and provide a strong aesthetic.

Working across 4 breakpoints I wireframed layouts in Illustrator, before applying the final visuals, text, colours and animations. My first iteration was well received and after a couple of rounds of amendments we handed over to the development team.

To handover I created 3 additional layers in Illustrator, for behavioural, styling, and spacing notes. Fortunately, this is no longer necessary, thanks to Sketch and Zeplin.

My notes for the developers on style, spacing and behaviour.

The Result

Our first special feature was ’50 things to do before you die’, which reached a new record of 63,604 sessions in July and helped us towards a new overall sessions record for the site.

Following the success of ’50 things’ our next big hit was the ‘Rough Guide to 2016’. In three days we surpassed 300,000 pageviews, trended on Facebook alongside Justin Bieber and had widespread press from the Mail, Indy, Lad Bible, Metro and more.

The new design also included a new newsletter sign up banner offering the user 20% off eBooks. This had a huge impact on registrations. In April 2015 the site had 65 email registrations, while in April 2016 email registrations were up 800% YoY to 591.

6 months after the new template launched, features pageviews were up 83% YoY, with articles seeing a 25% increase for time on page.

Lessons Learned

Creating a full screen experience for the special features worked. However, the first iterations of my designs lacked sufficient routes back into the site.

To create the experience we removed the main navigation but this, combined with few options at the foot of the page, left the user with limited ways to return.

This was partially due to time constraints and, whilst considered, was not included in the MVP. However, testing showed that inclusion of related content and obvious navigation is vital to reduce bounce rate and increase time on site.

When it comes to an image-led template such as this, bigger is definitely better in terms of image and text size. As long as text length is kept to a minimum (to avoid excessive scrolling on mobile). Full screen images. bold headers and large body copy create an experience that can’t be rivalled by standard 1200px article templates written in prose.

Bigger is better when it comes to an image led template.