post

Footer About

Footer Contribute

Footer Get Involved

Footer Links

Mind the Product

Innovation

Sunday Rewind: Show your true innovative colours by Julia Shalet

Customer

How behavioral economics can improve product strategy

B2B product management

Artificial Intelligence (AI) & Machine Learning (ML)

Building Product Teams

Business Strategy

Data Driven Product Management

Digital Transformation

Diversity and Inclusion

Minimum Viable Product

OKRs

Prioritisation

Product Design

Product Research

Product Development Process

Product Ethics

Product Discovery

Product Leadership

Product Management Career

Product Strategy

Stakeholder Management

🌎 <a href="https://www.mindtheproduct.com/world-product-day/" style="color:#FFFFFF;text-decoration:underline;">Happy World Product Day!</a> Be sure to celebrate product, yourself, and your peers today! 🎉

Join us at #mtpcon London in 2025 – mark your calendars

Connecting fans to creators at Spotify (Dariusz Dziuk, Product Lead, Spotify)

Why teams often struggle with OKRs: A conversation with Jeff Gothelf

Deep dive: Crafting your product vision and mission

5 ways to invent and simplify as an AI/ML product manager

Imogen brings more than 10 years of experience in print and digital to her role as Director of Content Strategy for Mind the Product. The core of her experience comes from 10 years working as an editor for Bauer Consumer Media, a division of Europe’s largest privately-owned publishing group, and as Head of Content for Benivo, an award-winning startup.

Director of Content Strategy

Imogen Schels

