Slimming World Homepage

Focus and speed gives 50% drop in bounce rate

This was a short project to refresh the design of the company public homepage. The previous iteration, shown in fig. 1, suffered from ‘content creep’ — new features added over time with little regard for the content hierarchy meant the page was trying to priortise everything, and ultimately priortised nothing.

Fig. 1: Previous homepage design. Lack of content structure or hierarchy led to the page being confusing and unfocused.
Screen print of the Slimming World homepage from December 2014

Initial designs

Liasing closely with the content and online support teams and studying analytics data allowed me to wireframe layouts that focused on the user and business needs.

Fig. 2: Layouts were quickly iterated using pen and paper and an online wireframing tool.
Screen print of the Slimming World homepage from December 2014

Code & the critical rendering path

When the final design was refined and signed–off, I hand coded the page with download speed and performance as a primary requirement. To this end, I created a bespoke template and separated the CSS in to two parts:

  1. The content that is most likely to be in the viewport on initial page load has its CSS minified and inlined in to the HTML <head>, allowing that part of the page to render as quickly as possible.
  2. If Javascript is available, the CSS for the rest of the content is loaded after the HTML has finished downloading. Additionally, the main CSS for other content pages is loaded to take advantage of browser caching and improve performance on subsequent pages.

Results

Optimising the critical path as described above results in essential content being available and interactive in an average of under 1 second, and the page fully rendered in under 2 seconds.

Overall page engagement improved dramatically, with the bounce rate dropping by over 50%; from around 23% of visits only viewing a single page, to (at the time of writing) averaging around 11%.

Fig. 3: Google Analytics shows the bounce rate as a percentage of page views dropping dramatically when the new page design is published. (Publish date indicated by the vertical red line).
Google Analytics showing page bounce rate from February 2014 to February 2015
Fig. 4: The final design as first published.
Slimming World Homepage as of December 2014

www.slimmingworld.com