NET-A-PORTER and Mr Porter
Principal Designer
A new design system for shopping and editorial experiences across the web, iOS and Android.
Creating cohesion and focus for teams by establishing the design system for NET-A-PORTER and Mr Porter. hive consists of a set of principles, styles, components and patterns that enable teams to design at scale with precision.
Services and deliverables
- Design system
- e-commerce platform & experience
- Product and experience strategy
The challenge
As part of the backend migration to a new platform and warehouse operation model, I led my team on the re-design strategy and execution for the web, iOS and Android experiences for both NET-A-PORTER and Mr Porter. There were a few challenges ahead:
- Both the breadth and depth of the product was extensive. From editorial, designer pages, product category pages to checkout.
- The architecture of the software meant that both brands would be sharing code bases. The platform alignment would require that the brands align on specific components and flows. Convincing stakeholders on that choice would require a change in how work was done and shared.
- The team were working in silos, even though the products they all worked on overlapped.
- There was little documentation on the existing experience.
The Audit
An extensive audit of the web, iOS and Android led to the discovery of many visual and UX inconsistencies across and in the platforms, which increased friction throughout the journey.
hive — holistic interaction and visual experience
To succeed with the re-platform, UX patterns, UI toolkits, and style guides were necessary — but also a set of processes and methods that brought the team together and allowed it to grow to what the business needed. A design system was required.
To sell the idea, the below video was created to show a "north star" to excite the team, the stakeholders, and the C-Suite into getting folks behind the idea of hive.
The audit formed the backbone of the proposal on why YNAP needed a system and a unified team. The audit enabled the subsequent phases and changes in-process research, guiding principles, co-creation, objective stakeholder reviews, prototyping and user testing. The final outputs lead to design toolkits, UI libraries, guidelines, documentation and governance models.
The outcome
The re-design of NET-A-PORTER and Mr Porter was the most comprehensive implementation of the hive design system, and while hive defined the visual expression and micro-interaction patterns across both brands and platforms, there was plenty of nuance in the experience to improve.
The experience, while initially a pioneer, had started to lag; years of iteration had led to a fragmented experience. Much of the work was getting the essentials back on track: straightforward, focussed navigation, easy to use filters, large imagery, focused product pages, and a checkout experience that was reassuring and elegant to use.
The future
The design system, “hive” for both NET-A-PORTER and Mr Porter has allowed the team to grow from a handful of designers to a full stack team of 20+ designers, researchers and operations. hive has enabled the team to work on the near future, evolving the core web and app platforms and the far future; what will entertainment and shopping look like next?
View more
Burberry
Cross-platform product and experience design, from the design of burberry.com, where I made mobile e-commerce viable for selling luxury products, to tying garment development with emerging digital opportunities.
66°North
Marrying brand and e-commerce strategy to combine 66ºNorth's rich heritage and their garments' technical capabilities into a new e-commerce proposition, retail experience and visual identity.
