Marks & Spencer —
Rebuilding the design foundations and user interface for a one-stop shop platform for M&S Food and their suppliers.
Marks & Spencer, the British multinational retailer, approached W12 Studios with the ambition of revisiting the existing Trade Supplier Portal to improve communication not only with suppliers but also internally.
This project kicked off 6 months before I joined, so my team at W12 Studios had already defined the vision phase. They did an excellent job collating existing research and data, building a use case library, identifying key personas, and mapping wireframes.
A basic design system was already in place, and an MVP was being built. My role involved redefining the existing design foundations, creating new components, and applying this new user interface to key features within the platform.
Old design foundations and component library
Existing research carried out by my product team at W12 Studios
I worked closely with another designer to lay the foundations for the design system. After he was moved to another project, I took over.
Design foundations
Component library
I worked on several features within the M&S Food Platform. The one below is a tactical solution for forecasting national and local events.
Target audience:
Store Performance Team
Search
Filter
Trade Planning Team
Search
Filter
Data Science & Analytic Team
Create
Update/Edit
Delete
Download
M&S Employee
Search
Filter
Event loader flows
Event loader feature (desktop)
Event loader feature (mobile)
I also designed new interactions using the new components and provided support to the engineering team on UI-related queries.
Product selection interaction
Search and filter interaction
How I contributed:
Visual Design
Brand strategy
Visual identity
UX Design
Research synthesis
Stakeholder interviews
UI Design
Design foundations
Component library
Documentation
Design handoff
Related case studies
BlackRock
Balancing identity and unity: Simplifying the complexities of three distinct brands into a scalable multi-brand design system.
Brand Strategy · UX Research · Design System
McDonald's Monopoly
Levelling up the mobile experience and setting up a scalable component library for the UK’s most successful prize program.
Brand Strategy · Visual Identity · Product Design