Yoox Net-a-Porter

Tasks
Research, UX, UI, User retention

After Yoox acquired Net-a-Porter and its sub brands, there was a major project to migrate them all onto one unified platform. As part of the commerce team, I have worked on re-designing the My Account section, Shopping bag and Checkout journey.

Goal

The objective was to create a unified design journey across all brands and deliver a fully responsive application that provides an intuitive user experience. This involved working closely with business, analytics, delivery logostics, and the development teams in London and Italy.

Old design

Screenshots of two different online shopping cart pages. The left page is from Mr. Porter showing two items in a shopping bag: a green sweatshirt and blue jeans. The right page is from Net-A-Porter displaying two items: a rose-scented candle and a black leather cardholder.

Wireframe

We created a modular block style for each product which allows for responsiveness. We also stress tested for a variety of scenarios including multiple price reductions, shipping restrictions of products across different countries and communicating Out of stock products clearly.

Screenshot of an online shopping cart with multiple product listings, including options for color and size, discounts, and purchase options such as remove or buy.

New designs

It was important to create clear error messaging, with icons and colour to convey the action the user needs to take.

The new Shopping bag was intuitive and responsive, which allows for less friction on smaller screens with clear messaging and interactions.

Sold out items are clearly communicated, removed automatically from the main basket, placed in a section for the user to review. This help the user to focus on completing the journey.

Screenshot of an online shopping cart page from a luxury fashion website, showing selected clothing, shoes, and accessories with their prices and total cost.

Error messaging

Screenshot of an online shopping cart page from NET-A-PORTER featuring two items: a CHLOÉ cotton-twill sweatshirt in blue and a pair of GUCCI Marmont frayed suede loafers in black, with order details and shipping information.
Laptop and smartphone displaying online shopping carts for fashion items, including a sweatshirt, loafers, and a jacket.

Checkout

Challenge

The checkout experience doesn’t reflect YNAP’s luxury brands. The design is dated, it is not intuitive and the mobile design is not responsive which results in many users not completing their purchase.

Goal

Create a unified and fully responsive application checkout experience across all brands, with clear simple steps and feedback messaging.

Old design

Screenshot of an online shopping order summary and payment page for MR PORTER, showing items including sneakers and a sweater, with shipping and billing details, and a mobile payment interface.

  • Not responsive for mobile, the text is shrunk and too small to read

  • Unclear steps on web, there is a stepper at the top and numbered steps down the page

  • No stepper on mobile, so users don’t know how long it will take

  • Check out form is not optimised

Designs concepts

Using the mobile first approach we created a simple 3 step modular process that is responsive.

Comparison of three checkout process screens, showing steps for shipping address, shipping options, and payment details, with check marks indicating completion.
Screenshots of a mobile checkout process for 'Net-A-Porter,' showing steps for entering shipping address, selecting shipping options, and entering payment details.

Final Designs

Laptop and smartphone displaying an online checkout process for a secure purchase, including shipping address, shipping options, and payment details.

Please be aware this page is not linked on the main home page