Re-inventing Net-A-Porter’s editorial platform with seamlessly integrated shoppability

Since its launch in 2000, Net-A-Porter has remained at the forefront of online luxury retail. Editorial content has - through the channel of “The Edit” released weekly since 2013 - been an essential pillar to the brand offering.

Together with a team of researcher & UX designer, we helped re-imagine the online magazine from the ground up, aiming to attract an extended audience and delivering content daily, across devices.

Role
Product Design Lead
(Visual language, UI & Interaction design)

Client
Net-A-Porter

Keywords
Publishing, E-commerce, Fashion

Visit site

NAP_img1NAP_img1

A holistic user experience
We created an elegant and enjoyable experience, based on a unified design system, giving editors the flexibility to bring content to life, and the users to embark on meaningful reading journeys, everyday.

Both a set of design principles – translating Net-A-Porter’s high standards of luxury and  uniqueness – and  a modular approach, allow to support and foresee scalability for the platform.

NAP_img2NAP_img2
NAP_img3NAP_img3
NAP_img4NAP_img4

A semi curated feed of content 
With a base in reverse chronological order, readers can view newest content first, while editorially strong (manual) and popular pieces of content (automated) can be pinned in fixed location .

Series of stories (as well as products) can also be featured within the black breakers, offering user with distinctive journeys through Porter Digital content, as well as offering editorial opportunities to highlight relevant and current topics.

NAP_img5NAP_img5

A modular tool
We created an atomic design system, bringing consistency throughout the experience and helping build modules that work together no matter how they are ordered.

From an editorial stand point, the multitude of modules and the flexibility they offer allow editors to in turn emphasise the editorial or shopping aspect of a piece, balance written and visual, and utlimately offer unlimited combinations.

NAP_img6NAP_img6

Editorial product cards
With a minimal and spacious design (no price before interaction), this new interactive product card allows readers to collect products without leaving the reading experience.

NAP_img7NAP_img7
NAP_img8NAP_img8

Celebrity content
Published once a week, cover stories are Porter Digital's pride. Featuring models and celebrities in high end photoshoots alongside interviews, they generate high traffic and revenue. 

They have their own distinctive modules and layout, making the most of the high value photographic content, including large and immersive photographic headers and full width image modules.

Those stories also offer an image gallery mode, allowing readers to view the photoshoots in a beautiful and minimal space, reminiscent of the feel of printed fashion magazines.

NAP_img9NAP_img9
NAP_img10NAP_img10

Thread navigation
Cover stories, as well as other evergreen content, can be purposefully re-surfaced and brought back to life through tags and topics, inside collections – or “threads”.

Ultimately, the whole website could be navigated through those threads, giving users relevant journeys through a mix of archived and newly published content.

NAP_img11NAP_img11