Lisa Squirrel

Designing a website for the visually impaired

lisasquirrel.com

About

Lisa Squirrel hosts and leads tours of art and design exhibitions for visually impaired people, providing detailed audio descriptions of the art works, background on the artists and their historical context, and information about the gallery environment and the curation of the works. Tour locations includes Tate Britain, Tate Modern, and the Barbican, featuring a broad range of artists from Turner to Matisse. Tour experiences are enhanced using tools that appeal to other senses to further enhance the experience for attendees, for example textured, tactile versions of Matisse cut-outs.

As word spread amongst the community, the popularity and demand of her audio guided tours and services soared, leading to the need for a more sophisticated website was required to replace her orignal one-pager.

First version of Lisa's website

Designs

homepage

Scroll Here

Tour list page

Scroll Here

Brief

The main goal is to serve potential attendees who are looking for information on upcoming audio guided exhibition tours, and to book upcoming tours. Archived content from previous tours are publicly available to aid previous attendees.

The secondary function of the site is to promote the tours to museum access managers and curators to highlight importance of ensuring accessibility for those who are visually impaired or blind.

Team

Designing the Brand

Designing the look and feel

"Incorporating Pre-Raphaelite style would mean a lot to me, as it is this art movement, and the Tate Britain which got me started as an art historian, and tour guide."—Lisa Squirrel

Given this direction, we'll work it in with a contemporary and simplified twist which will ensure the site appeals to users or clients who like or work at institutions that focus on more modern art, such as the Barbican.

For this brand, we've incorporated the flora and fauna colours palette, as well as the tunnel shape (rectangle with two rounded corners at the top) into our visual design as a subtle nod to the frame shape of many famous Pre-Raphaelite paintings, including Sir John Everett Millais's Ophelia (1851–2) and Ford Madox Brown, Work (1863).

See original moodboard

Screenshots of Lisa Squirrel's logo work in progress

Logo design

For the font, we’re looking for a beautiful serif font which is easy to read for those with visual impairments, but will look wonderful for those who are sighted. The font has to be strong enough to be clear from a distance and has to work well both digitally and on print.

See logo design progress

Screenshots of Lisa Squirrel's logo work in progress

Building the Website

Accessibility first

Following the guidelines set by the Web Content Accessibility Guidelines (W3C), this website was built with the following criteria:

Technology

In our pursuit for the ideal CMS for visually impaired users, we came to two popular options; Drupal or WordPress. Both were accessible, but at the time of building, we chose Wordpress as it regularly updated and provided neccessary automation for linking the MailChimp integration for the automated newsletter, and natively included an accessible blogging system.

In our studies, we learnt how screenreaders outputs content and how a visually impaired users uses a site by increasing speed of the reader to digest the page, and interacts with navigations, forms and other web elements prior to the design and build. Before setting off to build the website, we confirmed with the user to ensure the WordPress editor worked well with JAWS screenreader, which she uses most often.

The structure of the website was briefed in and laid out using FlowMapp.

Site map structure

Lisa Squirrel's website sitemap

Simple menu

Lisa Squirrel's menu design

Ticket booking flow

Lisa Squirrel's ticketing flow

Result

homepage design

Scroll Here

Tour list page design

Scroll Here

Tour page design

Scroll Here

Experiencing in first-person

To test the booking website (as a sighed user!), I made a surprise booking and attended Lisa's tour of Into the Night at the Baribican. At the event, I was pleased to see a gathering of visually impaired art lovers and their assistants enjoying the audio tour, so the website worked as intended.

Her quarterly email newsletters are always a pleasure to read, as it also lets me know that the automation is well oiled and running smoothly.

Thoughts and Takeaways

When we consider web design, our initial and unconcious bias would be to think that it is visual design.

In the UK, there are almost 2 million people living with sight loss. Of these, around 360,000 are registered as blind or partially sighted (RNIB). In 2021, globally, at least 2.2 billion people have a near or distance vision impairment. (World Health Organization)

This was the first project I've worked on which primarily focused on non-visual communication and I feel satisfied with the result thus far. Although the learning curve was steep and a lot of time was spent at the start to familarise ourselves with the world of designing and building for those hard of sight or blind, many things are transferable as good everyday practices.

From writing detailed captions and alt text for images, creating well structured content, and choosing contrasting and legibile information, there's a lot of minor and quick wins a developer and designer can do to make their websites accessible for all.

All these small improvements can help us design and build empathic products for audiences including aging population, as well as those with illnesses which affect sight.

Feeling curious?