[vc_row full_width=”stretch_row”][vc_column width=”2/3″][vc_custom_heading text=”Simplifying content to improve conversion rates for Screwfix” font_container=”tag:h2|text_align:left|color:%23000000″ google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]

Screwfix hired me to help them make their e-commerce site responsive, and to inject ‘UX improvements where possible’.

Through user research and careful application of simplification strategies, I was able to help the in-house design team transform the user experience on all devices, and the number of sales completed online continues to increase.

[/vc_column_text][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1552583282329{background-color: #f2f2f2 !important;}”][vc_column width=”2/3″][vc_custom_heading text=”Design for people, not devices” google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]While it is tempting to start with technology and what it can do, a more efficient starting point can be with the reader, and what they need. In this way, content, user journeys and navigation, for example, can be optimised efficiently around user goals.

At Screwfix, I applied research and knowledge from the field of information design to create new page layouts for each of the main pathways through the site, built into low fidelity prototypes for user testing and initial feedback.[/vc_column_text][vc_custom_heading text=”An efficient research strategy” google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]I led multiple rounds of user testing at various stages of the project.

I used a ‘contextual interview’ model. That means interviewing customers, and giving them a prototype or existing web page to focus their attention. It’s a very efficient technique because it generates feedback on specific ideas, while allowing customers to talk about whatever comes into their head.

These sessions were informal, and unscripted to a large degree, but in-depth and probing. The technique feels like a natural conversation for the test participant, but generates a mountain of insight for the observing design team.

The sessions involved iterating on-the-fly, and design ideas frequently evolved from first sketches to nearly-final designs within a day.

It was also a great way to get qualitative insight into people’s lives and how the company, the brand and the product fitted into their lives.[/vc_column_text][vc_single_image image=”1352″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][vc_column_text]Research insights were discussed in ‘hot-debrief’ sessions immediately after each interview, and next-steps or actions scribbled into notebooks.

I did not spend time (and money) creating large amounts of formal research documentation: insights were fed directly into the design process. It felt like a very efficient way to work.[/vc_column_text][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row full_width=”stretch_row”][vc_column width=”2/3″][vc_custom_heading text=”A vocabulary for simplification” google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]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.

The key concepts covered in that paper are useful in explaining the work I did for Screwfix:

  • Deconstruct and reframe
  • Optimise
  • Transform
  • Plain language editing
  • Clear typographic design
  • Omission
  • Distillation
  • Visualisation
  • Learning helps

[/vc_column_text][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row full_width=”stretch_row”][vc_column width=”2/3″][vc_custom_heading text=”Before: the basket page” font_container=”tag:h2|text_align:left|color:%23000000″ google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]The old basket page, while content- and function-rich, was a confusing place. Content and functionality were difficult to find, read and contextualise.

Deconstructing and reframing the page around customer goals led to a different organisation and presentation for it, while preserving all its richness and functionality.[/vc_column_text][vc_single_image image=”1351″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][vc_custom_heading text=”After: the simplified version” google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_single_image image=”1345″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow_border” onclick=”link_image”][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row full_width=”stretch_row”][vc_column width=”2/3″][vc_custom_heading text=”Step 1: Deconstruct and reframe” google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]Analysing the original page into its constituent parts suggested questions like:

  • 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?

In answering these questions, and others, thinking is done on behalf of the user, in advance. It gives them less to think about. It reduces friction, and allows customers to complete their tasks quickly and easily.

Work done at this stage can appear messy and scrappy, frequently looking like mad doodling in a notebook. But it can represent some deep, and critical, thinking.[/vc_column_text][vc_single_image image=”1344″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row full_width=”stretch_row”][vc_column width=”2/3″][vc_custom_heading text=”Step 2: Optimise” google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]Optimisation strategies are ‘hygiene factors: simple basic issues that should be resolved’ (Waller).

Here are some examples of how I optimised content for Screwfix:

Plain language editing

A few 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?

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 any 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.

The changes were summarised with a rationale, and shared with stakeholders and the design team.[/vc_column_text][vc_single_image image=”1347″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row full_width=”stretch_row”][vc_column width=”2/3″][vc_custom_heading text=”Step 3: Transform” google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]Transformation strategies ‘go further, and usually require more effort, negotiation and investment’ (Waller).

Using the same page as an example, ways I transformed content included:


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.


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.


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.

[/vc_column_text][vc_single_image image=”1327″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][vc_single_image image=”1326″ img_size=”medium” add_caption=”yes” alignment=”center”][vc_single_image image=”1349″ img_size=”full” add_caption=”yes” alignment=”center”][vc_custom_heading text=”Step 4: Collate & Communicate” google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]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 process as described here – complicated by the fact that each page impacts, and is impacted by, others.

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.[/vc_column_text][vc_single_image image=”1335″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][vc_single_image image=”1337″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][vc_single_image image=”1343″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][vc_single_image image=”1331″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][vc_single_image image=”1339″ img_size=”medium” add_caption=”yes” alignment=”center” style=”vc_box_shadow” onclick=”link_image”][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1552821699830{background-color: #f2f2f2 !important;}”][vc_column width=”2/3″][vc_custom_heading text=”Conclusion” font_container=”tag:h2|text_align:left|color:%23b22148″ google_fonts=”font_family:Alice%3Aregular|font_style:400%20regular%3A400%3Anormal”][vc_column_text]The new site was well received by customers and stakeholders alike, and e-consultancy gave it a great review too.

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 applying proven principles of simplification can transform not just content, but whole digital services.[/vc_column_text][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row full_width=”stretch_row”][vc_column width=”2/3″][vc_message color=”info”]To arrange an informal chat about how I could simplify your site, please do get in touch.[/vc_message][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row]