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.
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.
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.
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.
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.
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.
Lastly on the homepage, we get a glimpse of some of the products they offer presented in carousel.
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.
Brand Listing
Starlab has five of their own flagship brands, and they make a point of showcasing each one in detail.
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.
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.
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.
Simple but effective - 10 good reasons to use their products!
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.
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.
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.
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.
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.
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.
More product details and images laid out in an interesting fashion.
As seen on the PLP, a section dedicate to their willingness to provide expert customer service.
And, of course, a recommended product section.
Cart
The popup cart is incredibly simple with no obvious defining features besides, perhaps, the 'clear cart' button.
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.
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.
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.
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
Next steps
Feel free to reach out to get a slide deck on:
- What to ask from a UX agency?
- UX deliverables & SoW scope
- Go-live plan for your marketplace
Vendo lets you launch a B2B platform at a fraction of a typical cost and within weeks instead of months. Vendo comes with a built-in storefront that allows you to go live in a matter of days. However, if you require a more custom storefront layout, we'd need your UX input in the form of branding and layout designs. To make it easy for you, we have a customizable storefront template ready for customization and guidelines for your designer. Feel free to review our other UX case studies or contact us to discuss next steps.
