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

Fashion marketplace examples

Written by
Mike Faber

Vendo lets you launch a fashion marketplace at a fraction of a typical cost and within weeks instead of months. But we need your UX input in the form of branding and layout designs. To make it easy for you, we have a storefront template ready for customization and guidelines for your designer. Feel free to review UX case studies below and contact us to discuss next steps.

{{blog-card}}

Below you'll find a walkthrough of hand-picked multi-brand websites providing insights into how top creative and merchandising minds think while using our pre-built storefront template of choice to cut timelines and implementation effort.

The goal of working with an UX agency or a designer is to create an on-brand look & feel for your marketplace which will keep converting visitors into buyers - page by page, visit by visit. Think mobile-first but keep desktop in mind.

Mobile visits accounted for roughly 67% of traffic and 53% of ecommerce sales this past shopping holiday season - according to internetretailing.net and nosto.com BFCM report. On the other hand, 47% of all orders still came from desktop which remains strong during the pandemic and still converts higher.

Here are some areas for consideration when thinking about your marketplace UX:

What to consider:

  • Navigation - Uniform mobile-first navigation for all devices? Or a mobile menu sliding out from the side / bottom and desktop meganav?
  • Homepage - What are your key calls-to-action? What are your top categories? How to mix content and commerce? Imagery convention?
  • Product Listing Page (PLP)How to promote brands or suppliers? How to tell their story? How to add context to the listed products?
  • Product Detail Page (PDP)Why should I add this product to cart? What product photos would be convincing? What additional information? Infographics?
  • Cart and checkout - How to keep distractions to a minimum? At the same time how to remove any doubt or uncertainty? Present assurances?
  • Footer - What would be shortcuts enabling product discovery while building credibility and trust? How to remain in touch?

Take a look at those examples:

Rico Moda

Rico Moda is a high-end, multi-brand fashion store for men's clothes, shoes, and accessories with more than 30 designer brands.

As you’re about to see, this is a great example of a storefront that has customized and refined the standard template to match their target audience, but without significantly changing any of the layouts.

Navigation

On mobile, the menu is accessed by sliding upwards from the bottom, wherein users can browse the brands, collections, and sale items.

On desktop, the top navigation features a mega menu that shows images of highlighted brands when hovering over each category.

Rico Moda ecommerce UX navigation

Homepage

The main banner clearly advertises to both new and returning users that there is a promotion on select brands. This is accompanied by a lifestyle image that compliments the website design.

Rico Moda ecommerce UX homepage

Below the banner, users see a selection of individual promoted products in the form of a carousel, with the percentage discount clearly displayed.

Rico Moda ecommerce UX homepage

Further below, Rico Moda offers outfit inspiration to users in the form of lifestyles images. When clicked on, the user has the ability to add the pictured products directly to the cart - the so-called ‘Shop the Look’ feature. This is followed by a carousel of user-generated content that has the same ‘Shop the Look’ feature. Notice that the image size and format are different which gives variation to the page structure.

Rico Moda ecommerce UX homepage
Rico Moda ecommerce UX homepage

Footer

The footer features some public award badges and customer reviews that help build trust with their users, as well as a link to signup for membership.

Rco Moda ecommerce UX footer

Brand Listing

Each brand page on Rico Moda includes multiple sections that showcase and describe both the products and the brands. When it comes to high-end fashion, the aesthetics of the website, like the products themselves, are of key importance.

At the top of the page, you’ll notice a visually striking, brand-specific hero image along with a short text that tells the brand’s story.

Immediately after is the product listing, with impressively detailed filtering options on the side. Choosing a clothing filter, e.g. jackets, redirects you to another product listing page with jackets from that specific brand and a different, category-and-brand-specific hero image.

Rico Moda ecommerce UX brand listing page

Below the products listing, there are additional sections that go into more detail about the brand’s history, as well as highlight specific products, materials, or manufacturing techniques.

Rico Moda ecommerce UX brand listing age

To top it all off (or rather bottom it all off?), each brand page has a brand-specific FAQ at the bottom of the page to ease any doubts that potential customers may have about the brand’s products.

Rico Moda ecommerce UX Frequently Asked Questions

Category Page

While not impressive as the brand-specific pages, the category PLPs also feature a unique hero image and granular filtering options.

Rico Moda ecommerce UX category page

Product Page

The product detail page is clean and crisp, with a grid layout of product photos making it easy to view the product from different angles without the need to click on anything.

All product information is neatly organized on the right-hand side within dropdowns, there is a size chart for the customers’ reference, an option to contact support, and shipping information.

Rico Moda ecommerce UX product page

Cart

The cart seamlessly pops up (or rather, out on desktop) without interrupting the shopping experience.

Rico Moda ecommerce UX cart

