START A MARKETPLACE OR A CREATOR BOUTIQUE
Case Study
Feb 22, 2022

Starlab - B2B laboratory products multi-brand eCommerce UX case study

Written by
James Burghes

Since 1998, Starlab (UK-based) has been delivering high-quality liquid handling and laboratory products worldwide, to enable bright minds to change the world with their solutions.

Their website certainly has a non-standard appearance for an ecommerce platform, but I’m sure we all agree that the products they sell are quite unique among online stores - even when it comes to B2B.

As with most B2B ecommerce websites, the main focus is on the desktop experience, however, it's worth pointing straightaway that Starlab's mobile experience doesn't differ greatly from desktop, as you'll soon see.

{{blog-card}}

Navigation

The navigation bar features a simple dropdown menu that appears when hovering over each item in the list. When hovering over each category in the dropdown, it opens another menu displaying the relevant subcategories.

They also included a country/language selector and put their phone number and hours of operation on the right side of the nav bar.

On mobile, everything is accessed from the navigation bar at the bottom of the screen.

Starlab navigation

Homepage

Of all the examples we’ve looked at in our blog posts, this is the first time we see a homepage that doesn’t feature a banner at the top. Instead, Starlab have taken the opportunity to briefly describe their history and product range, as well as links to 4 of their top categories.

You’ll notice they chose quite an interesting color palette as we scroll down the homepage, although somehow it feels quite suited to the products they are selling.

Starlab homepage

Below, there is section dedicated to one of their pricier products that includes an embedded informative video to help educate potential customers about its features.

Starlab homepage

Next is a slider that highlights some of their flagship products and brands, each presented with a product image that becomes encircled when clicking on or sliding to it using the arrows.

Starlab homepage

The next three sections (only one shown as they are all the same format) give a more detailed description of their company values, culture, and sustainable practices they adhere to.

Starlab homepage

Lastly on the homepage, we get a glimpse of some of the products they offer presented in carousel.

Starlab homepage

Footer

Links to categories, support pages, and about pages, contact emails and phone numbers, and a CTA to register to platform - nothing peculiar here, but it does look particularly neat and tidy.

Starlab footer

Brand Listing

Starlab has five of their own flagship brands, and they make a point of showcasing each one in detail.

Starlab brand listing

Every section follows the same format with a descriptive text that highlights the key selling points of each product line and accompanied somewhat abstract graphical representations.

Starlab brand listing

Brand Page 

Clicking on one of the links from the previous page, the user will be directed to a highly informative brand/product line page.

At the top, we see yet another product description supported by a graphic, immediately followed by two links to a) the product listing and b) to request a certificate of assurance.

Starlab brand page

We then see a section consisting of two elements - one that describes the manufacturing process and quality control, among other things, and the other a product carousel featuring products from this brand.

Starlab brand page

Simple but effective - 10 good reasons to use their products!

Starlab brand page

Similar to one of the above section, but reversed to give some diversity to the page. Although it’s nothing spectacular, such variations in the page can make it all the more engaging to users.

Starlab brand page

Product Listing

The product listing is much more straight to point than the brand pages, offering only a short description of the product category followed by some filtering options.

Starlab product listing

The product cards, while not particularly flashy, have an almost medical/laboratory feel to them which may, in part, be due to the rounded edges and background colour. 

Besides pricing and the add to wishlist button (heart), they include the article number and packaging information. The subtext also mentions that the user should sign in for individual pricing.

Starlab product listing

Scrolling a bit further down the PLP, we see a large element encouraging the user to contact customer service should they need advice. 

Similar to our last example, promoting customer service is definitely beneficial to both the customer and the conversion rate given the specificity of the products on offer.

Starlab product listing

Product Page

At a glance, the product page seems quite different from others we’ve seen before. However, the actual layout is quite familiar - images on the left, brief description in the middle, price and CTA on the right.

Additionally, there is direct download link for the product data sheet under the images, and below the add to cart CTA is the option to request an offer.

Starlab product page

As above, the detailed product information is also presented in quite a non-standard way as a type of slider as opposed to tabs or dropdowns.

Starlab product page

More product details and images laid out in an interesting fashion.

Starlab product page

As seen on the PLP, a section dedicate to their willingness to provide expert customer service.

Starlab product page

And, of course, a recommended product section.

Starlab product page

Cart

The popup cart is incredibly simple with no obvious defining features besides, perhaps, the 'clear cart' button.

Starlab cart

But again, we see the 2 step cart process. This time, there is no proceeding to checkout without registering and entering a valid VAT number.

Starlab cart

Certificates of Assurance

As we seen on one of the brand pages, buyers are able to request certificates of assurance for certain products that certify they were produced in a fully controlled environment and are free from any contaminants.

The user need only enter the article number and lot number to receive they certificate.

Starlab certificate of assurance

Request an Offer

By clicking on the ‘Request an offer’ link on the product page, users can also request a quote for the product they are interested in by filling out a short form, with the article number and product name autofilled.

Starlab request an offer

Summary & Suggestions

Starlab is a fascinating example of a purely B2B ecommerce website with a highly specialized product offering. It's evident that they've chosen to present their brand and sub-brands in unique way, and that they've gone to great effort to provide their customers with many forms of information that describe, explain, and specify their product lines and intended applications.

The lab-reminiscent storefront design coupled with the information-focused presentation seems to be ideally matched to their target buyers; scientists, technicians, researchers, doctors, and anyone else involved in lab work.

While the storefront certainly does a good job of serving new customers who would like to discover Starlab's products, there is something that could be done to improve buying experience for existing customers - a simplified UI that allows customers to search by article numbers and edit quantities and add directly to cart.

This could greatly streamline the buying experience for customers that already know which products they require by removing the need to visit individual product pages. However, this suggestion is speculative as we don't know what measures Starlab has in place to service existing customers (which we are certainly not).

UX deliverables guidelines

When it's time to upgrade your storefront design by using a more custom solution, here a few things 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
Get started
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.