Role: Lead Product Designer
Links: Net-A-Porter
Mr Porter
YOOX Net-A-Porter is a global fashion e-commerce that serves more than 180 countries worldwide.
DESIGN CHALLENGE
In the last years, Yoox Net-A-Porter experienced a lot of growth. This rapid change urged the need of aligning and bringing together different teams working across brands (Net-A-Porter, Mr Porter, YOOX, The Outnet, and many online flagship stores) and based in different countries.
When I joined YNAP, the design team had to face the challenge of rethinking ways of working to improve cross-team collaboration and help the business shipping products quickly to the market. Lack of style guides and documentation raised the urging of creating a unified visual system that was elegant, providing a luxurious commercial and editorial experience. Not only, but this design system also had to be the best in class eCommerce experience, built with scalable and reusable components that could be repurposed for different brands.
ATOMIC DESIGN
Using Brad Frost Atomic Design principles, we ran an extensive audit across brands (mainly Net-A-Porter and Mr Porter) and platforms to identify inconsistencies. We started from the big ecosystem, diving into pages to reach the more granular level of organisms, molecules, and atoms.
AUDIT
During the audit, we noticed lots of inconsistencies across platforms and devices. Different variations of the same components which created ultimately frustration on customers' experience.
There was no grid system in place, or scalable typography, unified iconography, different fonts, limited color palette, different image aspect ration with no art direction.
THE SOLUTION: HIVE
A live breathing Design System, shared styles, components, and patterns.
A single source of truth that is flexible, maintainable, stable, scalable, and successful in the long-term.
HIVE PRINCIPLES
We defined design principles to make sure we produced the best in class product, easy-to-use, and pleasurable. A guide to provide our users with a luxurious and effortless experience.
THE TOOLKIT
We created a toolkit, which groups together essentials and components, useful for designers and developers to build products consistently, at scale, and in rapid type. Here below you can see some examples.
SCALABLE COMPONENTS
From atoms to pages. A scalable design system, based on reusable components easily amendable for any type of experience and brand aesthetics.
Look at the full design 👉 Net-A-Porter | Mr Porter
Made with 🖤 in a shopping centre