Style inspiration & tips

February 2011 July 2011
Mr Porter
Website: Visual Design, UI and Illustrations
After just one year working for Net-A-Porter I became part of the Mr Porter Project team, working on the preparation of the upcoming website launch.

As part of the Mr Porter Project I designed The Journal — the male counterpart of the Net-A-Porter Magazine — and created some of the illustrations for our customer’s account pages.

Once the website launched I focused as well on the optimisation of our newsletter templates.

The Journal homepage - mobile and desktop viewport.

Purpose & functionality (The Journal)

The images below show the primary purpose of The Journal which was, and is, to entice customers to “shop the look”. As well as the Net-A-Porter online magazine, The Journal's aim was (and is) to interest customers in updating their wardrobe with what they read and see in the article.

The most important feature of these pages is in fact the hover (on desktop) and click (tablet and mobile) status of the images captions (highlighted in green in the image below).

In detail:

  • The captions expand displaying the products that Mr Jean-Baptiste Charlet (featured in the article) is wearing in the images.
  • The images and captions link directly to the product detail page. This enable a quick basket addition to the product.
  • Each article serves as a source of inspiration, promoting a specific look to entice our customers to shop that look.
  • The underlying Design System and components were then expanded and refined to cater for any new pages, by supporting a modular layout to facilitate our content editors publication needs.
Overview and details of The Journal's article pages (desktop viewport on the left and mobile viewport on the right).


The following images focus on the illustrations I created for Mr Porter's customer account pages and for some articles featured in The Journal.

Above - hand drawings of the illustrations used in The Journal and the Accounts section of the site.
Above - vectorised images in Adobe Illustrator.


The images below show a couple of Mr Porter's newsletters I had the pleasure to design, my first successful attempts on a responsive template.

A few examples of Mr Porter's newsletters, What's New left and What to Wear right.