<p>Working with a committed and hands-on client, plus a unique group of more than 200 testers, the team at design agency <a href="https://www.williamjoseph.co.uk/" target="_blank" rel="noopener noreferrer">William Joseph</a> created a new site for <a href="https://moorfieldseyecharity.org.uk/" target="_blank" rel="noopener noreferrer">Moorfields Eye Charity</a> where accessibility was key – and they delivered just in the nick of time.</p>
<p>Here, the agency’s UX and Content Strategy Manager Nicola O’Connor and Senior Designer Daniel Cullinan talk us through their process.</p>
<h2>Overview</h2>
<p>At <a href="https://www.williamjoseph.co.uk/" target="_blank" rel="noopener noreferrer">William Joseph</a>, a creative agency in London, our mission is to design products, services, and brands for organisations working for positive change, such as charities and academic and research institutions. In September 2019 we began a new project for <a href="https://moorfieldseyecharity.org.uk/" target="_blank" rel="noopener noreferrer">Moorfields Eye Charity</a> in London, a charity that funds research, education and care to make a difference to the lives of people with sight loss.</p>
<p>The project was to create a new site for the charity, to solve relatively straightforward problems. It wanted the ability to be more flexible with its content and to better meet the needs of its audience who look to donate, fundraise and find information. It had also recently undergone a brand refresh and so wanted this to be reflected on the new site.</p>
<h2>The Approach</h2>
<p>As with all our projects, we began with trying to understand the users, their primary goals, and what content they needed to achieve those goals. We used analytics to understand user behaviour on the existing site and even browsed social media channels to investigate the types of questions people in the audience might have when searching Google or talking to their friends on Facebook.</p>
<p>This process enabled us to create broad user journeys and helped us to learn more about the patients and families that Moorfields supports. We were also able to identify content opportunities that would help to differentiate the new site from other information sources.</p>
<p>We also started to build a new information architecture, considering how we might improve the site for new and existing users while continuing our regular discussions with stakeholders to ensure they knew why we were proposing a different structure.</p>
<figure id="attachment_19832" aria-describedby="caption-attachment-19832" style="width: 601px" class="wp-caption aligncenter"><a href="https://www.mindtheproduct.com/wp-content/uploads/2020/05/8c4fc9fe-476c-4df2-bdec-1a24b57d1bc2_Moorfields20Eyey20Charity20donate20page20before20website20redeisgn.jpg"><img loading="lazy" decoding="async" class="wp-image-19832" src="https://www.mindtheproduct.com/wp-content/uploads/2020/05/8c4fc9fe-476c-4df2-bdec-1a24b57d1bc2_Moorfields20Eyey20Charity20donate20page20before20website20redeisgn.jpg" alt="" width="601" height="687" /></a><figcaption id="caption-attachment-19832" class="wp-caption-text">The team felt the site&#8217;s existing layout could be simplified</figcaption></figure>
<p>We kicked off these conversations with a focus on page templates, encouraging people to be comfortable with new layout features such as single-columns and shorter line length. Initially, new white space in areas that might previously have been packed with content became a talking point. We find that there’s often a desire to fill white space and to stretch content across a screen but we thought it was important to encourage people to think from the small screen up, and to back up these decisions from an accessibility point of view, using feedback from testers as evidence. Fortunately, we had this in abundance!</p>
<h2>Testing</h2>
<p>Moorfields did an amazing job of getting groups of people to test for us. We ended up with more than 200 testers, split into different groups.</p>
<p>Our testers had a range of visual impairments and they used a variety of specific combinations of tools and tech to access digital content. This was very important because when it comes to accessibility, there’s no one size fits all. People get very attached to the tech and the browsers they use, and so, while you might fix things at your end, or for one combination of assistive technology, there will be many more you also need to consider. With that in mind, having so many testers with such a range of needs and technology was extremely helpful.</p>
<p>We did remote card sorts in the first two rounds of testing. The third round involved remote usability testing where we asked our testers to complete a task with very rudimentary information architecture. We asked them to find information, and then tell us where they would go on the site to find it. At this stage, they had no content on the page, just the navigation labels to orientate themselves, which is quite a harsh (but great!) test of the labels. This was followed by two further rounds of in-person testing with our prototype and finally the built site.</p>
<p>Each round of testing received a very good response rate, which meant we could be confident in our recommendations to stakeholders on how the structure of the information architecture, and what content people were looking for.</p>
<p>Tests identified a range of problems, including:</p>
<ul>
<li><span style="font-weight: bold;">General a</span><span style="font-weight: bold;">ccess: </span>Logging in to NHS public wifi was challenging as it didn&#8217;t work with most screen reader technology</li>
<li><span style="font-weight: bold;">Readability:</span> The use of complex language, long sentences and paragraphs make reading more difficult for those with visual impairments</li>
<li><span style="font-weight: bold;">Design: </span>When users read pure black text on white backgrounds for an extended period of time it caused discomfort and eye strain</li>
</ul>
<h3>The Design Process</h3>
<p>The colours and font had already been chosen with accessibility in mind during the charity’s recent rebrand, but, as a standard practice, we rechecked the colours to ensure they&#8217;d be ok, giving special consideration to the site&#8217;s visually impaired users.</p>
<p>We ran a detailed comparison of all the colours in the brand palette to find the best combinations. While WCAG permits a 3 to 1 ratio for text larger than 18 pixels, on this project we were looking to always achieve a minimum of 4.5 to 1 (AAA rating). We also ran the same colour comparisons through colour-blindness simulators for protanopia and deuteranopia (red-green) and tritanopia (yellow-blue).</p>
<figure style="width: 600px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="" src="https://www.mindtheproduct.com/wp-content/uploads/2020/05/e2b4b98b-b528-439d-b869-5c8c30940362_Moorfields_colour-test-1_df2c0d3bb1bc315a530eb3de2cbf821e.jpg" alt="" width="600" height="731" /><figcaption class="wp-caption-text">The team ran a detailed comparison of all the colours in the brand palette</figcaption></figure>
<p>We created a library of bullet points, paragraphs, and pictures that were then applied to an early example page for the client to view, along with some bespoke content so they could get a feel for the elements in context.</p>
<p>From there, we honed in on a couple of template types that would end up doing the heavy lifting for the client &#8211; for example, a typical research project page on a particular eye condition where the call to action would be to donate.</p>
<figure id="attachment_19831" aria-describedby="caption-attachment-19831" style="width: 600px" class="wp-caption aligncenter"><a href="https://www.mindtheproduct.com/wp-content/uploads/2020/05/386b0259-d714-4061-bc23-cc5f45c77e65_Moorfields20Eys20Charity20donate20page20after20website20redesign.jpg"><img loading="lazy" decoding="async" class="wp-image-19831" src="https://www.mindtheproduct.com/wp-content/uploads/2020/05/386b0259-d714-4061-bc23-cc5f45c77e65_Moorfields20Eys20Charity20donate20page20after20website20redesign.jpg" alt="" width="600" height="707" /></a><figcaption id="caption-attachment-19831" class="wp-caption-text">The new donate page</figcaption></figure>
<p>We picked apart existing messaging and then put it back together in a way that showcased all of the design elements. We then created content journeys to test those designs and developed the elements for different templates.</p>
<h2>The Results</h2>
<p>The Moorfields team wanted to enhance its digital presence so that users could more easily interact with the site. This included the ability to make donations, to fundraise, to book events, access information, and to get in touch. They also wanted more flexibility and to be able to update the site regularly.</p>
<figure style="width: 601px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2020/05/c4bf62f1-2d26-4ba5-afe0-40adb733b030_Moorfields_research_page_portrait_2_df2c0d3bb1bc315a530eb3de2cbf821e.jpg" alt="" width="601" height="787" /><figcaption class="wp-caption-text">The updated site has enabled the Moorfields team to update content more easily</figcaption></figure>
<p>We were able to meet accessibility requirements by working with what the Moorfields team already had. And we did it just in the nick of time, finalising work in February, just as the COVID-19 crisis began to build. As a charity that is part of one of the oldest hospitals in the heart of London, the team has since needed to update the site&#8217;s content much more rapidly and to support pandemic efforts through fundraising initiatives like its <a href="https://moorfieldseyecharity.org.uk/support-us/donate/current-appeal">Coronavirus emergency appeal</a>. It was great to be able to finish the work in time for it to be used during such a crucial period.</p>
<h2>Conclusion</h2>
<p>This project was supported so much by the team at Moorfields and the testers who helped us to build the right product. Yes, there were some challenges, such as ensuring code worked properly with screen readers, but ultimately, the work was straightforward and there are elements from this project that our whole team will take on to all future projects.</p>
<p>Building for accessibility is something we always strive to do, it&#8217;s like a call to arms – we should all be doing it. The key is to make it simple. Watching our testers during this project put this into very sharp focus.</p>
<p>So, if you&#8217;re unsure about accessibility or have no idea where to start, think simple. Cut the fluff, and all the stuff that <span style="font-style: italic;">you</span> think is important, and focus on what people need to know. Those are the things that will benefit everybody.</p>
<p><a href="https://www.mindtheproduct.com/digital-accessibility-a-guide-for-product-managers/" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" class="aligncenter wp-image-19922 size-full" src="https://www.mindtheproduct.com/wp-content/uploads/2020/05/Sign-up-for-Mind-the-Product-Membership-.png" alt="Click to sign up for Mind the Product Membership" width="2259" height="360" srcset="https://www.mindtheproduct.com/wp-content/uploads/2020/05/Sign-up-for-Mind-the-Product-Membership-.png 2259w, https://www.mindtheproduct.com/wp-content/uploads/2020/05/Sign-up-for-Mind-the-Product-Membership--300x48.png 300w, https://www.mindtheproduct.com/wp-content/uploads/2020/05/Sign-up-for-Mind-the-Product-Membership--768x122.png 768w, https://www.mindtheproduct.com/wp-content/uploads/2020/05/Sign-up-for-Mind-the-Product-Membership--1024x163.png 1024w" sizes="(max-width: 2259px) 100vw, 2259px" /></a></p>

core/freeform

Product Management Process

How to F.A.I.L. better in product by Marc Abraham

Fighting product-market drift by Dave Wascha

Building a digital product organisation, brick by brick by Nils Michaelis

Learnings from London: Going from Meh to Awesome by Shiva Rajaraman

The art of product management with Ken Norton

Using principles to make better decisions faster by Martin Eriksson

Rethinking delivery with product operations in the age of product

What’s stopping teams from running experiments by Cameron Savage

Top 7 signs you’re in a bad product system by Scott Williamson

How to bring product thinking to any team by Merissa Silk

Creating an Accessible Website for Europe’s Oldest Eye Hospital Charity: a Case Study

Creating an Accessible Website for Europe’s Oldest Eye Hospital Charity: a Case Study

Imogen Schels

Read more

Comments