M&S - Redefining Checkout.

Design strategy, UX/UI

Summary
Design exploration and strategy, redefining the checkout process for Marks & Spencer, for the mobile web.

mands-mobile-comp-trans

Introduction
I was hired by the lovely people at Zone to work on a design exploration, redefining the checkout process for Marks & Spencer, particularly for the mobile web.

Key issues
The current checkout flow was cumbersome, and not optimised for the mobile web user. Users were ordering to the wrong delivery address and there were new delivery options which were adding to a confusion over the best way to make a purchase.

Step 1 - The basics
I went away and researched the very best knowledge around checkout. Google Conversions was a really great resource. I tried to synthesise all this into a deck called 'Checkout Intelligence'. The purpose of this was to frame where we needed to be. Am not a fan of competitior analysis, all you are really looking at is what those companies did 18 months ago. If you want to lead then you need to be bold and look at the overarching principles and best practices, not what your competitors are doing

Step 2 - Experience Principles
Is important to frame what your experience needs to align to, your core values and what you simply want to achieve. This necessitates a simple 1-2 day workshop with your stakeholders, the output being a solid set of experience principles that help steer you in the right direction, as well as help you to filter out ideas and processes that dont align.

experienceprinciples-1
  • 5- 10 short statements
  • Tangible & actionable 'GOALS' - They tell us what we can expect and then deliver
  • Customer-focussed (but consider business needs)
  • Ensure consistency: cross-platform & cross-product
  • Guide design/prioritisation: Allow designers, product owners and other stakeholders to review against the same agreed criteria (copy, UI, visual design, development)
  • Prevent feature creep & superfluous steps, paring the interaction to its bare minimum, stripping away any barriers to the customer's goal.

Step 3 - Design
I tend to design around simple principles, simplicity, familiarity, intuitive and accessible to all. I added to this the following insights:

  • We have a limited capacity for cognitive processing so we need to lower mental effort on mobile to optimize conversions.
  • Visual clarity helps processing. If an interface is easy to understand, people are more likely to experience pleasure with it. This leads to higher purchasing intent & repeat experiences.

  • Reduce effort required to purchase something. Single step checkouts: lower effort for each step. All information in one step can be overwhelming. Reduce the number of actions required to achieve the goal; split process into single steps; manage visual presentation by visually grouping elements, 

  • Make it easier for people to make decisions using ratings and social proof.

  • Content that is easy to process (high in cognitive fluency) is usually perceived as more trustworthy than that which is less fluent
  • Because familiarity enables easy mental processing, it feels fluent. So people often equate the feeling of fluency with familiarity.

  • When we see/hear a statement repeatedly, we tend to rate it as more likely to be true (Regardless of whether we remember having seen it before)

  • Less features, more problem solving
  • Stop copying your competitors

Step 4 - Delivery
Most of the work was presented as principles and design theory to inform the wider team and the new design system and its pattern library.