MandM

Mobile (iOS/Android native app)

Project Overview

MandM are a popular UK retailer that operate in the online space selling branded sportswear items at heavily discounted prices.

Project requirements involved the design and build of a native e-commerce app (iOS and Android) from nothing to release.

My responsibilities

My responsibilities as lead designer involved setting strategic design direction, full stack UI/UX management, mentoring internal designers and planning customer/end user research.

The project also involved the creation and education of a design system as well as extensive stakeholder collaboaration.

Sept 2024 — Apr 2025

Design hypothesis and process

Hypothesis - The design and development of a personalised native app will increase customer visits and build loyalty over longer periods amongst core MandM users.

Working within a full agile dev team of 25, design process within sprints typically involved research to set feature hypothesis, competitor benchmarking, collaborative concept design , prototyping, interviews and testing.

Design problem - Minimal user research

By building personalised app, it is hypothesised that a loyal user base could be built and conversions would increase over time. Upon starting the project, no user persona research existed.

Design problem - No existing native app

MandM sell exclusively through their website so upon starting the project there was no exiting native app, design system or strategic planning behind the design direction of the app.

Design problem - Comoplex product architecture

Existing product catalog architecture on the web was not suitable for app navigation in terms of scalability. A restructure was based around a linear, department lead approach.

Design problem - No existing design system

The strategy of the app build also involved creating and introducing a design system. Various challenges existed here as it involved educating internal stakeholders.

Design overview

Strategy behind the home page involved a modular based design where interchangeable components (banners, editorial cards, recommendation carousels) can work with each other to provide a personalised, value lead visual approach which can we scaled and edited over time whilst still maintaining brand consistamcy.

Home screen

Design overview

The approach of PLP strategy involved a minimal grid display with focus on value and saving. Quick filters and dynamic filter functionality allowed users to refine searches.

Strategy behind PDP was a strong product image lead page, pushing value delivery and saving. Bottom sheets allow the user to see and select available and appropriate sizes.

PLP / PDP

Design approach

Native sign in and account creation had various access points within the app. Browsing as a guest prompted sign in at checkout stage, with bottom sheets allowing the user to complete sign in without interupting their purchace journey.

Design system components were built with error validation states and splash screen strategy involved pushing app benefits for marketing gain via an editorial carousel.

Design approach

Basket functionality included the ability to undo the removal of an item from a basket, guest browsing and sign-in at the point of payment and additional recommendations via a carousel.

Summary and payment CTA's were sticky so users can always proceed forwards without having to find confirmation CTA's amongst a heavily populated basket list.

Basket / checkout

So, why not take a look at my next case study?