Bookshare Website Design
Updating the Bookshare website to be a CMS and improve the readability and workflow.
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
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.
This version shows how it ultimately played with the Drupal responsive design.