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.
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.
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.
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!
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