START A MARKETPLACE within days
Case Study
Jan 31, 2022

David Shuttle - premium jewellery and watches marketplace UX case study

Written by
James Burghes

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.

David Shuttle navigation

Homepage

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

David Shuttle homepage

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.

David Shuttle homepage

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.

David Suttle homepage

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.

David Shuttle homepage

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.

David Shuttle footer

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.

David Shuttle brand listing page

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.

David Shuttle brand page

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.

David Shuttle brand subcategories

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.

David Shuttle brand subcategories

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.

David Shuttle category page

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?

David Shuttle product page

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.

David Shuttle product page

Cart

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

David Shuttle product added to cart

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.

David Shuttle cart

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).

David Shuttle checkout

{{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}}

NOW YOU CAN
Start a multi-vendor marketplace
LEARN MORE
LEARN MORE
Written by
James Burghes
LET'S GO
Start a Marketplace
FREE TRIAL
Get started
NEWSLETTER
Get more marketplace case studies & insights
Subscribe
Subscribe
Check Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Related blog posts

Start a free trial

Start your own marketplacE

Vendo lets you start a multi-brand marketplace, in 14 days or less, with products from amazing domestic brands fulfilling your customers' orders. Let them shop on your website, from a newsletter, social, mobile app.

Join vendo. It's free.