Once the cart is populated, users can edit the contents by clicking the quantity dropdown below each products, and summary at the bottom draws attention to the free delivery.

Checkout

The last step of the customer journey, the checkout should have an official, trustworthy appearance to ensure the user that this is a legitimate business they intend to buy from.

Rica Moda’s checkout certainly does just that and also features a progress tracker so that they know what to expect during the checkout process, as well as a review score on the right-hand side as a sign of authenticity.

Rico Moda ecommerce UX checkout

2. Berlei

An Australian company selling women's underwear for over 100 years.

Navigation

Another website that features a megamenu, Berlei not only allows users to browse by brand, product type, or sale items but also by the industry-specific bra size.

Berlei ecommerce UX navigation

Homepage

In stark contrast to the previous example, we have a website designed with an entirely female target audience in mind. 

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

Berlei ecommerce UX homepage

Next in line, we see a section devoted to specific product ranges that has been thoughtfully designed both in terms of the size and placement of each subsection, as well as the coloring of the images and CTAs within.

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.

Berlei ecommerce UX homepage

Last but not least, we have the Insta Shop section that features shoppable images in a similar (but different) way to our previous example, Rico Moda.

Newsletter Sign Up & Footer

Berlei ecommerce UX footer

Brand Listing Page

Another big difference compared to our last example, the 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 essential 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 desktop PDP, we see neatly arranged images that can be selected to view (as opposed to the previous example).

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, again, pops 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.

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 is more difficult to implement, but requires fewer clicks from the user and can lower checkout drop-off rates.

Berlei ecommerce UX checkout

Static Pages

About

Berlei ecommerce UX about page
berlei ecommerce UX about page

3. Coco Bay

Coco Bay is a curated collection of designer swimwear and beachwear from the United Kingdom.

Navigation

On mobile, Coco Bay also opted for the bottom menu from which users can browse categories, view their cart, and access their accounts.

Another website featuring a megamenu on the desktop, Coco Bay decided to keep it simple. One distinction from our previous examples is the inclusion of an ‘Inspiration’ tab that has links to their blog.

Just below the menu, there is a three-sectioned bar containing key information about shipping, returns, and sizing advice that remains present on all pages the user visits.

Coco Bay ecommerce UX navigation

Homepage

The first section of the homepage is a slider containing stunning lifestyle images that serve a purely aesthetic purpose - no links!

Coco Bay ecommerce UX homepage

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.

Coco Bay ecommerce UX homapeage

This is followed by their best sellers with links to product pages, and some more lifestyle photos to inspire their users.

Coco Bay ecommerce UX homepage
Coco Bay ecommerce UX homepage

Footer

While there’s not much room for creativity when it comes to designing the footer, Coco Bay decided to include badges for the awards they’ve won as a means to display their authenticity as a platform.

Coco Bay ecommerce UX footer

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.

Coco Bay ecommerce UX brand listing page

The product photos change when hovering over them on desktop, and below each product is a customer rating.

Coco Bay ecommerce UX brand listing page

Product Page

Opting for the same desktop image layout as our previous example did, Coco Bay chose to keep their product information condensed to one tab, with the addition of a ‘Read Reviews’ tab for those who require social proof before making a purchase.

Coco Bay ecommerce UX product page
Coco Bay ecommerce UX product page

Cart

Again, a similar cart UI as we’ve seen in previous examples. It’s best not to diverge too far from convention as unfamiliar UI can put users off and subsequently cause them to drop off.

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.

Coco Bay ecommerce UX cart

Checkout

A tidy checkout UI that is free from distraction and also features a progress tracker similar to Rico Moda.

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.

Coco Bay ecommerce UX checkout

4. Foot Korner

Navigation

Foot Korner is an example of a mobile-first website that has the same UI on both mobile and desktop - the elements, for the most part, simply scale and space out depending on the device.

The nav bar features a simple, but effective, hamburger menu that functions the same way regardless of device. Users can shop by product category, brand, and also by the soccer club.

Foot Korner ecommerce UX navigation

Homepage

As we’ve seen before, the main banner of the homepage advertises the current sale and links to a PLP with products included in the sale.

Promotional banners always serve as an effective way to encourage users to take more action on the website, as people are always curious to see what discounts are available, whether they end up purchasing sale items or full-price goods.

Foot Korner also included a promotional video below the sale banner for one of their latest collections.

Foot Korner ecommerce UX homepage

Below we see three different carousels, each with different image styles and formats. 

Firstly, there is a category carousel with lifestyle images that has a nice feature allowing the user to select ‘Man’ or ‘Child’, which updates the presented categories accordingly.

Foot Korner ecommerce UX homepage

This is followed by a more straightforward carousel with brand logos, each linking to a PLP containing that brand's products, and another banner that coincides with the promotional video.

