Overview

Marks and Spencers wanted a complete revamp of its online presence, in a move designed to help increase its overal e-commerce revenues as well as taking its first steps towards transforming itself ‘from a traditional British retailer into an international, multichannel retailer’.

I was involved in a small team of designers to crafted a cohesive omni-channel journey, ensuring a harmonious and interconnected experience across every interaction point. As Design Manager I worked on both the user expereince and the overal visual direction of the Ul from initial concept through to final delivery. Other responsibilities involved creating and maintaining our Ul component library used across the team to ensure visual consistancy throughout.

Making things shoppable

We wanted the users to feel everything was accessible and that they could shop on any level of the site. Shoppable videos, hero imagery and even the editorial items were shoppable. In terms of making content more inspirational we wanted to show users how easy it was to wear and create looks. We introduced shopping by outfits – making trends accessible whatever your fashion style or age, whilst allowing those open to it to catch up on the latest trends and ways to wear them on a daily style edit curated by the M&S stylists.

Fresh content

We assessed and art directed the way they shot and represented not only their product photography but also their editorial style. Introducing the Stylist meant we could create a site full of a constant flow of fresh content, utilising Instagram, Twitter and Facebook.

User feedback improvements

We successfully incorporated a range of user-feedback insights into the new design. These included a range of functional updates such as improving the quality of search returns, to more strategic developments such as a stronger focus on editorial fashion and lifestyle guidance. Accessibility issues were also addressed making sure that sufficient colour contrast levels were maintained across all of our components.

Browsing and shopping

Throughout the redesign we put the customer at the heart of everything we did so that the new site reflected how they wanted to browse and shop. A strong focus was put on editorial content to help engage and inspire customers. We used bigger, bolder and better-style imagery and we aimed to inspire and help our customers with a clear style point of view and compelling editorial content that refreshed on a daily basis. Product shots were made 50 per cent larger and catwalk and 360° video features were also introduced.

The overall design of the interface was kept clean and minimalistic to help showcase the product and give the content room to breath. The core M&S green colour was used as a key highlight colour throughout to help draw attention to key content and to help guide the user through the purchase process. In regards to navigating around the site a new ‘three-tier navigation system was introduced to make it easier for customers to reach content more quickly and easily.

Outcome

The transformation of Marks and Spencer’s online presence has resulted in significant success, aligning with the brand’s shift towards becoming a global, multichannel retailer. Notably, the implementation of a fully shoppable experience, incorporating elements like shoppable videos and dynamic content across social media platforms (Instagram, Twitter, and Facebook), has contributed to an impressive 25% increase in e-commerce revenues.

User feedback played a crucial role, leading to improvements in search quality, editorial focus, and overall accessibility. The shopping experience has been enhanced with larger product shots, catwalk features, and a clean design, making it both visually appealing and user-friendly.

Navigation improvements, such as a three-tier system, have streamlined content access. These user-centric enhancements position Marks and Spencer for continued success in the digital retail landscape, providing a modern and engaging platform for its global audience.