M&S

Coffee Machine

Industry

Food & Drink

Location

London, UK

Year

2017

I partnered with Glasgow-based product design studio Filament and specialty coffee roaster Matthew Algie to help create the M&S self-serve coffee machine. Filament led the physical product design, while I was responsible for the full UX and visual design of the 12-inch touchscreen interface. The goal was to deliver a seamless, high-end ordering experience — allowing customers to choose from a range of drinks, customise them to suit their taste or dietary needs, and walk away with something that felt far above standard vending.

Industry

Food & Drink

Location

London, UK

Year

2017

A 3D render of a Marks & Spencer's "M&S" self-service coffee machine, showing the digital touch screen UI with options for Tea, Coffee, and Chocolate. The design emphasizes a modern, minimalist product design aesthetic.

A smiling person holding a branded M&S takeaway coffee cup on a city street, demonstrating a user's positive interaction with the product in a real-world context.

An M&S Food Hall interior with a prominent illuminated "M&S FOOD" sign, showcasing fresh produce displays. This image provides context for the in-store environment where the coffee machine product is located.

An overhead view of a user's hands holding an M&S takeaway coffee cup with a heart-shaped latte art design, highlighting the delightful user experience and a positive product detail.

The interface needed to feel at home within an M&S retail environment — clean, refined and brand-aligned. I designed a bespoke user interface from scratch, carefully balancing utility with warmth and craft. Every interaction was simplified to reduce friction, while still allowing for choice and customisation. The visual language reflected the M&S brand palette and tone, with clear menu structures and legible touch targets optimised for all users. The result was a calm, confident experience that elevated a typical grab-and-go coffee moment.

A full view of the M&S "Coffee to Go" machine, showcasing the final product design, with the user interface clearly visible on the screen, ready for a customer to interact with.

A screen from the M&S coffee machine UI, showing a user selection step for milk preference. The interface presents simple, illustrated options for "No Milk," "Semi Skimmed," and "Skimmed," demonstrating a clear and intuitive user flow.

A design mockup for the M&S coffee machine UI. The screen is divided to showcase the two main beverage options: "TEA" and "COFFEE," each with a high-quality photo of the drink and a simple call-to-action button.

A multi-screen layout showing the full user flow of the M&S coffee machine UI. The screens illustrate the journey from selecting a drink type (e.g., Cappuccino) to customizing it with milk and bean options, and the visual feedback of the machine preparing the beverage. This highlights the complete user experience design.

Alongside the core UI, I led the creative direction across supporting assets. We designed a custom icon set for drink types and modifiers, ensuring clarity and character throughout the menu. We art-directed a bespoke photography shoot to capture high-quality drink imagery, helping guide users through their selection with visual confidence. Working with a motion designer, we also created custom pour animations that matched the machine’s physical dispensing rhythm - aligning visuals, motion and sound for a seamless, premium-feeling interaction from selection to serve.