Back
Interested in working with me? Get in touch

UX / PRODUCT DESIGN

Marks and Spencer

How I helped this household name to rapidly expand into new international markets, whilst ensuring the voice and needs of the customer was always considered.


October 2014 - May 2016

M&S

BACKGROUND

M&S Digital

No doubt you'll know the name, but what isn't widely recognised is the degree of change the retailer has experienced in recent years. Maintaining contemporary branding, store digitilisation and embracing the power of technology to improve customer experience has gone hand in hand with a lean start-up phylosophy newly disseminated throughout the 130 year old, traditionally brick and mortar retailer.

With more than 480 wholly owned, jointly-owned or franchised stores in 59 terrirories around the world - the opportunity to work in the inernational branch of M&S was an exciting one.

My Role

Up until May 2016, I lead customer research, testing and digital product design for Marks and Spencer's expansion into new international markets, as well as ensuring the continuous improvement of existing european sites.

The Brief

To create a customer facing e-commerce site that could be fully tested, integrated into existing merchandising architecture and tradable within 8 months inside U.S.A, Canada, Australia and New Zealand. I would then lead the continuous improvement of the product.

Why responsive?

Due to the increasing share of traffic and revenue on mobile and tablet devices in key markets that would eventually be upgraded and moved onto this redeveloped demandware platform, and the widespread adaption in the soon to be tradable countries; a mobile first approach was adopted.

Responsive screens example
Mobile first web design

Mobile is an essential part of the omnichannel/connected customer experience. Customers expect to be able to browse, research, purchase, return and choose delivery options wherever they are and on the device they have to hand; with mobile often being the most convenient. Increased coverage of 4g and bandwidth will only serve to facilitate this.

The advantage of responsive is that the websites core content, features and business logic remains the same across each device, while the presentation layer of the website adopts to increase text size, or change the grid structure for example. This consistency in content elimnated the need for costly upkeep of legacy mobile sites in Ireland and EU, created a more efficient production flow and created consistency in feature expectations from device to device.

WHY A NEW CODEBASE?

Speed, performance and complexity. Our time is so important to us as a customer that it has an actual financial value. Quantitative and qualitative research at M&S Digital showed that page load time directly correlated with sales, and that our customers afforded us with a short window of opportunity to get things done before performance negatively impacted revenue. Given that our aim was to serve site-wide page load at a maximum of 3 seconds, we had to ensure the code base was as light weight as possible, and a ground up re-development successfully ensured this.

The Challenges

.COM DISCONNECT

It quickly became apparent to me upon joining the international product team that there was a disconnect with UK user research, design and optimisation resulting in a wealth of insight and data remaining untapped.

Deadlines

Rollout deadlines into new markets were ambitious given the size of the team (1x UX&Design, 1 product owner, 3 business analysts, 5 developers) which was light in design presence, and the mounting list of story cards and feature requests sitting in the backlog needed immediate priorisation.

Business value

Responsive design would bring its own complexity as an approach. Our existing mobile-specific sites, albeit costly in upkeep, already had a stellar user experience aided by being context specific, so in design I had to be sure confident my work at least maintained present levels of conversion for release to justify business investment.

PERFORMANCE

In order to ensure page load speed and in turn conversion, we needed a bulletproof method to serve content and imagery.

PROCESS CHANGE

Going responsive required an organisational, process and mental shift within the international trading team. Design, production, marketing and development had to be cohesive, and a mobile-first mindset was at times difficult to install.

M&S

DISCOVERY

Who are we building for?

Whenever I start a new project, be it with a new company or an existing one, it is key to determine who you are building for, why and determine what success looks like both in metrics and as an overall vision.

Know my team, engage stakeholders

The most important thing of all was to get to know my team and my stakeholders. Understanding their motives, likes, challenges and how they think would be essential to a smooth product delivery.

I engaged product owners, development leads, business analysts, marketing, head of trading and our site optimisation manager in order to specify my requirements, and understand;

  • What do we expect to accomplish?
  • What are the timelines?
  • What challenges do we expect to face?
  • What do you see as the biggest concerns with regard to the user's existing experience across international sites and UK, and why?
  • What do you think we are doing well?
  • Who are our competitors?
  • What particular metrics and KPI's do you define success by?

Know my users

  • Who am I designing for?
  • What are their goals?
  • What is the customer perception of M&S in new to entry markets?
  • Where do they currently shop online and why?

Personas part 1 Personas part 2
UK GM Key customer profile variants

Data driven personas were initially created based on the active international shopper segments using our UK site, which would deliver to selected areas around the world. I then combined this quantitative insight with market research from our business analysts to then generate a set of hypothesised persona models that we could use to screen for further interviewing and testing by locale.

These anecdotal personas would be iterated upon throughout discovery, and then again post-launch with fresh data.

Why create personas?

They are an essential part of goal-directed design, which we intended to adopt as a framework. Personas also help to create a shared understanding of our customer sets, that would then be shaped into user stories/feature generation.

Contextual interviews

No lab tests or use tasks. At the start of my research I was most concerned with current shopping habits, competitor site usage and the likes and dislikes of the existing M&S experience where appropriate.

Data

I worked inside Omniture with the guidance of our SME Matthias in order to learn all I could about our current performance levels, and where customers were seen to be to be progressing well and not so well in baseline journeys such as PDP > Bag > Order complete. Keeping customer and business goals in mind when analysing this data was important, as not all metrics serve as a useful KPI and can be context specific.

A performance indicator is simply a quantifable measurement or data point used to guage performance relative to some goal. Selecting KPI's begins with clearly stating goals and understanding what areas of the business impact those goals. Make them SMART - Specific, Measurable, Achievable, Realistic.

