Style inspiration & tips
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.
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.
Illustrations
The following images focus on the illustrations I created for Mr Porter's customer account pages and for some articles featured in The Journal.
Newsletters
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.
