Inspiration & tips

I led the design of The Journal, shaping Mr Porter’s shoppable editorial identity by weaving storytelling into the shopping experience.

In parallel, I produced bespoke illustrations and responsive newsletters, refining key interactions to lift engagement, improve conversion and minimise drop-off across devices.

Visual Designer: February 2011 — July 2011

Client: Mr Porter

Services: Visual Design — UX — UI and Illustrations

Engagement +25%

Conversion +4.5%

Drop-off rate -5%

Image 1 - The Journal homepage - mobile and desktop viewport.

The challenge

I joined Mr Porter during its pre-launch phase, shaping a new men’s fashion destination that blended editorial inspiration with seamless e-commerce.

I designed launch The Journal, Mr Porter’s shoppable online magazine — and I created its bespoke illustrations as well as those for the customer account pages.

The goal was clear: design a magazine-like experience that inspired customers to update their wardrobe — and make it as easy as possible to purchase what they saw.

Solution (what I designed)

I designed The Journal, Mr Porter’s flagship online magazine, to turn inspiration into action. Large, editorial-style imagery anchored each article, while a subtle interaction pattern made the content shoppable.

When users hovered (on desktop) or tapped (on mobile/tablet) on images, captions expanded to reveal the exact products featured. Clicking those captions took customers directly to product detail pages, allowing for a quick add-to-basket experience without disrupting their reading flow.

This solution bridged storytelling and commerce, and its modular layout allowed the editorial team to easily adapt and create new issues week after week.

Outcome and impact:

Engagement: +25% (users spent more time interacting with editorial content thanks to the shoppable interactions)
Conversion: +4.5% (simplified paths from inspiration to product detail and add-to-basket improved purchase rate)
Drop-off rate: -5% (the seamless, non-disruptive buy flow reduced abandonment during browsing)

The hover / tap interaction pattern and responsive newsletter templates directly supported these improvements by turning inspiration into quick, low-friction purchase actions while maintaining the editorial reading experience.

Image 2 - Overview and details of The Journal's article pages (desktop viewport on the left and mobile viewport on the right).

Custom illustrations

To support Mr Porter’s refined aesthetic, I created hand-drawn illustrations for the customer account pages and for selected articles in The Journal. These illustrations added personality and charm, setting Mr Porter apart from typical e-commerce experiences.

Image 3 - hand drawings of the illustrations used in The Journal and the Accounts section of the site.

Image 4 - vectorised images in Adobe Illustrator.

Newsletters & ongoing optimisation

Following the launch, I designed and optimised Mr Porter’s What’s New and What to Wear newsletter templates. These were my first responsive templates and helped ensure a seamless brand experience across devices — a key step in Mr Porter’s early retention strategy.

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

Final considerations

My role and contribution can be summarised in:

Designing and overseeing the launch of The Journal (shoppable editorial experience)
Creating bespoke hand-drawn illustrations for account pages and selected Journal articles
Designing and optimising responsive newsletter templates (What’s New, What to Wear)
Definining the interaction pattern (hover / tap captions) that connected editorial content to PDPs and quick add-to-basket flows
Working with editorial to create a modular layout for regular issues