Important KPI's for me to observe at a top-level were;

  • Conversion rate
  • Key drop-off points, e.g bag & cart abandonment
  • Page views
  • Dwell time
  • Customer service open cases
  • Average order value
  • Social sharing
  • Device share
  • Common site entry points

 

HEURISTIC EVALUATION

Comparing existing sites against accepted usability principles helped me to rapidly expose potential customer struggles that could be investigated further using both quantitative and qualitative methods. It was also the first step for me in benchmarking experience, that I could then mark progression against.

Heuristics
Jakob Nielsen's 10 usability heuristics for interface design

I focused my attention on both the UK cash giant of M&S's digital suite of products, as well as Ireland which maintains the seond highest average flow of traffic and international sales.

LEGACY RESEARCH & TESTING

Establishing regular communication with the larger, more well established, UK research team quickly provided me with a wealth of knowledge from previous studies and customer interviews. This would allow me to better understand existing points of friction and potential conversion killers; insight that would be used to inform my design decisions moving forward.

M&S

THE APPROACH

Good, fast and cheap

In favour of speed to market, we had to be ruthless when planning deliverables and prioritising story requests. Despite our team of business analysts, traders and marketers well thought out assumptions stating that dedicated e-commerce sites in selected countries would generate the justifiable increase in revenue; they remained assumptions.

How MVP is supposed to work
How MVP is expected to work
How MVP works in practice
How MVP works in practice

When building a product, you make assumptions. You assume you know what users are looking for, how the designs should work, what marketing strategy to use, what architecture will work most efficiently etc. Some of your assumpions will be wrong, and the only way to find out is to put your product in front of real customers as quickly as possible.

Eric Ries calls it 'Lean'. Kent Beck and other programmers call it 'Agile'. The fundamental principle for us was to develop the smallest (in complexity and development time) website we could, that could be used to test customer acquisition and revenue growth in new to entry markets.

LOCALISATION

We would not be immediately localising information architecture by locale, but only content and language. After launch we would then test, and gather insight to fuel future localised releases. We had to first ensure the ability to tailor sites by market on the back-end.

Nevertheless, our market research suggested that our customers in Eastern locales such as China and Hong Kong were increasingly behaving like their counterparts in the developed world anyway, whilst retaining some important cultural differences that would influence content. We also had the belief that our heritage and branding should be presented consistently, irrelevant of locale.

OUR PRINCIPLES

Like many agile teams, we used a set of principles to articulate our goals, encourage consistency and help us create an experience that is brand credible.

  • We innovate the customer experience through removing complexity from the shopping journey and using features and technology appriopriately.
  • We design for customer need, efficient task completion and avoid feature duplication
  • We design intuitive interfaces that follow established patterns that our customers immediately understand and feel confident with.
  • We create a premium brand experience.

FEATURE GOAL PRIORITISATION

The combination of a fixed launch date and aggressive scope created an intense environment with many coordination and time challenges. In collaboration with my product owner, development leads and other key stakeholders, features were only created as a result of customer or business goals, and prioritised based on customer usage, business value and complexity estimation.

Adopting a goal-oriented roadmap focused on customer and business benefits ensured that we only built what was really needed, thus avoiding scope increases, maintaining product simplicity and aiding roadmap structure for future releases.

Goals were S.M.A.R.T; Specific, Measurable, Attainable, Realistic and Trackable. The benefit to this approach was that all content and features were made to serve documented user or business goals.Once expectations were universally understood and accepted, I proceeded to move into design.


 
 

Designing a framework

Start with systems, not pages

We have been designing web pages for a long time, but pixel perfection and designing the same experiences for the multitude of devices that exist today is not possible. Instead of page-based designs, we need design systems; and Brad Frost's 'Atomic' methodology has provided a structure to create this.

I was fortunate enough to join M&S Digital at a time when the foundations for a dynamic pattern library was being crafted; the aim being to create consistency and cohesion between multiple product teams. Given that .COM (UK) was some distance away from being able to implement this system, our work in international provided the perfect opportunity to test and simplify refreshed UI, improve accessibility and transition the visual style into the new branding.

STATIC GLOBALS

Lead by Senior UX designer Daniel Braithwaite, we structured it into globals, components and modules. Globals are elements that are found on every single M&S page, and can be seperated into 3 simple areas; Palette, Typography and Grid. Each of these is vital in building any component or module. For typography, we reduced the number of styles and increased the baseline font size to improve accessibility, whilst working closely with Monotype to deliver custom branded fonts as optimised webfonts.

Static globals
 

Static components

Components are heavily influenced by the global style, with small elements being brought together to make a complete component. An example of this could be a button, where the button colour is defined by the colour palette and type style and size also being defined by our typography rules - both of which are found in our Global section.


  Static components Static components

Make it dynamic

The pattern library expresses every component and layout structure in the smallest number of documents. It sets out how the markup and CSS should be, is used to illustrate the product's shared vocabulary and provides a clear way to communicate design intention to engineering teams. Once the globals and components were tested, we were able to scale up our design into code, templates and pages, knowing that all teams use the same naming, values, and assets.

Code sample

The code samples and CSS class usage tables allow for quick application of markup — which also helps new designers and engineers to be on-boarded faster. The systematic UX means designers have repeatable patterns, and thus users will have familiar experiences. Multiple variations of component markup provide best practices for extending and customizing components. In appearance, we aimed for cleaness and clarity; purposefully balancing information density with readibility.

ENCOURAGING PARTICIPATION

As always, good communication helps. Working with the development team to put the documentation into practice was of benefit, as it served to iron out any major inconsistencies before launch. It wasn't practical for me to provide templates for every page, so drafting a style guide and asking for feedback gave me the chance to make sure styles fit together. This collaborative approach can also spark discussions like "how would this work on a smaller screen?"

Continue reading


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

Read more Read more Read more