Laing the Jeweller

The prototype creation, design and front end build of a new Laing Magento site.

The background

Laing are a high end jewellery company with stores in Edinburgh, Cardiff and Hampshire. The previous site was dated and the e-commerce offering was clunky and unintuitive.

I was responsible for prototyping the site, designing the interface, as well as developing the front end structure. The website launched in June 2013.

Getting started

The old website that was in place for Laing was really starting to show it’s age. When compared with their competitors, along with larger more global websites, it was clear that the offering was falling behind. It wasn’t responsive. The images were small. The overall process of purchasing a product was uninspiring.

To start the process off, I met with the agency responsible for Laing’s offline media. During this, we figured out the route that we wanted to take in regards to design. It was beneficial to have a brand in place prior to starting the concepts as we knew what I had to work with.

It was whilst at this meeting that I really started to get a feel for how Laing communicated their brand. I also learnt just how much effort goes in to every one of their bespoke pieces of jewellery. It was imperative that the end website was of a high quality to match this ethos.

Prototyping

At roughly the same stage I was responsible for creating interactive wireframes. The site would be built in Magento. This would allow the checkout journey to take care of itself somewhat, but the rest of the journey needed to be considered.

Rather than dive straight into Axure to create wireframes, I began by browsing around the web to see what other similar companies were doing to convey their messages.

A few rough sketches later and it was time to develop some interactive wireframes.

Whilst wireframes illustrate the journey from arriving on the site to ultimately purchasing a product, it is rare that the client gets excited about them. The designs are where this tends to happen.

Design Concepts

The concept creation phase was enjoyable. Laing had a vast array of assets and photography to dive into and make use of. They were keen to make their site different from others in the sector and wanted a clean, polished appearance.

The grid layout – featuring one large image on each row – was a welcome break from the norm. The end result of this definitely paid dividends and makes a potentially dull page appear more visually stimulating.

It was important to concept a number of pages to display to the client at this stage too. It would then be as easy as possible for the team to create the backend  structure of the site.

Build

This happened to be the first project that I used SASS. It happened to be one of the best decisions that I’ve made in the work environment. I don’t know what I would do without it now. I often open older projects that just use CSS thinking “this is so slow and painful”.

It was also only the second time that I’d had the experience of using Magento. Whilst the development team took care of the hardcore elements, there was still front end work to tie in to all of the template files.

Once you get your head around Magento, it starts to make sense. The initial starting point can seem incredibly daunting however. I do enjoy working with it as a platform in general as the flexibility and opportunity it offers is fantastic.

Conclusion

The new site has been live for over a year now. The results have been extremely favourable. Sales have increased, visit duration has grown and there has been an increase of traffic from mobile users. There are a number of areas that I would like to improve upon, but as with all digital projects, it is a constant work in progress.

Update

I’ve written a blog post about updating the Laing UI since this original portfolio entry was added. See what was changed here.