Coco Bay is a curated collection of designer swimwear and beachwear from the United Kingdom. The whole business is based around providing British women (or anyone who likes wearing a bikini) with a platform where they can discover and buy swimwear with intention of reducing the amount of time and effort usually involved in their annual swimwear hunt.
Having dealt with the frustrations of endlessly searching for bikinis and swimsuits on a (at least) a yearly basis, the three founding sisters decided it was time to set up their own mail order beachwear company that could provide sophisticated, well cut beachwear that not only looked great on the model but actually flattered the end-customers.
While the business has been around since 2003, its online presence has only just come into the limelight. Given that, the website design is a perfect example of an MVP that utilizes an existing storefront template.
Let's now take a look at how Coco Bay have made use of an existing template (with minimal customizations) to accommodate their online, multi-brand ecommerce business.
{{blog-card}}
Navigation
On mobile, Coco Bay opted for a swipe-up bottom menu from which users can browse categories, view their cart, and access their accounts.
On desktop, we see a megamenu (surprise, surprise), which they have decided to keep simple for the time being.
Homepage
The first section of the homepage is a slider containing stunning lifestyle images that serve a purely aesthetic purpose - no links!
Just below the navigation bar, there is a three-sectioned bar containing key information about shipping, returns, and sizing advice that is actually part of the header.
Similar to Berlei, the next section of the homepage has various tiles that link to some of the main categories and are, of course, accompanied by more beautiful lifestyle images.
Notice the color saturation of the photos - it certainly compliments the beach and swimwear products that they offer.
This is followed by a CTA to sign up to Coco Bay's newsletter and a carousel of best sellers that links to product pages.
Could the background color of the newsletter signup section be altered to better fit the them of the website?
At the bottom of the page we see an image gallery section intended to inspire their customers. Choosing bikinis isn't as simple as you'd think.
Image gallery sections are often a nice addition to a homepage as they can help to fill out with interesting visual content and they're very easy (and cheap) to implement.
Footer
While there’s not much room for creativity when it comes to designing the footer, Coco Bay decided to include badges of the awards they’ve won as a means to show their authenticity as a business and platform.
Brand Listing Page
Coco Bay hosts several brands on their marketplace, one of which is their own. Besides having all the features of a typical PLP, the top section has brand descriptions and, in some cases, a slider with images to accompany them.
Below is a product listing where the product photos change while hovering over them on desktop, and below each product is a customer rating.
Product Page
If you've seen our other UX articles, you'll recognise this product page layout. Coco Bay chose to keep their product information condensed to one tab, with the addition of a ‘Read Reviews’ tab for those customers who like to see some social proof before making a purchase.
Below the product details, there is a carousel of recommended products. It never hurts to add product recommendations - in fact, it will likely be beneficial as they are proven to improve average items per order and average order value.
Cart
Again, a similar cart UI as we’ve seen in previous examples. It’s best not to diverge too far from convention as an unfamiliar UI can make users uneasy which subsequently cause them to drop off the sales funnel.
While you could invest in a custom cart design, for a smaller business especially, it’s not worth the time, effort, and risk to create something unique over choosing something that is tried and tested.
Checkout
A tidy checkout UI that is free from distraction. The progress tracker at the top lets customers know what to expect next in the checkout process - surprises at this stage are not a good thing (unless it's an automatically applied 50% on the whole order).
The order summary remains on the right-hand side throughout the checkout process, always reminding the user of their authenticity with the three ‘Trusted’, ‘Fast Shipping’, and ‘Free and fast returns’, icons.
{{blog-card}}
Summary & suggestions
Coco Bay is another great example of a multi-brand ecommerce MVP. They've made use of an existing template and kept customization to a minimum while still producing a seamless, trustworthy, and engaging shopping experience.
While the website certainly fulfills its purpose as an MVP, there may come a time when Coco Bay decides they need to enhance the shopping experience in a bid to improve their revenue. There are three things we've identified that could help them do just that.
Firstly, they could consider updating the overall look and feel of the website by introducing a storefront design that better matches their brands and product offering. This could be as simple as changing some text, background, and tile colors, or as complex as a complete restructuring of certain pages (if it makes sense to do so), e.g., the homepage.
Secondly, given that their business is centred around beaches, holidays, and sunshine, they could consider extending their catalog with other product categories by onboarding 3rd party sellers who offer those products. For example, they already list flip flops, sun hats, summer bags, and beach towels, but they don't offer sunglasses or sunscreen.
Lastly, to capitalize on the variety of beach-related categories, they could consider grouping select products together into bundles. A bundle allows a retailer to sell several products together as a fixed, customizable, or semi-customizable group, usually at a price lower than purchasing each product individually.
For example, Coco Bay could offer bundles that include a bikini, a pair of flip flips, sunscreen, and a towel (or any other combination) for a slightly discounted price. This could potentially improve sale by increasing the average order value, and allow them to encourage customers to buy less popular items by pairing them with some of the top sellers.
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}}