Foot Korner ecommerce UX homepage

Finally, a carousel containing new arrivals and products from a highlighted collection. Notice the add to wishlist feature an each product tile.

Foot Korner ecommerce UX homepage

Footer

The footer is where we see the first big difference between desktop and mobile. The black bar that concisely illustrates their shipping policy, returns policy, secure payments, and customer service completely vanishes on mobile, likely for UI/UX reasons.

Foot Korner ecommerce UX footer

Brand Listing Page

Brand pages on Foot Korner feature a brief description of each brand, with four brand-specific product categories presented just below, which takes the form of a slider on mobile.

Each product tile features user ratings below the image and, on desktop, the image changes whilst hovering over it.

It’s worth pointing out that the sales items both clearly display the discount price and the discount percentage in the form of a sticker on the top left-hand corner of the product photo.

Foot Korner ecommerce UX brand listing page

Another feature to note is the orange ‘sort and filter’ button that brings up a very mobile-friendly UI for users to refine their search.

Foot Korner ecommerce UX brand listing page

Product Page 

On the PDP, there is a noticeable difference in page structure as certain elements get stacked on top of one another instead of being side-by-side.

On mobile, the product images are featured in a slider, whereas on desktop there are tiles to select from.

Again only on mobile, the add to cart button transitions to the bottom of the screen and follows the user as they scroll down.

Foot Korner ecommerce UX product page

Again only on mobile, the add to cart button transitions to the bottom of the screen and follows the user as they scroll down.

Foot Korner ecommerce UX product page

Cart

The same structure as all of our previous examples, but, interestingly, the only cart UI to feature a one-click button to remove an item from the cart.

Foot Korner ecommerce UX cart

Checkout

After logging in, users are greeted by nice, clean, friendly, and distraction-free checkout - the same story as most of our previous examples.

Foot Korner ecommerce UX checkout

5. Special Milano

Special Milano is a fashion marketplace that lists products from a wide range of globally recognized brands, such as Nike, Adidas, Y-3, The North Face, and Reebok, to name a few.

Navigation

On mobile, they chose a user-friendly hamburger menu that is accessed from the top left-hand corner in which the top categories branch into their respective subcategories.

The desktop version features another megamenu that contains images in the drop-down, a highlighted sale category, and a link to their Instagram page via the ‘Sneaker Club’.

Homepage

The homepage doesn’t differ much between mobile and desktop, both including a banner advertising their season sale, followed by two tiles promoting select products.

Special Milano ecommerce UX homepage

Below this section, however, we see that on desktop there is an additional section that draws attention to select brands/categories.

Special Milano ecommerce UX homepage

And, of course, no fashion homepage is complete without showing a selection of products.

In Special Milano’s case, they chose a slightly different format to display their discount percentage and discounted price.

Notice that they also included a desktop feature that blanks out out-of-stock products when hovering over them.

Special Milano ecommerce UX homepage

Footer

There doesn’t appear to be anything special going on in the footer here, but comparing mobile and desktop, you’ll notice that they decided to contain the site links within drop-down menus on mobile as a means to save space and improve the overall look of the website.

Another big feature (which is admittedly easy to miss) is the language selector, found right at the bottom of the page. Fascinatingly, this is the only website on our list that has multi-language capabilities.

Multi-language storefronts provide a much smoother experience than, for example, relying on automated Google translations which take a few moments to appear and often in a very janky manner for each page the user visits.

Special Milano ecommerce UX footer

Product Listing Page

All PLPs, whether brand or category-specific are kept as simple as possible, the only difference being different banner images for some, but not all, brand-specific PLPs.

It’s worth pointing out that in the case of such widely recognized brands, there may not be a need to go the extra mile to present each brand in a unique way, as most people are fully aware of the likes of Nike and Adidas and the quality of their products.

Special Milano ecommerce UX product listing page
Special Milano ecommerce UX product listing page

Product Page

Special Milano follows the same convention as we’ve seen before when it comes to stacking the sections on mobile versus having them side-by-side on desktop. 

One thing that really stands out here though is the total lack of product information. Again, this could be due to the fact that they mostly feature popular, internationally known brands that need no description.

Special Milano ecommerce UX product page

Cart

Just as in real life, there is little to distinguish this cart from the others - it serves a well-defined function and anything that deviates too far from what is commonly accepted may cause users to turn away.

Special Milano ecommerce UX cart

Checkout

While the mobile version seems quite typical as far as forms go, on desktop, everything here is quite literally flipped (when compared to most of our other examples) with the order summary on the left and the form on the right. Is this perhaps an Italian custom?

Special Milano ecommerce UX checkout

UX deliverables guidelines

  • 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
Mike Faber
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.