top of page

Bookshare Website Design

Updating the Bookshare website to be a CMS and improve the readability and workflow.

Bookshare Redesign Banner.png

The Scenario

Bookshare is a digital library that uses text-to-speech technology to bring millions of books to users for whom reading a print book is difficult – people with blindness, low-vision, learning challenges, and physical limitations.  The website needed an overhaul to modernize the interface and to improve the workflow for users trying to sign up as well as read books.

What I Explored

While the Bookshare website was accessible – it worked well with screen readers and had comprehensive image description for the blind - it was rather text heavy for a site aimed at individuals with difficulty reading.   Additionally, it appeared to have grown organically so that, rather than incorporating new information onto existing pages, often new pages were added with links from existing pages, making navigation tedious at times.

 

I explored reducing the number of pages, consolidating information onto a single page where possible and reducing the text on each page to just the minimum.  I also explored using large iconic imagery where it would help the those who rely on images to help them understand content, but not hinder people with blindness.

​

This was a large, comprehensive project so I am going to focus on a single page to show improvements, but discuss the underlying workflow that accompanied it.

​

Example of a Text Heavy Page

This page explains who qualifies for Bookshare in 3 parts:

  • a 300 word description

  • a table showing the 3 disabilities that qualifiy and the ones that don’t

  • FAQs

The Solution

Qual - 1st & 2nd pass.png

Explorations

1st Pass: Reduce Verbage

My first pass at improving this page included:

  • Moving the FAQ section at the bottom to the Help Center (we consolidated a lot of details and randomly placed FAQs all into the Help Center, which is searchable). 

  • Reducing the description from 300 words to 20.  Verbage about FAQs removed since FAQs themselves are removed.  Verbage about copyright law consolidated on a separate page under the Legal footer.  Description tightened to just the basic idea.

  • Reducing redundancy in the table

​

2d Pass – Add Imagery and Color

This pass concentrated on improving the readability of the table.

  • Added icons and color to make it easier for learning disabled to distinguish.  (This tested well with dyslexic folks who said when the imagery was repeated throughout the site, it helped them learn.)

  • Added check mark and x marks to more quickly distinguish which disabilities qualify. 

  • Moved the details about who can verify qualifications off to a details page accessible by double-clicking on an icon.

Qual - 3rd pass.png

Final Version

This version shows how it ultimately played with the Drupal responsive design. 

Qual - final.png

User Research

After extensive user research to learn what would improve the experience for our users, I discovered that people with learning disabilities can often benefit from the user of color and icons along with text to help them learn and remember words and phrases.  To this end, I added icons to buttons where feasible to enhance their understanding of the information.  (See image above with color buttons and icons.)

The Reading List page shows an example used throughout the application

  • Icons along with text on buttons to reinforce concept

  • Color (blue) for the primary action in a set of buttons, there is only ever one primary action

bottom of page