David Shuttle - premium jewellery and watches marketplace UX case study

Established in 1978, David Shuttle presents a premium collection of jewellery, watches, home accessories, and gifts that are sure to impress.

Priding themselves on their vast product knowledge and with a passion about the pieces they sell, David Shuttle's success has been based on the excellent customer service they provide.

That being said, it's clear to see why they placed such a huge emphasis on designing the user experience when creating their storefront.

Now, let's jump in and take a look at some of the storefront customizations featured on David Shuttle's multi-brand ecommerce site.

{{blog-card}}

Navigation

On mobile, the website can be navigated via the bar at the bottom of the screen. The hamburger menu displays their main product categories which, when clicked on, branch into subcategories. This is also where users can search, access their account, view the cart, and return to the homepage.

On desktop, they opted for a megamenu that features images from select brands when hovering over each category.

In both cases, their phone number and live chat option lie at the top of the page, making it easy for potential customers to reach out and have their queries answered.

Homepage

As is often the case, the top of the homepage promotes the seasonal sale, with other images in the slider promoting individual brands.

Below the slider, we see a selection of products included in the sale, each clearly labelled with a ‘Sale’ sticker in the top left-hand corner, and a message at the bottom verifying the item is in stock.

The next section of the homepage shows off some of their featured brands, each accompanied by an eye-catching image that visually describes their products.

This is where the only real difference between desktop and mobile shows up on the homepage. Desktop features a Feefo average user rating section, with an individual review slider, and a Platinum Trusted Service Award to boot. 

On mobile, this section is absent, likely for UX reasons, and transitions directly to another slider featuring more brands (this time only with brand logos), followed by a section describing David Shuttle and the products they offer.

Footer

The footer highlights, in the form of graphic icons, some key features of the website, such as free shipping, secure shopping, and loyalty points, as well as a list of secure payment options available on the website and another Feefo award badge, which both serve a way to build trust with the users.

At the very bottom, there are additional links to their live chat, phone number, newsletter sign-up, and email address.

The only difference here between desktop and mobile is the element layout - notice how on mobile the elements stack on top of each other.

Brand Listing

David Shuttle takes the user through a very visual journey before arriving at the PLP.

Firstly, visiting the brand page you’re greeted by a list of all of the brands, each accompanied by a stylistic lifestyle image on desktop.

Brand Page

Selecting one of them, you’ll be redirected to that brand's page which has a brand image and description followed by some of their most popular products.

Below the best sellers, we see the product categories offered by that particular brand, again accompanied by relevant images.

Brand Subcategories

Selecting one of these, we are then redirected to the brand-specific page for that category, with its owner hero image and description.

Following this, and similar to the previous page, we see a grid layout containing the brand-specific subcategories, each represented by an appropriate image with the name below.

Category Page

Finally, after thoughtfully guiding the user towards the exact products they are looking for, we reach the PLP.

While a fairly standard PLP in terms of layout, on closer inspection we notice that the add to cart option pops up when hovering over a product, and that items are clearly labeled as ‘in stock' below the price.

Product Page

Similar to the PLP, the PDP follows a typical format, with one interesting addition - they included the exact stock level below the price. Perhaps it improves conversion rates?

Product information and key features (i.e., product attributes) are hidden within dropdowns on mobile, whereas on desktop they are displayed in their entirety side-by-side.

On both mobile and desktop, the added to cart button sticks to the bottom of the page.

Cart

When a product is added to cart, there is an immediate popup to verify this action, with some suggested products.

Viewing the cart, we again see some suggested products, as well as a clearly highlighted message notifying the user that they qualify for free delivery.

Besides that, that cart follows a conventional structure that has a minimal hindrance to the shopping experience thanks to the user-friendly, popup UI.

However, within the conventional layout, they also chose to add payment method icons, more information about promo codes and delivery, and some details to contact customer service.

‍

Checkout

This checkout does everything right; it’s friendly on the eyes, free from distraction, and the clearly displayed 3-step progress bar tells the user what to expect next - surprises are never a good thing on checkout (unless it’s a free gift).

{{blog-card}}

Summary & suggestions

David Shuttle is a very interesting example of a multi-brand ecommerce website because it is deceivingly simple. The layout of the individual elements on all pages is essentially the default configuration of an existing storefront template.

However, besides the branding, colors, and fonts, it's the finer details that separate this website from the rest, such as those we saw on the product listing, product pages, in the cart and checkout, etc.

While all of these little features individually may seem insignificant, when they are all mounted together on top of a standard design layout, the end result is a rich user experience that inspires customers to keep browsing and make a purchase.

But is there anything that could be improved? Certainly! There is no such thing as a perfect website. Improvements could always be made, but there needs to be a point where you ask yourself if it's worth the hassle to add new features or design elements if you're not sure it will significantly affect the bottom line.

One possible improvement for David Shuttle (despite what we mentioned above) would be to update the design of various pages, specifically the category listing, brand listing, and brand pages. 

Perhaps a refined page design that is more aligned with the luxury items that they offer would encourage users to browse longer due to greater intrigue in the pages they're viewing. It could also improve the rate of user return if the experience is memorable enough.

"Perhaps" and "could" are the keywords here - unless your idea is backed by evidence (i.e., data), it is only speculation and so should be considered carefully before asking anything of the developers.

UX deliverables guidelines

When it's time to upgrade your storefront design by using a more custom solution, here a few things to consider to help streamline the process:

• All layouts should be designed mobile-first, desktop-second (but you will need both)
• Using pre-made components shortens the implementation time
• Layouts should be presented following the user journey in an orderly fashion
• All actions and menu or navigation states should be included
• All brand or icon assets should be in SVG format 
• UX design hand-over using Figma.com or a similar service is recommended
• UX questions & answers sessions should be included
• Follow up adjustments or corrections should be anticipated

{{blog-card}}