Thomas

Interaction Design Content Strategy

Thomas

With over 100 years of experience, the Thomas name has become synonymous with high quality Engagement Rings, Wedding Rings and fine jewellery.

Cushion Cut Solitaire Ring

Background

Their business was undergoing a transformation and they approached us to modernise their website and bring it in line with their new, refreshed identity.

Their website was built as a means to be online; they had high quality products with low quality content. This didn't inspire much trust in the Thomas name (or their expertise) and it just didn't make for an engaging experience.

Our goal was to create a design that was elegant yet educational. In true Thomas fashion, it had to be approachable and let customers appreciate the products and not get overwhelmed with choice; we had to help customers find the perfect ring.

Educating Customers

There is a lot that goes into purchasing an Engagement ring (believe me — I've been there!). There's understanding the diamond's cut, colour, carat and clarity, the different shapes, ring settings and metal type.

With so much to learn, education becomes a crucial part to the experience as it not only creates more informed customers, but it establishes trust in the brand. In Thomas's case, the content — though present — wasn't working hard enough.

Thomas Education Centre Set

The Education Centre

The overhauled Education Centre cover four main areas: The Four Cs, Diamond Shapes, Settings and Metals. Each section had been revised and reconstructed using icons, diagrams and product imagery as visual aids.

Diagrams

Thomas Custom Diagrams

To more clearly represent the grades across the Four Cs (Cut, Colour, Clarity and Carat), a scale was introduced to make the grades more visual and easier to understand.

Sub-navigation

Thomas Custom Diagrams

The tabs enabled easier navigation within the Education centre and also gave customers a preview of what was inside without needing to dig.

Designing for Intent

Unlike typical ecommerce stores, we weren't optimising for conversion. Throughout the process, we purposefully introduced a little bit of friction to encourage customers to slow down and appreciate the product. What we were optimising for was education, experience and trust.

Thomas Product Listing Feature

Product Listing

On product listing pages, we didn't want to overwhelm customers with choice. Customers felt that a lot of rings look the same at a glance. So to make browsing a bit easier, we showed less product which allowed us to make the images larger. Also by separating the product listing views by ring setting, it was easier to distinguish rings from each other.

Thomas Education Centre Set

Product Pages

The product pages needed to be workhorses. Once customers reached these pages, we needed to make sure all of the parts were doing their job. The layout and typography had to be clean and elegant to support the large, clear product image.

Thomas Product Detail

Engagement Ring Custom Modules

Engagement rings had a custom set of modules which were built on top of our core product template. For sections within the Education Centre (such as The Four Cs), we created small format modules to build up the Product Detail page which also linked out to the Education Centre.

UI Overview

Final Designs

Thomas Full UI Overview

The Thomas website was an exercise in restraint. We often had to stray away from best practices for a more intentional customer experience.

The result was an elegant solution that was focused less on pushing customers through a checkout flow, and more on education and establishing trust. It was more about the long play. By doing so, we were introducing friction but we were still maintaining momentum with that customer.

All done? The next case study is a little more playful.
Kidstuff Feature Image

No. 3

Kidstuff

Responsive Web Design Front-end Development

Read Case Study