At the start of the project, the team did a rough audit of the NHS website’s Health A to Z topics and found:

• out of 75 pages about skin problems, only 7 described various skin tones
• out of 61 pages with images, only 3 included an image of non-white skin
• many other pages about health conditions described how to identify symptoms on white skin only, and 10 of these topics are in the 100 most visited pages on the website

While many skin symptoms are the same whatever your skin tone, there can be differences. Symptoms that are likely to differ include a change in skin colour. For example, a rash that appears red on white skin may not appear red on skin that’s brown or black.

According to ethnicity facts and figures on GOV.UK, 13% of the UK’s population belongs to a Black, Asian, mixed or other ethnic group.

People whose skin tone is not represented in our content do not have the same opportunity as people with white skin to recognise symptoms and understand what they need to do next. This is both a clinical safety and a health inequality issue.  

In-depth interviews

We wanted to understand how our users talk about skin tone and how symptoms appear on their skin, and their expectations of how the NHS website should talk about it too.

We conducted in-depth interviews with people with brown and black skin who had experienced a skin condition and dermatologists who regularly saw people with brown or black skin.

We also spoke to people with a visual impairment who had experienced a skin condition as we wanted to understand how we could better support visually impaired users.

Survey and keyword analysis

A survey was added to some pages on the NHS website, asking for feedback on how we currently describe skin symptoms on various skin tones, and the terms people would like us to use. We got responses from 348 people - 103 who identified as having brown or black skin.

Additionally, we conducted a keyword analysis to uncover other content gaps around skin symptoms on the NHS website for people with brown and black skin.

Usability testing

We decided to create a prototype based on an existing NHS website skin condition page so we could apply our learnings and test the content with more users.

We agreed to test chickenpox following a prioritisation and scoring exercise. Between December 2019 and September 2020, the chickenpox page had over 600,000 visits. It had 3 images which were all on white skin, and we’ve had lots of negative feedback about the page not being inclusive.

Our team ran a sketching ideation workshop which helped us to settle on 3 different concepts to test with users. After 1 round of testing the different concepts, we identified a clear winner and developed an HTML prototype.

We have since been iterating this prototype and have so far conducted 3 rounds of user research with people who have brown or black skin, a visual impairment or a different access need.

Inclusive language

We found that people prefer using the terms “brown” and “black” to talk about skin tone, rather than terms such as “light(er)” and “dark(er)”. Modifiers of brown, such as “medium brown” or “dark brown”, were also commonly used and liked.

“Brown” was considered helpful, direct, specific and captured a range of skin tones. Whereas “Dark skin” was considered vague, subjective and unclear.

“Brown and black skin’ is better ​– some people may not see themselves as ‘dark skin’… Dark skin can evoke shame, but brown ​and black, you can see where ​you fit. My dark and someone else’s dark can be ​very different.” 

People liked content ​about symptoms appearing differently depending on ​skin tone and appreciated being told that symptoms may be harder to see on brown and black skin. ​

We also learned that content could appear biased if we lead with imagery of white skin or descriptions of how a condition appears on white skin.

People with a visual impairment found it helpful when we included descriptions that weren’t visual, such as how a skin symptom feels to the touch, and the shape, pattern, size, and texture of it. They also appreciated descriptions of the sensation of how it feels, for example, if it hurts when touched.

Inclusive imagery

Alternative text (alt-text) is a text description of an image for people who cannot see the image. We discovered that descriptive and meaningful alt-text is helpful for those who have a visual impairment. Although, alt-text should be no more than 125 characters due to the way it’s read out by some screen reader software.

Describing images of skin symptoms in alt-text alone was often impossible due to the level of detail needed. We overcame this challenge by providing a longer description of the image in addition to alt-text.

The feedback we gained about longer descriptions has been overwhelmingly positive, with people saying it helped them feel more confident about diagnosing a skin condition on their own skin or someone else’s.

“That’s really helpful – it has given me a better insight into chickenpox. I could feel my daughter’s forehead and be like, OK, they‘re round, filled with fluid. Gives enough description to know what you could feel on someone’s skin.”

We worked closely with the service manual team to create guidance for the NHS Digital service manual, so that other content designers can start applying our learnings.

We presented the draft guidance at our regular content style meetings, and also asked content colleagues for feedback at a "content crit". The service manual team then helped us finetune the guidance which we’ve recently published: Make content about skin symptoms more inclusive.

The service manual relies on the community who uses it to contribute and help grow it. If you're interested in contributing to the service manual, contact the service manual team via their public Slack channel or by emailing [email protected].

Applying our learnings

Content designers have been applying the new guidance when reviewing topics on the NHS website. So far, we’ve updated over 15 topics with more inclusive descriptions and images, including the topic rashes in babies and children, which has received over half a million visits since the start of 2021.

Challenges we face

Applying our learnings across the NHS website is a big piece of work. There are hundreds of topics that mention skin symptoms and updating these will take time.

There is a lack of medical sources which talk about how symptoms appear on brown and black skin, which makes it difficult for content designers to describe how a symptom appears on various skin tones.

Furthermore, there is a lack of diverse imagery showing skin symptoms on brown and black skin. The NHS website multimedia team have contacted existing image suppliers to raise the need for inclusive and diverse imagery. They have also sourced new image providers that have more inclusive imagery as well as building relationships with different organisations (Don’t Forget the Bubbles, Mind the Gap and British Association of Dermatologists) and hospital trusts who are able to provide different conditions that are not readily available on stock sites.

Further user research

Our team is continuing to explore the best way to display multiple images on a page. We’re currently testing designs with people with various disabilities to make sure we build something that is accessible and usable for everyone.

We’ll continue to update the guidance as we learn more.