How John Lewis & Partners uses Fable to test their website and designs
The high end department store improved the online checkout experience and business outcomes by incorporating Fable into their digital product design process.
This article was originally published by John Lewis & Partners in the Medium post, How we’re using Fable to tell everyone’s story.
Do right: Act with integrity and use our judgement to do the right thing.
This is one of the five core values that was created by, and for, Partners at John Lewis and something we aim to adhere to.
To follow this value in the spirit in which it was formulated, we must consider the rights and wellbeing of others beyond the ambiguous construct of ‘the user’. I believe a deeper understanding of the differences between people leads us to make compassionate choices and ultimately compassionate designs.
With this in mind, it is unsurprising to find out that those who take the message of compassion to heart have the greatest success in providing a service to the broadest spectrum of society.
This however seems to be the exception rather than the rule. It is alarming to hear figures such as “83% of participants with access needs, limit their shopping to sites that they know are accessible”.
Working in e-commerce, hearing statistics such as this hits home particularly hard. Does that include our website? Is a lack of accessibility preventing people from making our website a frequent place of purchase? What barriers are there for our customers? How do we find this out?
We are fortunate to gather these types of insights and begin to provide answers by using a fantastic online platform called Fable. With Fable, we have a tool that empowers us to test and research with users who rely on assistive technology.
This post will explain how we used Fable to evaluate the accessibility of our website with real users, and the learnings that were uncovered.
“Fable is a powerful tool because it allows us to directly engage and test our live website and designs with people that have disabilities.”
Lisa Layton
Experience Designer at John Lewis & Partners
Looking for answers
Testing, learning, empathising and iterating are key parts of our process at John Lewis.
Thanks to the Research, Data and Insight teams, the work here is truly user-centred. We trust in the ethos that qualitative or quantitative data and findings eliminate many assumptions or personal biases, and allow decisions to be made in an evidence-based process.
“The research showed…” is a common phrase you’ll hear or see in a Slack message. This grounding in an evidence and testing-based method flares our curiosity, we lean in a bit closer to find out what the research is telling us. As a team, we strive to know what is or isn’t working and why.
Fable adds voices to the story
The testing platform Fable is a powerful tool because it allows us to directly engage and test our live website and designs with people that have disabilities.
The assistive technology that can be engaged with via Fable ranges from screen readers, screen magnifiers to alternative navigation devices (such as eye gaze technology).
You can dive even deeper, and select which type of software you want to test, for example, you may want to test with screen reader users that are using JAWS as opposed to VoiceOver. The choice is yours on how much you want to customise your test depending on what you would like to get out of it.
Depending on whether it is moderated or unmoderated testing, the end result will produce either a data report with verbatim feedback broken down task by task, combined with a score on who managed to complete the test, or a report with a video that can be cut down into clips and shared.
“To watch someone navigate a website, without looking at a screen nor using a mouse, really puts things into perspective.”
Lisa Layton
Experience Designer at John Lewis & Partners
Everyone has the chance to be heard
Fable connects companies with their own Customer Success Manager, who provides guidance on all things accessibility. When talking to our Success Manager, Felipe, I was wisely advised to take the first couple of months and dedicate myself to learning and absorbing how assistive technology works. With this grounding, it was time to set up a conversation with someone who uses assistive technology and use this as an opportunity to listen, watch, ask questions and understand.
So that is what happened. With what resulted in being one of my favourite learning experiences to date.
Running our first moderated Fable test in Team Checkout
Team Checkout (the product team I’m in) conducted a moderated session in conversation with Ka, an expert screen reader user, who evaluated our journey and gave suggestions and feedback.
The agenda to start the session was clear and we wanted to jump right in. It had already been determined that we were experiencing an accessibility issue, which was flagged from a previous unmoderated test. Using Fable and time with Ka, we were looking to recreate the issue and take guidance on the correct way to fix it. Resolution of these challenges often goes beyond the scope of purely design and our Developer and QA were included in the session for support on any gritty technical questions.
The second part was a conversation, with a focus on observing how screen readers work in practice and applied to our website. There have been several outcomes from this conversation that enlightened me on how to design with accessibility in mind. To watch someone navigate a website, without looking at a screen nor using a mouse, really puts things into perspective.
“Fable opens the door to hear suggestions and feedback from the world’s largest under-represented group, people with disabilities.”
Lisa Layton
Experience Designer at John Lewis & Partners
What we found through Fable testing
1. The screen reader reading pace can be FAST
My primary observation was the high speed at which a screen reader reads the content on the page. Within the session, I began to understand that screen readers are often set to a speed that is significantly quicker than typical spoken language, producing an audio output that is near indecipherable to the untrained ear.
With the screen reader set at this pace, it became evident that understanding how a page is interacted with by those using assistive technology goes beyond purely the software used but the preference and habits of the user. I mentioned the rapid speed of the audio feedback to Ka, who kindly lowered the number of words per minute being spoken, to allow me to follow and observe navigation through the webpage.
2. Content hierarchy and headers are key
As I was able to comprehend how the design was being presented to those using a screen reader, I could fully appreciate the need for clarity in the journey and the importance of hierarchy in designing for those not interpreting it visually.
In addition, it became apparent that there is an ongoing need to ensure that designs incorporate correctly marked-up headers, to allow the screen reader to successfully navigate through the structure of a page. Failure to do so can become a huge pain point where content is hard to find or sometimes missed completely. This video from Microsoft sums it up perfectly: in the absence of way-finding markers and structural logic, the user can easily become lost within a website.
3. ‘Noisy’ components can cause issues
The use of components such as a list of options provides a potential pitfall for those using a screen reader. As became evident throughout our conversation, the inclusion of a list can result in the software reading out fairly long sentences rather than detailing the key and relevant information.
A lack of consideration for these types of components can create a lengthy and ‘noisy’ journey for someone who is having to persist through every line of text being read out. This doesn’t add any further value which wastes time and makes scanning the page laborious.
Upon reflection, I had actively considered the visual clutter when designing, but until then, had not apportioned the same consideration to the clutter of items on a page that could make them ‘noisy’. Things such as this, which are often not considered until investigated with assistive technology, highlight the discrepancies between a visual journey and a poorer experience for screen reader users if they are not considered a contributor to the process.
Applying a new lens to these topics aids in redefining what it means to ‘read’ a web page.
The ongoing story
Just as we do with every test, we adapt based on the findings.
After our session with Ka, tickets were created in Jira to highlight clear problems and details of the fixes. Accompanied by video clips enabled by Fable, we have the ability to refer back to the conversation and analyse the pain points with real-world evidence that highlights where issues occurred at specific points.
Ultimately, if any suggestions require further investigation, we have the ability to conduct further tests on Fable to gather more learnings. One example is a compatibility test, which allows five testers over three different types of assistive technology to complete a series of set tasks, to provide a range of feedback.
All of our thirty strong product teams have access to Fable, it’s not limited to Designers. In fact, it’s encouraged that everyone uses it so it becomes a natural part of the development life cycle. For anything that falls into another team’s area, the findings and tickets are shared on their radar.
With Fable now a part of our collective workflow, many teams have put out tests in the short period we have had access to it. The initial tests always uncover surprises, but I am proud to know that the aforementioned teams have responded and made amendments to overcome any hurdles identified and there have been many positive changes.
Since learning and changing, subsequent tests have proved there’s been a drop in accessibility issues in many different areas of the website. Fable opens the door to hear suggestions and feedback from the world’s largest under-represented group, people with disabilities. With this opening, there is the motivation and the path to travel forwards and provide better experiences for everyone.
As we continue to test, learn and iterate, there’s a great pleasure in knowing this goes back to our Partnership’s core values — we’re doing the right thing.
