JB Hi-Fi Epic Gift Guide

An inspirational shopping experience to help users find that perfect gift, during key shopping periods throughout the year.

JB HiFi were looking to try something different for their upcoming Christmas campaign. The brief was simple – a digital experience to replace the usual printed Christmas gift guide.

Working closely with the JB team, we started out by developing the user journeys; i.e. what browsing options should we present to help the user find the perfect gift, and what should each of these experiences look like? We settled on 4 primary journeys – the most important being based around who the user was shopping for (e.g. for him, for her, kids etc), as well as the ability to browse by interest, price and categories.

Another important part of the brief is that it wanted it feel more like a JB magazine rather than eCommerce shopping experience – a helpful/advice-based vibe rather than “buy it now” – but with the JB brand remaining front & centre. We loved this – it really opened the door for us to be creative with our layout styles, and create a unique, immersive, user experience..

Although this website was designed for Xmas 2018, it now remains a permanent fixture within the JB HiFi digital strategy, being called upon throughout the year for other campaigns

Read the full story

View the website
Have a project in mind?
Send an enquiry   09 888 9229
"Scratch delivered an exceptional website experience for our gift guide that was spot-on brief, and well exceeded our expectations. Their creative, yet pragmatic approach to ideation and strategy has resulted in an effortless user experience, executed at a very high level."
Jon Kirman, JB Hifi Jon Kirman Digital Marketing Coordinater
Here's what we came up with...
A carefully thought out strategy & structure, implemented in an unique, engaging style.
Website design image hotspots

Image hotspots

A custom "hotspots" layout, enabling us to draw the users eye to a certain point within an image, and link this through to the relevant product page.

Gift guide mobile eCommerce website design

Slick mobile experience

A majority of users were expected to visit this site on a mobile device, so delivering a fast, carefully considered, mobile experience was key to success.

Gift Guide eCommerce website design features

A touch of culture

We brought through a part of the in-store JB culture by featuring staff artwork in amongst product recommendations.

Gift guide website design background video content

Engaging video content

To really bring this experience to life, we enabled video content to be displayed throughout the site and assisted with development of this content.

Take a look around
Browse through some highlights below, or to get a true feel for the quality of execution visit jbgiftguide.co.nz to take a look.
https://jbgiftguide.co.nz/
Gift guide website design background video content ss jbgiftguide website design home mb_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website design for him dt 1_1450x750 ss jbgiftguide website design for him mb_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website design home brother dt_1450x750 ss jbgiftguide website design home brother mb 1_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website product headphones dt_1450x750 ss jbgiftguide website product headphones mb_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website product beats dt_1450x750 ss jbgiftguide website product beats mb_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website design for her dt_1450x750 ss jbgiftguide website design for her mb 1_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website design home daughter dt_1450x750 ss jbgiftguide website design home daughter mb_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website product eductional dt_1450x750 ss jbgiftguide website product educational mb_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website product osmo dt_1450x750 ss jbgiftguide website product osmo mb_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website product phone dt_1450x750 ss jbgiftguide website product phone mb_550x825
https://jbgiftguide.co.nz/
ss jbgiftguide website product phones1 dt_1450x750 ss jbgiftguide website product phones mb 1_550x825
Driving user engagement
ft jbgiftguide website design blades_1193x1012

An innovative "layered" browsing experience designed to drive engagement

During the UX strategy phase of this project, we recognised that as an exploratory gift shopping experience it had to be really easy for a user to go back & forth between the gift guide & product pages, without losing their place.

For example, if a user was on the “Gifts for dad” page and clicked through to view a product halfway down the page, it was highly likely they would then want to go back and view other gift idea suggestions with as little friction as possible.

Enter the “blades” – a concept we designed that enables the viewer to click into a product and have this content open over the top of the current page, then easily close and go back without losing their place. The blades concept allows the user to go many layers deep into the site – for example open a product category, then a product, then a related product – then again easily close these windows and go back and pickup where they left off.

Go take a look
Automated data feed
Gift guide website design background video content

A custom product data feed to minimise double entry

As the JB marketing team were already tasked with managing the main eCommerce website on a day to day basis, they were keen to minimise double entering of product data where-ever possible.

With this in mind, they asked if we could build an automated data feed to help keep the new gift guide website up to date, but with a catch – there was no formal data feed functionality available – only a .csv product report they receive each day via email, as an attachment.

True to the Scratch ethos, our response was of course “we’ll figure something out”.
So we went to work developing a script to extract the email attachment, transpose the data into the appropriate format, then run some checks & balances before running an update on the gift guide website database.

The result – a very happy marketing team!

 

High performance hosting
Gift guide website design background video content

Plenty of horsepower to ensure a rapid browsing experience

As the gift guide website was designed to serve as a landing point for a number of concurrent Christmas campaigns (both digital & traditional channels), it was vital that there was sufficient server resource in place to deal with the large influx of traffic.

Although the Scratch hosting environment is setup to cater for high traffic websites – and we run advanced server caching as standard – we wanted to make absolutely sure that every user had a super fast experience, so covered our bases by providing a dedicated performance upgrade for the campaign period.

 

Start a project