Simplifying content to improve conversion

Given the brief to make a large e-commerce site responsive, and to ‘make UX improvements where possible’, I took a content-first approach.

By simplifying the content and tasks around customer goals, and applying information design principles to the way content was displayed, I helped the company improve user experience on all devices, and the number of sales completed online continues to increase.

Designing for people, not devices

My approach was to start finding ways to make the content work well for human reading behaviours.

There is a great deal of existing knowledge and research into how people read that I was able to apply directly to the existing content.

Coupled with research sessions to understand how people used the client’s catalogue and platform specifically, the approach resulted in content presentation and navigation patterns that worked equally well on large or small devices and which felt light and easy to use.

But the start point was the content and the people who used it, not the technology.

Finding ways to make legacy systems work harder on behalf of the user, while simplifying and clarifying the content as you go, gets you a long way along the path of ‘transforming’ your service without needing to tear everything down and start again.

An efficient research strategy

We ran multiple rounds of user testing, at various stages of the project.

I used a ‘contextual interview’ model. In plain language, that means talking to people, but giving them a prototype or existing web page to focus their attention, and asking them to complete a task. It’s a very efficient technique because it provides feedback on specific ideas, while allowing customers to talk about whatever comes into their head.

An experienced interviewer will be able to follow any useful line of thought that emerges. It is a composite of techniques which feels like a natural conversation for the test subject, but which is really a mine of insight for the design team.

The sessions were quite intense, sometimes iterating on the fly and evolving first sketches to nearly final designs within one day.

A high percentage of the value of user testing comes at this stage – exploring the user flow, content, layout and interaction framework while it’s still cheap and easy to make changes.

It was also a great way to get qualitative insight into people’s lives – understanding how, why and when they might interact with the client’s product.

Screenshot from an Axure prototype for testing the new shopping basket page.

Research insights were discussed in ‘hot-debrief’ sessions immediately after the interview, and next-steps or actions scribbled in notebooks.

I did not spend time (and money) creating large amounts of formal research documentation, which felt like a privilege: insights could instead be acted upon immediately, and fed directly into the product.

The evidence of the research was in the built product, not in a load of spreadsheets or a ton of Post-Its.

The UX vision

After an initial assessment, I expressed the UX vision in a simple ‘equation’: “Simplify + Clarify = Convert”.

I wanted to make the point that all the UX work we would be doing would be to improve conversion rates by making things easier for the user.

The UX vision summarised, and placed at the top of the 'Design Wall' in a main corridor.

A vocabulary for simplification

The mental processes involved in making complexity disappear, and in making reading experiences feel light, can be difficult to isolate and describe.

Rob Waller provides one model, in his paper ‘Simplification: what is gained and what it lost’. It’s available on the Simplification Centre’s resources page. I’m going to use Rob’s model to frame some of the work I did at Screwfix.

Although his paper refers mainly to printed documentation, it transfers well to the web. Some key concepts are:

  • Deconstruct and reframe
  • Optimisation
  • Transformation
  • Plain language editing
  • Clear typographic design
  • Omission
  • Distillation
  • Visualisation
  • Learning helps

I give examples of each below.

Before: the basket page

“Many documents are so irredeemably bad that there is no option but to scrap them and start again …” (Waller)

The old ‘Trolley’ page, while content- and function-rich, was a confusing place. Mainly because so much of the content and functionality was difficult to find, read and understand.

Marketing content fought with the key customer tasks. In trying to sell more products, Screwfix inadvertently inhibited buying behaviour, and discouraged people from progressing into the checkout.

Deconstructing and reframing the page around customer goals led to a different organisation and presentation.

Step 1: Deconstruct and reframe

Examples of questions I asked myself at this stage are:

  • Where in the overall flow should the ‘collect’ or ‘deliver’ decision be made?
  • What helps the reader, and what distracts?
  • Which elements are essential, and which are optional or supplementary?
  • Which are for information only, and which demand an action?

Questions like this are effectively thinking on behalf of the customer – giving them less to think about. It reduces friction, while allowing the company to demonstrate that it understands the people it is talking to (its customers).

One sketch of many during the 'deconstruct and reframe' phase.

Step 2: Optimise

According to Waller, optimisation strategies are ‘hygiene factors: simple basic issues that should be resolved’. Using Rob’s definitions, here are some specific examples of ways in which I optimised content:

