My Role:
Lead Interaction Designer

I lead the interaction and UI design on all Mr Porter digital products across mobile app and desktop

Site Audit

The brand was suffering from a lot of design debt when I joined and at the same time had several key projects in the pipeline. It was clear that a component library would help to speed up the design and development process whilst ironing out some of the existing inconsistency.

The first step was to do an audit of the interface elements. As a newcomer this was a great way to get to know the brand. The variation in the interface it evidenced provided a compelling document to convince stakeholders of the need for a component library to act as a single source of truth.

MRP_Audit
MrP_BagMob-2

Checkout

The first project to launch with the new component library was to be a re-design of the checkout. The new design needed to accommodate a wide variety of notifications in the basket yet still look premium.

See the process behind my design  -›

The first project to launch with the new component library was to be a re-design of the checkout. The new design needed to accommodate a wide variety of notifications in the basket yet still look premium.

See the process behind my design  -›

MrP_BagDT

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

MacBook Pro

The Style Council

As an interview project I was asked to re-design the Mr Porter Style Council — a hand-picked group of men who gave recommendations for hotels, bars, restaurant and shops all over the world alongside style tips on what to wear to them.

As an interview project I was asked to re-design the Mr Porter Style Council — a hand-picked group of men who gave recommendations for hotels, bars, restaurant and shops all over the world alongside style tips on what to wear to them.

As an interview project I was asked to re-design the Mr Porter Style Council — a hand-picked group of men who gave recommendations for hotels, bars, restaurant and shops all over the world alongside style tips on what to wear to them.

The style guide was used as a template for sister brands Net-A-Porter and The Outnet.

Clearer form fields, a persistent basket, and smart defaults meant the checkout process felt much smoother and quicker, whilst meeting best practice design and accessibility guidelines.


The style guide was used as a template for sister brands Net-A-Porter and The Outnet.

Clearer form fields, a persistent basket and smart defaults meant the checkout process felt much smoother and quicker, whilst meeting best practice design and accessibility guidelines.


Abandoned baskets:

-2.8%

Avergae time in checkout:

-37s

View another project

My ProcessProject type

New CoProduct Design & Art Direction

Bloom & WildProduct Design

AttestProduct Design

MR PORTERProduct Design

ASOSProduct Design

On DeckProject type