Laing engagement image

Improving UI – Laing the Jeweller

A large part of my job revolves around taking note of what is working well, and what is perhaps failing in regards to the overall interface and experience when using a website. I tend to look at websites that I have launched – in this case Laing the Jewellers – every 6 months or so. I find this gives the sites enough time to ‘bed in’, as well as for allowing a decent period of time for user feedback and patterns to emerge.

What were the issues?

When launched, the website was miles ahead of their direct competition. However, as you’d expect, these competitors have updated their offering and it’s now time to see what could be improved. It’s only natural that, over time, elements get added to the site and before long, the interface becomes cluttered with elements fighting against one another.

When arriving on the site, the first item that users would notice is the header. After taking a step back, it became clear that it probably wasn’t structured as well as it could be. The top bar was taking up a lot of room with spacing around buttons, input boxes and icons. The experience on mobile was in need of some attention too, with the icons appearing on the large side. Generally, it looked a little weak.
The top of the Laing website on mobile

What was done to enhance the Laing UI?

Working alongside the agency responsible for the wider Laing branding, we came up with a new style to roll out across the site. The old Playfair Display font was to be replaced with EB Garamond, and the body copy was updated to use a much more pleasing Proxima Nova. Each headline would now feature a small keyline underneath it.

The colour palette was reigned back too, removing such widespread use of the ‘Laing blue’ and instead using a darker grey colour. This made the page(s) feel a lot more polished.

With regards to the layout of the page, Laing were keen to make use of their strong photography assets to try an emphasise their products. I devised a grid system that would allow them to upload a series of images, along with dynamic text and a link via the Magento CMS.

Design of the Laing homepage grid

By doing so, it allows the website to maintain a constantly fresh feel to it, with campaigns and signposts probably changing frequently in the future. I paid careful consideration to building this grid so that it would work effectively across devices too, and I’m pleased with the end result.

Mobile UI

The older version of the site was starting to get scrappy when viewed on a phone. With so many elements being added to the site over the last 2 years, the default outcome was “place a link to it here“. Obviously this bloats the interface, with the end result being two fixed bars at the top and bottom of the screen.

Working with the client, we managed to come up with a solution that featured only the essential items to the user which resulted in a far greater sense of space.

The before and after of Laing homepage on mobile

Making things obvious

Anyone in the field of user experience will know, or have heard of, Luke Wroblewski. One of his quotes that I often find myself relaying to clients is

“Obvious always wins”

The issue with the previous version of the Laing product pages was that one base template was used for all options. This essentially meant that over time, code had been added in to this base file turning elements on or off depending on the page the user was on. To give you an idea of the raft of different product pages that Laing have, I’ve listed a few below:

  • A product to buy online
  • A product to buy online and reserve in store
  • A product to buy online, reserve in store and pay by finance
  • A product that can’t be bought online, but can be reserved online
  • A product that has sizing options, can’t be purchased online but can be reserved

An example of a weak area (in regards to UI) of the previous Laing site is shown below. In this instance it’s a product that wasn’t available to be purchased online. This usually applies to higher specification items, or brands that don’t allow retailers to sell online. You can see from the image below that there is no clear call to action on the page. This would likely leave users confused as to what to do next.

The old design for the Laing product page
I wanted the layout of the page to remain largely the same as a standard product (i.e. one that users could buy through the site). Instead of placing a ‘Buy Now’ button, we replaced it with a primary call to action of ‘Enquire Now’ with a separate link next to it stating why the product wasn’t possible to purchase. I felt that this was far more obvious and as such, more user friendly.

The new design for the Laing product page

Give the user context

I wanted the experience for any user whether they be new or regular to be as easy as possible. By making a few additions to the UI, I’ve been able to make their journey through the website simple. Some features that were implemented include:

  • When a user selects ‘Ask a question about this product‘, the modal window that opens is pre-filled with the product that they are enquiring about
  • The ‘Send a Hint‘ form has a textbox that pre-fills both the user and recipient name to reduce user input
  • We used an AJAX cart meaning their journey is not interrupted when adding products to their bag
  • Most of the header UI was removed when entering the checkout process. A number of studies show that this increases conversion rates

We have existing analytics for the website for the usual items that you’d expect to see, so it will be interesting to measure how much of an impact these changes have now the site has been launched.

What else was done?

Along with the points listed above, there were other areas of the site that I wanted to to improve, and were successfully implemented. These included:

  • Overhauling sections of the site to match the new UI in place for products and catalog in general
  • Enhancing the checkout process by removing unnecessary UI clutter
  • Improving the mobile navigation significantly

All in all, I feel that the new iteration of the Laing site is an improvement on the previous. Through effective communication between the client, the brand agency and our team, we’ve managed to produce a product that is far more refined, easier on the eye and overall – easier to use.

Thanks for reading 🙂

Visit the Laing website