Plain language editing

A few poorly considered words can throw a user totally off course.

For example, the following option group from the original trolley page

Next Day in Stock | Next Day, More Info

confused people in a few different ways:

  • Is it talking about in-store availability, or availability for delivery?
  • What is the difference between the two options?
  • Why would I click one and not the other?

It created a head-scratching moment for customers, and head-scratching moments increase friction and have a cumulative effect. It doesn’t take too many of them to lose a customer altogether.

Changing the wording to

Available for next-day delivery | Available to collect tomorrow

added slightly to the word count, but made each label unambiguous, and the choices clear.

(This example shows the importance of ‘micro-copy’: in an interface, every word counts.)

Clear typographic design

I organised the page to visually emphasise the basket items: that’s what is most important to the customer. I placed other elements according to the hierarchy of information and functions, related to the customer’s goals and tasks on the page: review items, check prices, confirm fulfilment options, proceed.

Although the page lacks branding and colour at this stage, it is far from undesigned.

The placement of images, headings and labels, and buttons and links all received careful thought and went through several iterations at the sketching and prototyping stage. Relative visual weights were considered and represented with bold or light text, and black or grey shading. This all helped to establish a visual hierarchy that was carefully orchestrated to aid the user’s understanding, and which stood as a style guide for the visual designers.

At the time, I needed to win support for these changes. So I summarised them, and gave reasons, in a single-page summary and put that up on a visible part of wall. I also wanted to demonstrate that UX folk (usually) havee good reasons for doing things.

Sharing a rationale for a new typographic strategy.

Step 3: Transform

Transformation strategies ‘go further, and usually require more effort, negotiation and investment’. Using the same page as an example, ways I transformed content included:

Omission

I took out marketing content at this step because it distracted the user from completing their purchase. I found a better place in the journey to place the same up-sell messages, where customers were still in a ‘add to basket’ mindset. Once at the basket stage, they are beginning a purchase journey which I wanted to keep them focused on.

Distillation

On the original page, did you see the delivery and collection options? I gave them more emphasis, placing them as a summary over the basket contents, as well as displaying inline alongside each item. This was just one of the ways we made Screwfix’s brilliant but complex fulfilment system easier for its customers to take advantage of.

Visualisation

Adding big ‘Deliver’ and ‘Collect’ buttons to each item line made that task more visual and feel easier, while providing an obvious place to surface the various relevant options. Alongside each button, I made space for availability messages, putting that information right where the customer wanted it. It’s another example of how small details, like the placement of text and the right visual language, can make big differences.

Learning helps

A learning help is some kind of tool – interactive or visual – that helps the reader make use of the information you’re giving them. And sometimes good ideas don’t get built, for good reasons – usually to do with time and cost.

In this project, one idea that had to be dropped came out of a chance comment during user testing: “Normally if I want to collect something it’s because I need it all today”.

So I designed a feature that compared the customer’s basket contents with stock, and came back with the nearest store that had all the items in stock.

 

A research note summarising user goals around the 'click and collect' business proposition.
In this snippet from the original page, what are your collection options?
So I designed a way to make choice easier for customers. A ‘Want it all today?’ button shows the nearest store with everything in stock immediately. In research, we discovered that was what most people wanted from 'Click and Collect' - they only wanted to make one journey, and they wanted their items ASAP.

After: a transformed page

Wireframes collate UX thinking, and make it shareable.

For Screwfix I created a wireframe package that covered every page template within the site. Each of those pages went through an optimise-and-transform as described here.

The wireframes allowed any interested party – director, developer, designer – to see at a glance exactly how the new site would appear for people on any device.

The responsive strategy was planned in close consultation with a small team of front-end developers. Together we negotiated what we needed from a UX viewpoint with what was technically possible, and came out with a compromise that works really well for the customer and the business.

Wireframes demonstrated and explained content strategy, layout, interactions and behaviours.

Conclusion

The new site was well received by customers, and e-consultancy gave it a nice review. The changes introduced are still going strong in 2019.

In talking through the changes I made to one page – a snapshot of the total project – I hope I’ve given a flavour of how simplifying content can be an efficient and transformational way to improve a site or app.

To arrange an informal chat about how I could simplify your site, please do get in touch.