James Smith UX Designer. Back
Interested in working with me? Get in touch

UX / PRODUCT DESIGN

Marks and Spencer (Continued)

How I put style guides into practice, lead architecture, tested low-fedility concepts and discuss a retrospective.


October 2014 - May 2016

Agile UX

Work light, work faster

We employed Agile UX as an update of our agile software methodology to include user research and user experience design methods. The aim being to unify developers and designers in the agile process of product development, whilst building with the aim to measure and validate market fit.

Within this methodology, I stripped deliverables down to their bare components; providing the minimum amount of deliverables necessary to get started on implementation. I favoured short, low-fedility cycles with feedback coming from all members of the team as frequently as possible. The initial investment in design was minimal, often in the form of sketching so that there was no significant cost to a complete change of direction.

Sketches Sketches
Checkout sketches used to validate internally before high-fedility customer testing

Armed with my global and component style guide, I sought to rapidly design site templates. A shared understanding of clearly defined UI styling meant that the development team were able to begin coding off the back of sketches or basic wireframes, which n turn kept us in line with sprint expectations.

PAGES

Templates were all that was required for development to begin. However I also took the time to progress my templates into pages in order to conduct user testing and stakeholder sign-off.

USING SKETCH

Sketch is an incredible tool when working with the Atomic Design methodology because of how easy it is to make things modular. Not only do you have great organization with layers, you can easily make modular elemtents called Symbols. Creating a symbol allows you to change all of the styles on one element and watch those changes occur to all similar elements, across your file.

Sketch Zeplin
Sketch & Zeplin for design hand-off

USING ZEPLIN

Exporting more detailed designs from Sketch directly into Zeplin, massively reduced my design-hand off time, and notified the team when updates were made. This was to be used by the developers alongside the dynamic style guide.

CUSTOMER TESTING

I built upon legacy research and quantitative data sources to fuel design, prototyped using Sketch and Invision, and then presented my designs to current customers and potential customers that matched our key customer segment selection criterea. I encouraged both business stakeholders, designers and developers to attend these sessions in order to establish a shared vision of the customer and potential pain points they experiened with the product to date.

User testing User testing
Customer testing session with an Australian M&S customer currently living in the UK

Design

Building navigation

Our navigation should primarily help customers find product categories quickly and easily with minimal struggle. Responsive design added an extra layer of complexity when considering smallest desktop screens, as the reudction in width put a constraint on the number of parent cateogory labels available. However, legacy testing has proven that the deeper product category labels was nested in tiered navigation, the less interaction they had which in turn damaged conversion . This forced us to prioritise, and limit the trading team on what could we displayed as P1 labeling. We temporarily maintained fly out mobile menu for launch until it could be properly tested with A/B variants.

Navigation Navigation
Desktop navigation on hover

Turning browsers into buyers

Providing structure and guidance

When an M&S customer walks into a brick and mortar store, she is presented with a very specific and curated experience. All five senses come into play as she browses. It is this curation and guidance that we aimed to provide online as well. From landing on a homepage to clicking “Add to basket”, there are a number of decisions that digital shoppers need to make as they navigate through a site on their path to purchasing, but these decision points also present an opportunity to turn browsers into all-important buyers.

Home page
Department landing page

Goal: inspire me

Style & Living

Style & Living is an attempt to bring this currated experience online, featuring editorial from fashion journalists, celebrities and guest editors. As an aspirational British brand, M&S has a perspective which emenates from its values. This is shown in its topics of authority; quality, craftmenship, service and innovation.

Charting content

In order for me to understand where and how to speak our values, I had to understand how our audience connects with our communications. Their journey through our touchpoints can be linear or fractured. These different junctures present an opportunity to connect through the content we produce, whilst fulfilling demands for practical and emotional fulfilment.

communicate with purpose

Providing aspiration comes through having a solid perspective, on what we say and who we say it to. Style & Living was aligned to our customers needs, both in life context, what they expect from us and in context of where they are within a particular shopping journey inside the site.

Editorial hub and Top 10 template

GOAL: PRODUCT RESEARCH AND SELECTION

Product pages that convert

The fundamental purpose of the product description page is to provide the visitor with all the information they need in order to make a purchase decision. By leveraging legacy A/B testing results and holding remote/in-house customer testing sessions we identified additional characteristics that helped to define what a high converting product page looked like.

  • Detailed product imagery
  • Delivery information
  • Fast page loading speed
  • Detailed customer reviews
  • Clear stock availability
  • Bold, big CTA’s
  • Simple size and colour selection

