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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
They even included a timeline of all the important milestones in the company's history.
{{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}}
