Vendo gives you full customizability, ownership & CONTRol of your ecommerce
Case Study
Jan 29, 2022

Berlei - lingerie marketplace UX case study

Written by
James Burghes

An Australian company selling women's bras and underwear for over 100 years. Since 1920, the people behind Berlei have developed an obsession with providing the most comfortable, practical, and attractive bra's to women of all shapes, sizes, ages, colors, and activity levels.

Besides its unbridled support of women the world over, Berlei has also dedicated itself to supporting mother earth by reducing the environmental footprint of its offices, factories, and throughout their supply chain.

Let's now take a look at how Berlei decided to design their user experience.

{{blog-card}}

Navigation

On mobile, Berlei features a hamburger-style menu that branches into the various subdivisions of the category tree, whereas on desktop, we see a fairly typical (but attractive) megamenu. In both cases, users can choose to explore by brand, category, sale items, or even by bra size.

One interesting stylistic decision they made was to display only the brand logos when hovering over the 'brands' section of the navigation bar - we think it looks great!

Berlei ecommerce UX navigation

Homepage

If you've seen our Rico Moda UX case study, you'll notice a stark contrast in the theme of Berlei's storefront, as we have a website designed with a female audience in mind. The colors are soft, warm, and very fitting to the company's messaging which helps to create a comfortable, inviting experience for the user.

As is quite popular among home page design, the top features sliding banners with changing messaging and CTAs for the latest promotions, newest collections, and breast cancer awareness.

Berlei ecommerce UX homepage

Following that, we see a section devoted to specific product ranges that has been thoughtfully designed and arranged with each of the subsections having a suitable background color and choice of image. The side-by-side layout is replaced by a column arrangement on mobile, otherwise the subsections would appear far to small.

Berlei ecommerce UX homepage

We then see a grid of their 4 most popular styles, with details of the available sizes for each style. Clicking on one redirects you to a PLP, that lists all the products of that particular style.

Just below that at the very bottom of the homepage, we have the Insta Shop section that features shoppable images. Clicking on one of them opens a popup UI that lists the products in the image and allows the users to click directly to the product pages.

Berlei ecommerce UX homepage

Newsletter Sign Up & Footer

Berlei's footer contains links to all of the important sections of the website and also contains a newsletter signup CTA that includes a 10% discount to encourage users. On mobile, the links are nested to save an space and improve UX.

At the very bottom there's a list of payment method icons that make the website appear more authentic and therefore trustworthy to the users.

Berlei ecommerce UX footer

Brand Page

Brand pages feature minimal brand-specific content, with only a short description on the left-hand side under the filtering options.

One could argue that there is no need to elaborately showcase brands whose products serve a practical purpose, whereas high-end fashion is all about aesthetics (for the most part) and the pages need to be designed as such.

Berlei ecommerce UX brands listing page

Category Page

On desktop, there are essentially no differences between the categories PLP and brand PLP besides the descriptive text on the left-hand side of the page.

Two things to note are the promotional stickers being displayed on each product card (which support the promotional banner as seen on the homepage) and the add to wishlist buttons.

Berlei ecommerce UX category page

Product Page

On the desktop PDP, we see additional product photos neatly arranged to the left of main photo, each of which must be clicked on to enlarge. On mobile, the user must click on the main product photos and swipe to view the others.

Users can select the size, color, and quantity using the friendly UI, and all product information, shipping details, and care instructions are listed on the right.

They also included customer reviews of each product, with a CTA below encouraging users to sign up to their platform to receive free shipping.

Berlei ecommerce UX product page

Underneath the product itself, you’ll find a selection of related products intended to upsell, along with a badge that boldly states information about shipping, returns, and payment options.

Berlei ecommerce UX product page

Cart

On desktop, the shopping cart slides out from the right-hand side without redirecting to a dedicated cart page which allows for a smoother experience if the user wishes to continue shopping. On mobile, it is instead of a fullscreen popup but besides that they layout is almost identical.

The number of products can be easily amended, and there’s an option the clear the cart entirely.

Berlei ecommerce UX cart

Checkout

Berlei has a one-page checkout which, while more difficult to implement, requires fewer clicks from the user and can lower checkout drop-off rates.

Some business decide to opt for a single-page checkout for the aforementioned reason, but one must keep in mind that this alone could significantly increase your frontend development costs.

Berlei ecommerce UX checkout

Static Pages

Berlei, unlike many other ecommerce websites, has an extremely content-rich About Us page. They are clearly very passionate about what they do and how they are doing it, and they made sure to get that message across to their customers by creating a multi-sectioned page with all the relevant information.

Berlei ecommerce UX about page

They even included a timeline of all the important milestones in the company's history.

berlei ecommerce UX about page

{{blog-card}}

Summary & suggestions

Berlei is a fantastic example of company that knows intimately who its target audience is; how to speak to them, how to guide them, how to appeal to them. This is clearly reflected in both the UX design and content presented on the the website.

Of course, one may expect that with over 100 years of experience, any business should have a deep understanding of their customers. While that may be true, not all of them are this successful when it comes to translating this knowledge into the digital world.

There are a lot of things that Berlei does right and you'd have to nitpick to find anything that's objectively wrong, but there is, in fact, something quite standard to the industry that appears to be missing.

Product bundles (or more appropriately in this case - sets) is a feature that seems to be entirely missing from the shopping experience. At present, if a customer would like to buy matching underwear to go with their bra, they'd need to search through an entirely different category tree (with many subcategories/ranges available) to find a complimentary item.

By introducing product bundles that combine matching bras and underwear, it would not only improve the UX, but could potentially improve average number of items per order, and therefore average order value. The average order value could be further increased by offering the bundled items at slightly discounted price compared to buying the items separately.

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
Put a shopping cart in your content
LEARN MORE
LEARN MORE
Written by
James Burghes
LET'S GO
Evaluate Vendo for your eCommerce business
BOOK A DEMO
BOOK A DEMO
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

GET STARTED

BUILD YOUR CUSTOM ECOMMERCE PROJECT with VENDO

Customize to your exact needs. Go global on day 1. DTC x B2B x Marketplace. One or multiple storefronts. A single dashboard to rule them all.