All of which combined helped to satisfy buying motivations, answer questions to build confidence and make the desired ‘Add to basket’ action simple and obvious.

Product pages
Checkout

goal: PRODUCT PURCHASE

Mobile first checkout

Increasing numbers of M&S customers around the world were turning to their smartphones and tablets to research products, browse content and inspiration, and purchase. However a considerable disparity existed in conversion between our dedicated mobile sites and desktop. In Ireland, our highest grossing market outside of the UK, checkout conversion from basket to order completion page averaged at 28.3% (-31.2% vs UK) in November 2015, in comparison to a desktop conversion of 55.6% (-23.6% vs UK).

A redesign of the basket to order completion journey would be integrated across all international sites, as well as new to entry markets. We aimed for a more cohesive, trustworthy and effortless cross-device experience, whilst intergrating additional localised payment methods, and PayPal; which existed as a highly favourable payment method in France, Germany and the Netherlands.

In order to achieve this, and increase conversion across all devices (specifically mobile), I needed to investigate and expose potential customer struggles in the existing checkout journey that were causing abandonments and damaging conversion, whilst building upon the strengths of the UK site.

HEURISTIC EVALUATION

Objective: Comparison against accepted usability principles in order to rapidly expose potential customer struggles to be investigated further through research/testing.
Platform: iOS smartphone, Android smartphone, Desktop
Objective: Ireland

CUSTOMER RESEARCH

Objective: To understand the points of friction and identify any conversion killers on the journey from adding an item to bag, to completing checkout.
Objective: iOS smartphone - 25%, Android smartphone - 25%, Tablet 25%, Desktop 25%
Objective: UK, Ireland
Users: 130 - Online account holders and new customers
Method: Task based user interviews directed by Penny Allen, UK Research Lead

TOP CONVERSION KILLERS

  • Unexpected actions
  • Site speed
  • Problems logging in or out
  • Bag item disappearance
  • Issues with keyboard on Android

KEY THEMES FOR SUCCESS

  • Speed
  • No forced registration
  • Security reassurance
  • Descriptive CTA’s (Not simply ‘Continue’)
  • Easy form filling
  • Progress indicators
  • Remove distractions
  • Facilitate repeat purchasing with saved payment methods
  • Clear delivery options
  • Persistent basket
  • Ability to step back without seeing security messages or losing information
Checkout

ARCHITECTURE

Paypal was to be presented to the customer at basket level, rather than at payment only where needless information had been previously entered. Breaking the new user journey into ‘Your details’, ‘Delivery’ and ‘Payment’ ensured that only a manageable amount of information is presented to the customer at each stage, reducing cognitive load, maintaining focus and ultimately ensuring task completion speed.

Once customers had registered their payment and delivery details, we facilitated repeat purchasing through developing a one-page express checkout.

Checkout
Checkout

RETROSPECTIVE

Reflecting on Lean UX and Agile

One of the most challenging aspects of this project was creating enough time in a sprint to allow for design iterations based on customer or stakeholder feedback. The immovable launch deadlines we were tasked with created an intense atomosphere at times, and meant that design was in some part restricted by an engineering-driven process. Sign off milestones were set as a result of engineering estimates and time to create the right design was the time left over.

Integrating UX into an agile sprint framework was a challenge, as it was not always possible or effective to work ahead on the upcoming backlog items whilst supporting the development team and reviewing their output. With extra design resource on-board, I felt the output could have been to a higher standard.

PERFORMANCE

The performance and customer verbatim generated since launching into these territories is a particular highlight, as well as Australia’s performance aganst KPI’s. Australia, our highest trafficked flagship site in January 2016 that was new to market, stood at +6.1% (26/01 - 02/02 all devices) against UK.com for all visits continuing to PDP, suggesting navigation, search and content design are effectively facilitating customer journey progression. Australian PDP (26/01 - 02/02 all devices) is +4.1% in visits vs add to basket, with our addition of size finder tools on PDP converting 12% of all unique customer interactions to validated purchases. Overall AU site conversion from visit to purchase currently stood at -0.2% vs .COM, and +0.22% vs Ireland. This is a fantastic base to build upon given the size of the international development team, and the volume of work we were required to deliver within an ambitious project timeframe.

Physio Focus


A mobile app to help physiotherapists visually communicate injury and exercise information to their clients.

Read more Read more Read more