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.
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.
Below the banner, users see a selection of individual promoted products in the form of a carousel, with the percentage discount clearly displayed.
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.
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.
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.
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.
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.
Category Page
While not impressive as the brand-specific pages, the category PLPs also feature a unique hero image and granular filtering options.
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.
Cart
The cart seamlessly pops up (or rather, out on desktop) without interrupting the shopping experience.
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.
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.
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.
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.
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.
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
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.
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.
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.
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, 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.
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.
Static Pages
About
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.
Homepage
The first section of the homepage is a slider containing stunning lifestyle images that serve a purely aesthetic purpose - no links!
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.
This is followed by their best sellers with links to product pages, and some more lifestyle photos to inspire their users.
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.
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.
The product photos change when hovering over them on desktop, and below each product is a customer rating.
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.
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.
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.
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.
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.
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.
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.
Finally, a carousel containing new arrivals and products from a highlighted collection. Notice the add to wishlist feature an each product tile.
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.
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.
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.
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.
Again only on mobile, the add to cart button transitions to the bottom of the screen and follows the user as they scroll down.
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.
Checkout
After logging in, users are greeted by nice, clean, friendly, and distraction-free checkout - the same story as most of our previous examples.
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.
Below this section, however, we see that on desktop there is an additional section that draws attention to select brands/categories.
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.
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.
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.
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.
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.
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?
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}}
