Net-A-Porter (and Mr. Porter) is E-commerce Done Right
I’ll be completely honest here — the vast majority of my online shopping goes through Amazon, which focuses only on the product listing pages and the product offering pages. And that may be why Net-a-Porter and Mr. Porter stand out so much with their rich content as well as products. As a man, I’ll focus on the Mr. Porter experience but it does mirror the Net-a-Porter experience. I will say the only miss during this entire purchase flow is not having SSO integration during the checkout process to facilitate account creation.
Mr Porter’s Landing Page Doesn’t Directly Sell
To the left is a screen stitch of the entire Mr. Porter landing page. The most important thing to note here is that none of these links directly add an item to a cart. Instead, it’s split out by product categories that redirect to product listing pages.
The blue box up top has static ads redirecting to different categories on the website. The first one, “Rain Check”, is highly seasonal and changes depending on when we check in.
The hero banner lives in the green box, and is a rotating carousel of images that point at their “what’s new” page.
The red box doesn’t point at any product listing page, but actually drives traffic to a content hub that has different celebrities talk about their fashion style. While there are links to the products they wear, you cannot directly add a product to cart from this page. The female celebrity on Net-a-Porter is Letitia Wright (Shuri from Black Panther).
The purple box at the bottom is additional categories either grouped by type (shoes, watches) or by collection (Acne Studios).
Finally, the bottom of the page has a widget that is location dependent that tells you if you qualify for different shipping speeds.
The fact that Mr. Porter doesn’t push sales invites you to explore, and doesn’t push sales like a Nordstrom.com would.
Product Listing Navigation is Idiot-Proof
From the landing page, we can easily navigate to any product category page either through the tile ads, or via the navigation bar at the top of the page. Let’s take a look at the watches page which is the last tile ad on the landing page. The red boxes above allow us to easily filter what type of watches we’re looking for (aviation, driving, dress, sports, accessories) while the blue boxes allow us to choose which brands we’re looking at. Having multiple navigation methods makes it easier to quickly sort and filter, and having navigation within the hero image and tile ads right underneath allow for the creative and the functionality to be merged into a single element.
Both the filter selection and the ordering selector (top right) are sticky elements on the page and will follow me as I scroll through the page. Mr. Porter also adds in journalistic elements interspersed within their products listing pages. This allows me to explore and read opinion pieces as I decide which watches I would like to purchase.
The Product Offering Page has Clear CTAs and Detail
Hovering over any photo in the product listing page will show alternative views, while clicking on a link will bring us to the product offering page. On this page, there are multiple views on the left, with “Editors Notes”, “Size & Fit”, and “Technical Specifications” as drop downs under the Add to Bag CTA. The one element that is conspicuously missing on this page is a reviews section (though this could be a conscious design decision for luxury goods).
When selecting the “Add to Bag” CTA, the button will update depending on the remaining stock, and will allow me to move directly to my shopping cart to check out. Alternatively, I can also choose not to click that button and continue shopping.
Final Purchase Flow Allows Guest Checkout, but no SSO
When checking out, I can choose to either create an account or use guest checkout. The guest experience does force me to register an email and fill out a Captcha to prevent bots, but the Captcha is more topical than most. Once registered, it’s a fairly quick form fill, with all the standard fields (Address, Name, Phone, Payment Info, etc). Net-a-Porter and Mr. Porter should look into SSO (with Amazon or Facebook) that can help preload a lot of this information to prevent form fill attrition.
Overall, the Mr Porter experience is quite pleasant. There’s no deluge of ads or timelines giving a false sense of urgency. Content exists side-by-side with product, encouraging me to browse and not just buy. There’s no obvious “continue shopping” prompt when adding items to cart (possibly because each item is so expensive), creating a pressure free environment. For all the success here, it does struggle with a seamless checkout experience that could be improved.
