UX Style Icons: 15 of the Best Fashion Retail Websites in the World Right Now
Working in the UX Team for one of the UK’s largest fashion retailers, I spend a lot of time looking at ecommerce websites, representing retailers in the sector. Over the past 3 years or so, I’ve built up a significant knowledge base of fashion retail sites extending across the globe — from exciting, up-and-coming startups, right through to some of the world’s biggest brands.
Listed in no particular order, I’ve handpicked 15 noteworthy examples to share, detailing why I believe they go a long way to delivering a good, if not great, user experience.
At the bottom of the article, you’ll find links to another 15 sites, which I also highly recommend visiting and / or bookmarking for future reference. I would have happily written a detailed analysis about each of these too; however, it would have been an incredibly long article (and I have two kids under the age of two, who are keeping me more than just a little bit busy)!
To quote the great Coco Chanel, “Don’t be like the rest of them, darling!” — and thankfully, these following examples, for the most-part, aren’t cookie-cutter, copycats of other retailers’ websites! There’s some element of uniqueness. So, without further ado…
1. Chubbies Shorts
As the name suggests, Chubbies Shorts, are a retailer of men’s shorts and swim trunks (and more recently, women’s swimwear), founded by four Stanford University classmates.
There are so many great features (I could write a whole post about them!) that amount to an enjoyable shopping experience. The site is brimming with personality and character, most notable in the copy — much like the funky designs of the short shorts they sell!
Whether it be the product names themselves, like “The Whirlpoolios”, with their Saved by the Bell-esque, geometric print, or the randomised, “Add to Bag” success messaging, “Boomshakalaka!”, being one of my favourites — takes me right back to my NBA Jam days!
Both the on-site search function, and the basket, are housed within a side panel, which transitions into view from the right-hand side of the screen. It’s an approach that works very well. There is however a slight issue here, in that on mobile, the panel stretches across approx. 95% of the width of the viewport, meaning you only have a very small margin to dismiss the panel. You can do it by tapping the “Back” CTA, which sits in the top left-hand corner of the panel itself, but it is easy to miss, as I found out, the first few times of trying.
That said, I am nitpicking, and for the most-part, their site is hard to find fault with. It’s clearly been designed with mobile at the forefront of all decision-making — beautifully-basic PLPs and PDPs, reliable on-site search functionality, ample-sized hit areas, and the convenience to buy with both Apple Pay and PayPal, in the checkout process. Oh, and awesome shorts. What’s not to love about it?
2. Myntra
Chances are, you’ve never heard of Flipkart-owned, Myntra, so let me start off by making a very bold statement. As India’s largest online retailer of fashion and lifestyle products, they are the fashion retailer to keep a very close eye on. Aside from having a fantastic website, Myntra are a E-commerce powerhouse — especially, as far as leading the Artificial Intelligence revolution for online shopping. From using trend analysis to determine what products will be popular to help with product sourcing, to predicting how people will shop on their website, which in turn allows models to be built to help with traffic management during key events, like their infamous, 3-day, End Of Reason Sale (EORS). They are a force to be reckoned with — mark my words!
Okay, so let me point out a couple of neat features of their website. First up, product filtering.
The “FIlter By” overlay is accessible from a PLP / Search Results page, and provides a wealth of attributes (e.g. Brand, Colour, Price, Gender, etc.) and filter option values (e.g. Black, White, Red, Blue, Green, etc.) to filter by. What I love about this, is the level of thought that has gone into the design of this overlay.
It’s essentially a two-column layout, with the attributes pinned in the left-hand column, and the filter option values listed in a vertically-scrollable pane, in the right-hand column. Colour filter option values, for example, consist of both a colour swatch, as well as the supporting colour name. No need to guess what colour “Ecru” or “Taupe” is! The “Filter By” overlay looks great, and most importantly, offers a pain-free experience, as far as filter selection and refinement is concerned.
Second positive — a functionally, usable, “Burger Menu”-approach to navigation. Yes, it was a “WTF?!” moment for me too — how can it be possible?! For those not in the know, it’s pretty well-documented across my blog, that I’m not the biggest fan of the so-called, “Burger Menu”. I have my reasons. Check out my other posts!
Even so, Myntra have done a good job of defining their Burger Menu, by establishing a carefully thought-out product taxonomy (that actually makes some element of sense to the user!), helped by a simplistic approach to design, and consistency in the styling of same-level links (departments, product categories, subcategories, etc.) The alphabetical ordering of product category and subcategory links, within each department would have improved scannability of the menu items, but my guess is, the Commercial Team shouted louder than the UX Team, here. It’s normally the case at larger-sized businesses… Internal politics, eh? Meh!
Admittedly, Myntra’s iPhone app is packed full of way more exciting, discoverable features than their website, so be sure to have a ganders at that too.
3. Nordstrom
Nordstrom is my go-to website, when it comes to analysing online stores, which also have a brick-and-mortar presence. The design, usability and functionality offered through their website, has come on leaps and bounds in the last year alone. On the face of it, a large slice of this success, appears to be a result of establishing a great “test and learn” strategy, by Jyoti Shukla and her team, at their Seattle-based HQ.
During recent visits to the mobile-optimised view of their website, I’ve fallen into a “test” sample that has seen Nordstrom experiment with different approaches to the design of their header and navigation menu, as well as to design, styling and functional improvements to their PDPs.
Much like Myntra, I feel Nordstrom excel at delivering what I call, “Beautiful Basics” — the core elements of the website that help fulfill the very basic needs of the user. Again, although they’ve chosen to implement a Burger Menu approach to navigation on the mobile-optimised view of their website, it’s tolerable. It’s not been treated as a dumping ground for c**p that they otherwise couldn’t locate a home for, elsewhere on the website.
The search experience is a good one too. It’s easy to perform a search from wherever you are on the site, and the relevancy of the results, are generally, well, pretty relevant! Filtering and sorting search results, is trouble-free too. Likewise the PDPs offer plentiful information about the product to help convert customers to add to bag, as well as an instore stock checker, which is an absolute must for a brick and mortar retailer!
There are two stand-out features on the PDP that I really like, which are somewhat unique to Nordstrom. The first is the “Shop More Results” feature at the very top of the PDP. If you tap this call-to-action, a horizontal carousel transitions into view, which appears to be a like-for-like representation of the PLP you previously arrived to this PDP from. It’s a great initiative, in the sense of preventing the need to go back and forth between the PLP and the PDP, every time you want to view a different product, from that set of results. It’s not quite the perfect implementation, but it’s a good start!
Secondly, is the, “The Look” feature — Nordstrom’s take on the “Style WIth” / “Shop the Look”-type offering, now a common staple of any fashion retailer’s PDP. The difference with Nordstrom’s approach is the ability to cycle through different looks, which feature the item, represented by the PDP you’re currently viewing. Picture you’re viewing the PDP for a Kate Spade Satchel, for example. On this particular PDP, you can switch between three “looks”, each which feature the satchel.
You can also cycle through up to three different tops, trousers, shoes and accessories (e.g. bracelets, broaches, etc.), as part of that particular look. If you tap one of the items, it brings up a larger image below (on the same PDP), providing more details about the product, and the option to add to bag (with the ability to select colour, size, etc.)
It’s a great upsell initiative — but even more so, because of the unique way in which you can create lots of different combinations as part of a look, thereby catering for different style needs — all from a single PDP. Well done, Nordstrom — this is something which will no doubt prove popular (and increase Average Order Value!)
4. Christian Louboutin
In recent years, luxury fashion retailers have so often been slated by the UX community, for their lack of effort to provide a great experience across their websites, at the expense of conveying luxury. Think, overcomplicated page layouts, complex navigation design, painfully slow page load times, and poor site search functionality (if you can even find the option to search in the first place — I’m looking at you Prada!)
Thankfully, the likes of Christian Louboutin are helping to buck that trend. As far as interaction design goes, this is up there with the best of them! Lots of slick, app-like transitions to be found here — all, without compromising usability.
One of the standout features of this site, is its “Live” on-site search capabilities. Results are returned and refined instantly, as you input each character. No notion of lag, whatsoever.
The only negative here, is the absence of this style of on-site search from mobile. Hopefully, it’s in the backlog for development soon though.
On the PDP, all of their shoe sizes are exposed (rather than being hidden behind a list box), making it easy to distinguish between sizes that are “In Stock” and “Sold Out”. They also offer the ability to opt in to receive an e-mail notification, for when a sold out size, arrives back in stock. The option to check stock availability in a physical boutique, is another great UX enhancement.
Be sure to check out their somewhat unique approach to the breadcrumb design, on the PDP, too.
5. Moda Operandi
Online luxury fashion retailer, Moda Operandi, offer a somewhat unique proposition, allowing members to pre-order ready-to-wear, designer accessories and jewellery, straight from the runway — yep, before they become available in store.
There’s nothing particularly outlandish, or noteworthy here, from a design or functionality perspective. The website serves a purpose, and does so well — most importantly, across both desktop and mobile.
Take the PDP, for example. All of the information you would expect to find here, is available. Size options are exposed as buttons, for ease of selection. There are adequate details about the product itself, as far as composition, colour, fit, etc., are concerned.
Lastly, all PDPs offer True Fit integration, helping users to find their perfect fit, in every style and brand of clothing.
Actually, tell a lie, there is one particular area of the site, that I do want to draw your attention to — the “Sign In / Register” page. At a first glance, it just looks like your bog-standard, Sign In / Register page. But, there’s more to it than meets the eye…
This page consists of two separate tabs — “Register” and “Sign In”. Pretty standard stuff. Well, with the “Register” tab selected, there is a line of text that reads, “Create a Moda Operandi account to check your orders, save your information and keep your favourite products”. Three great reasons to sign up, concisely outlined in a single sentence. You then have three methods to choose from to sign up:
- Registration through Moda Operandi (they ask for a First Name, Surname, E-mail and Password);
- Registration with Amazon; and
- Registration with Facebook
With the Amazon sign up option, there is a supporting line of text that reads, “Sign in with your Amazon account details to use your saved delivery and payment information”. Nice little upsell.
What I like about this approach, is the fact that Moda Operandi aren’t forcing their own method of registration on the user. They’re looking to speed up the sign up process for the user, with the potentially more convenient options of signing up with an Amazon or Facebook account, which their users may already have access to. Not only that, but in the case of the Amazon sign up method, they’re again explaining the benefit of selecting this method.
The Amazon sign up method is such a powerful feature, as all your address data and payment information is already saved, which should in theory, make the process of checking out and completing your order, somewhat of a breeze. There’s also a significant element of trust and security associated with shopping with Amazon, so such a signup method, may not only appeal to existing Amazon aficionados, but also those who may be more averse to signing up for an account with a retailer, they may not have previously heard of.
Smart move guys, or as I hear they say in Latin, bene factum.
6. Ivyrevel
Backed by both PayPal and H&M, Ivyrevel may be one of the new kids on the block, but they’re definitely one to watch for the future. They’re using algorithms and other data insight to design clothing, and offer a product, that their customers actually want.
So what are they doing well at? Innovating.
Their approach to “Quick View” on the PLPs, is not only unique, but it works really well. Rather than surface a modal representing a snapshot of the PDP (as most retailers who offer this functionality do), they actually surface the whole PDP in a sidebar, which slides into view, from the right-hand edge of the viewport (on both desktop and mobile).
In doing so, you don’t really need to ever view the PDP, if you don’t want to. All of your shopping, could in theory, be done from the PLP. That in itself, for me, is a significant “win”.
The constant back and forth between a PLP, and a series of PDPs, is a frustrating user journey, especially on mobile, over a slow connection. Taking the need to visit the PDP out of the question altogether (although it is still available to those, who want to view it), may help mitigate that pain, somewhat.
When you add an item to the shopping bag on mobile, the header colours invert, and a “Added to Bag” notification, surfaces directly beneath. There are many other microinteractions like this, that clearly demonstrate the level of detail that’s gone into the site’s UI design, and the overall “Browse & Shop” experience.
Love the animation on the loading icon too.
7. Gucci
Hands up. Who remembers that awful joint by one hit wonder, American rapper, Kreayshawn? “And we stunting like, Gucci Gucci, Louis Louis, Fendi Fendi, Pradaaaaaaaa…” Errrrr, just me then. Moving swiftly on…
Gucci. Now this site, is different. Again, it won’t be everybody’s cup of tea, but I really like what they’ve done with this. It’s quirky (in a good way), but most importantly, remains usable, offering a no-nonsense approach to shopping.
Department landing pages are stripped back to their bare-bones, providing ease of access to PLPs representing the product categories, in question. The product listings on the PLPs themselves, by default, are each, solely represented by a single product image.
No product title or pricing information is displayed, until you hover over a listing — albeit, this is surfaced upfront on touch-screen devices.
And on the PDP, Gucci have found a way to display the key essentials — size / colour selectors, pricing information, size guide, product information, facility to “Save for Later”, etc. — using the vast amount of space available on the page, sparingly. Oddly, it works.
Of all the fashion retailers, who operate in the premium or luxury sector, Gucci is definitely one of the better implementations.
8. COACH
Previously, pioneers in the leather goods and accessories space, Coach now have a vision to “become the company that defines global modern luxury”. Their responsive website certainly shows promise of achieving that.
On desktop, a strong, black header immediately draws in your attention. Primary department links are clearly-labelled, and plentifully-distributed. The header pins on scroll. On viewing a Product List Page (PLP), the filtering options scroll down down the page with it. It’s no secret that I don’t like “hamburger menus”; however, Coach’s implementation on mobile, is one of the better examples, as far as usability is concerned. Definitely worth a look.
Like with most luxury retailers, high quality product imagery, dominates the PLPs and Product Details Pages (PDPs). All products appear to have been shot against the same grey background, meaning less by way of distraction when scanning down the PLP. It also shows the products in a premium light.
On the mobile-friendly version of the PLPs, the key information representing each listing, is a little too small for me. The product name and price are barely legible. Other key UI elements, like the heart icon, which allows a user to add to a wishlist, and the plus icon, representing the “Quick View” feature, just don’t have a strong enough presence. On desktop, the four-by-four layout does however allow for more products to be displayed in the viewport, at any given time.
I really like the ability to add an item to a wishlist, without being forced to sign up first. I understand the benefit in encouraging signup to share and access your wishlists, cross-device, but so few retailers who have chosen to go down this route, forewarn the user about why they’re being asked to sign up first — a huge barrier to using that functionality. It’s worth adding, that on Coach’s site, when you do view your wishlist, you still have the option to register / sign in to save and share your wishlist. Smart move.
It doesn’t matter whether viewing the PDP on desktop or mobile, there are plenty of opportunities for improvement here — especially, as far as the design of the UI is concerned; spacing, in particular. Likewise, the decision to feature both a “Description” and “Details” section on mobile, may cause some element of confusion.
The header and navigation design are by far the two biggest positives about Coach’s website. The predominant use of black really helps to reinforce that “Premium” appeal.
9. Allbirds
Bought together by their wives (and beer), Kiwi-born, Tim Brown and Joey Zwillinger, created Allbirds through a vision to do things differently — two men after my own heart! They use a sustainable resource, in wool, to create what they believe to be, the “most comfortable shoe imaginable”.
Their responsive site design boasts a lot of parallax scrolling (on desktop, at least), but for the most-part, it’s delivered in a non-gimmicky way.
This is supported by the use of large, high-quality product imagery, blended in and among, much smaller, looping videos, which are a common theme throughout the site.
The header design is clean and pins on scroll, meaning you still have ease of access to key links, such as your basket, and the “Help” section. It also scales down nicely to mobile screen sizes, collapsing into a hamburger menu.
On the desktop of their website, the basket is displayed as a panel, docked to the right-hand side of the viewport — an approach that’s gaining a lot of traction among online, fashion retailers. It’s a great way to surface your bag contents, and order total, without losing context of the page you’re currently viewing. This takes similar shape across mobile, in the form of a full page overlay, meaning you do unfortunately have to dismiss it first, to return to the underlying page.
The product page is beautifully-designed, with lots of great information and mixed media content, about what makes the footwear, so unique.
10. DKNY
DKNY, need no introduction. Their website underwent a huge redesign, only a couple of months back, and I have a lot of praise for the efforts of Marianna Satanas (then, VP of E-Commerce), and her team.
There’s a common theme building among the websites featured in this list, and that’s a growing trend toward the use of larger product imagery. DKNY, are no exception. Their product imagery is huge — especially, when viewing the website on desktop. It certainly helps emphasise the quality, design and composition of their garments.
In contrast, I can’t help but feel that the visual prominence of key, purchase-influencing, product information, like price, and size / colour selection, has been overlooked — on the PDP, especially.
That said, I admire Marianna’s efforts to distance her team from following the “copycat” trend, so often adopted by many other fashion retailers — the “go and copy ASOS”-approach. A testament to ASOS’ own efforts, and resulting successes.
Cue, their takeover-style approach to on-site search. Tapping into the search input box, results in a full page takeover of your viewport, thereby removing all distractions, allowing you to focus on your search efforts. Product listings transition into view, and refine accordingly, with every subsequent keystroke. It’s a really nice implementation that I’ve only witnessed across Zara and Stadium Goods’ websites, previously.
11. Cuyana
Cuyana, is a premium pure play, offering women’s apparel and accessories. At a first glance, there’s nothing particularly special, or stand-out, about the website; however, there are some subtleties in the design, that make it a worthwhile addition to the list.
Firstly, the Pinterest-style approach to the PLP layout. Some may say this is somewhat disruptive, from the perspective of being able to quickly scan products as you scroll down the page. I’d be inclined to agree.
But, I think there is merit in the hybrid approach, Cuyana appear to have adopted, in their efforts to almost blend elements of an editorial / lookbook-style layout, with the more familiar listing elements of the PLP design.
Not only that, they’ve also made a conscious effort to expose available sizes and colours, upfront on the product listings themselves, therefore limiting the need to constantly switch between viewing the PLP, and the PDPs corresponding to those product listings.
On the PDP, the “Share a Hint” function is a subtle touch, allowing a user to do exactly as the name suggests — drop a rather large, unsubtle hint, that they have seen something they like, and would like you to buy it for them! Shame they haven’t thought about the possibility of effortlessly dropping LOTS of hints (essentially, the ability to send / share a wishlist). Then again, for the intended recipient of those hints, it might be for the best!
12. Combatant Gentlemen
As with many of the sites featured in this list, Combatant Gentlemen is another great example of a responsive design, with a premium, yet simplistic approach to the design of the PLPs and PDPs.
These pages are dominated by large, high-quality model shots. Less, is most definitely more here, and the prominence of this focus on the product imagery, hasn’t come at the cost of sacrificing key product information.
When it comes to buying suits, size and fit, can differ considerably from one retailer, to another.
In light of this, it can be extremely difficult to commit to purchasing a suit online. It’s one of those things that many males, would want to try on in person first to find the best-possible fit.
Even so, Combatant Gentlemen have identified, and attempted to alleviate that concern, through their “Fit Guide” and “Fit Tech” functionality. The latter, provides recommendations on size, based on your height, weight, neck size, and a couple of other preference-based questions.
13. 1 Atelier
As a self-declared, “transformational luxury brand”, 1 Atelier sell handcrafted bags (clutch, tote, saddle, satchel, etc.), manufactured in New York City. Their product offering is also completely customisable.
You start by selecting a bag type, and a base material (or you can start with a blank canvas), before customising everything from the straps and lining, to the piping and flaps.
On the desktop view of their website, it’s then a case of picking a feature of the bag, such as the flap. The panel to the right, then allows for selection of a material and colour.
Although, somewhat hidden away at the bottom of the viewport, there are additional options to switch views, from an angled shot, to a front-facing shot.
The concept is great, but the implementation (especially, on desktop) could be vastly improved, with a few minor tweaks to the panel design, and the placement of key CTAs and information, like the price of the bag, for example. The mobile implementation is marginally better.
Nevertheless, a good website to bookmark, purely for its product customisation capabilities.
14. Fendi
Just like Christian Louboutin, Fendi, are another prime example of a high-end fashion retailer, who are proving that the UX of their website, doesn’t need to play second fiddle to maintaining a premium and luxury appearance.
It’s not perfect, but it’s a damn sight better, than most in the sector!
The header design on mobile looks great — meaningful iconography to represent “My Account”, “Search”, etc. (consistent with that used on desktop), and the use of the yellow background, where the burger menu icon features, is a subtle, but clever little touch to draw attention to that area.
Another brilliant on-site search implementation too, not only from a design standpoint, but also in terms of the relevancy of the results both suggested (as you type), and returned (following submission of the search query).
Even something as simple as ensuring consistency in the presentation of the product imagery on the PLPs — which are all shot against the same background (or rather, the background has been removed) — allows you as a user, to focus purely on the outfits / products in question whilst scrolling down the page, thereby reducing the likelihood of other on-site distractions.
I really like their sidebar approach to display of the shopping bag, on mobile too. It enables you to have a quick glance of your bag, without leaving the page you’re currently viewing.
The “Shop by Look” function is an interesting concept on desktop — try going to Kids > Junior Boys > Shop by Look, then tap the yellow bag icon, in the lower right-hand corner of some of the product listings. Definitely plenty room for improvement here though.
15. dunhill
Alfred Dunhill are quintessentially British — a timeless classic, as far as ready-to-wear, custom and bespoke, luxury menswear is concerned.
I’d describe their website as, “Beautifully Basic” — an understated, non-flashy approach to design, but which does a brilliant job of serving the needs of its users, whilst maintaining a high standard of quality that you’d expect from a luxury retailer.
Standout features include their somewhat unique, hamburger-esque, approach to navigation on desktop (although their site is easily navigable on mobile too), and the manner in which they allow for segmentation of search results i.e. “Items” and “Editorial Content”.
Other Notable Mentions
Still hungry for more? Well, here’s another 15 examples of websites belonging to fashion retailers, who know a thing or two about delivering delightful online experiences:
- Spring — www.shopspring.com
- Stadium Goods — www.stadiumgoods.com
- MeUndies — www.meundies.com
- Bonobos — bonobos.com
- Zalando — www.zalando.co.uk
- The Iconic — www.theiconic.com.au
- Everlane — www.everlane.com
- Wool & The Gang — www.woolandthegang.com
- Scotch & Soda — www.scotch-soda.com
- Frank and Oak — www.frankandoak.com
- Wolf & Badger — www.wolfandbadger.com
- Backcountry — www.backcountry.com
- Birdsnest — www.birdsnest.com.au
- Moschino — www.moschino.com
- Proper Cloth — propercloth.com
Great UX Design isn’t just a trend — it’s ALWAYS in fashion! 🤳👕👖👗👠👢
Originally written and published to www.uxchap.com on October 4th 2017, by Joe Pendlebury.
One Last Thing…
If you liked this article, please applaud it 👏 and share it with your friends, work colleagues and followers. Remember, you can clap up to 50 times — it makes a big difference for me in helping to focus my writing on what you guys enjoy reading the most.
You’re also welcome to follow me on Medium, on Twitter, or even connect with me on LinkedIn. Thank you for your support! 😊
