Bookshare Website Redesign

Bookshare Logo

Accomplishments

  • Produced mockups of website redesign focused on accessibility.  Initial design to launch took 8 months.
  • Worked with CMS specialists to integrate workflow within CMS requirements.
  • Built many of the frontend CMS pages focused on initial learning about Bookshare and signing up workflows.
  • 5 months after Bookshare.org website launch in Oct. 2014, analysis reports reduced support calls and increased membership.

The Scenario

Benetech is a nonprofit that develops and uses technology to create positive social change.  Bookshare is a Benetech Initiative, an electronic library for the “print disabled”, people who cannot use print books because they have visual, cognitive, and/or physical limitations.  It is provided free to qualified US students and schools and at a low-cost to qualified adults and international users.  The majority of US students have dyslexia and other learning disabilities, while the majority of adults and international users are blind or low-vision.

The Problem

The Bookshare website was initially developed in 2008 and anytime web pages need to be updated, it required engineering effort.  Benetech decided to use a content management system (CMS) to make updating easier.  Backend application integrated into CMS.  I worked with a CMS consulting firm to update the Bookshare.org frontend to be easier to learn, easier to register and easier to access books.

What I Explored

While the Bookshare website was accessible – it worked well with screen readers and had comprehensive image description for the blind – I determined that 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 (which might require reorganizing the page and that required engineering effort), 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 visually abled and the learning disabled, but not hinder the blind.

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
Image of old Bookshare text-heavy page

Old Bookshare Qualifications Page – text heavy

 

Explorations

First 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
Image of first pass of redesign - reduced description and easier-to-read table.

First pass design – reduce text, move FAQs to Help Center

 

Second 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 view also contains the beginnings of the improved menu bar (with just 5 items instead of 9) and improved signup region.

I also explored treating the section called Explore as a wizard, so that the buttons at the bottom go back and forward through the series of 3 pages that help the user determine:

  • How Does It Work?
  • Who Qualifies?
  •  What Does it Cost?
Image showing large icons for disability types with one-sentence description of what qualifies.

Second pass design – add color and images to table

 

Final Version

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

  • The wizard buttons are replaced with a left navigation region.  (The wizard buttons were displayed butted against each other in Drupal and didn’t look good.)
  • The text description was again expanded, but we managed to keep it under 40 words instead of the original 300.
  • The large icons were displayed using responsive buttons with an icon font (easier for CMS writers to select an icon from a menu than code an icon).  The size and shape of these buttons are determined by Drupal and do not look as good as I hoped, but it was a reasonable compromise.
  • Removed the button showing disabilities that DO NOT qualify – just adds clutter.

Note also that the Explore section was renamed to “Is Bookshare for Me?”  While this label takes up more space in the menu and was counterintuitive to keeping labels short, it tested far better in usability studies than “Explore”.  It was also much more obvious that this was the starting point – people didn’t always select Explore as their starting point and it was perceived as more ambiguous.

Qual page - final

Final implementation – use CMS buttons instead of icons, remove disabiities that don’t qualify

 

The Solution

Ultimately, we reduced the menubar from 9 items to 5 and submenus from 41 to 10.  I also recommended limited or no use of embedded links within text, using buttons and left nav bars as the primary navigation.  I influenced others to reduce text and be more concise in descriptions and reduce overall links.  My contribution to the overall project was in the design of the Is Bookshare for Me? section, the overall menu organization, and the style of the Help Center home page (shown below).

Help Center page showing use of Drupal buttons as column headers.

Improved Help Center design – reduce list of issues to most per category and add search

 

Old Help Overview

Help - Old

Old Help Overview page

 

The CMS consulting firm determined the CMS style and organization.  An accessibility expert weighed in on color, text sizes, and UI components best used for screen reader accessibility.  Marketing designed the home page (within the CMS structure) and the My Bookshare section was ported to the new look and feel with no UX improvements.  These improvements will be added over time as design and engineering resources allow.

This is a good solution because

It has drastically improved potential user’s ability to learn if Bookshare is a resource for them.  It is driving increased Bookshare membership and reducing support calls.  It has laid the foundation for easier site updates by non-engineers (with the CMS platform).  In the most recent user study (conducted 2 months after the new site launch in October 2014) every user in the study (about 12) stated the new site was much easier to use than the old site.  People LOVE it!

Big Realization

In the best designs, usability and accessibility work together but can sometimes be at odds with each other.

The Bookshare website user population is very diverse – teachers and parents often with normal abilities, students often with learning disabilities (normal vision but difficulty reading), adult and international readers often with impaired vision or blind.

It was important to first try to find solutions that work for all populations.  Reduced verbage is a great example of a solution that works for all users – even normally abled people will comprehend short, concise text better and more quickly.

But if a solution conflicted with the various users, it was important to put more weight on solutions that worked for the majority of users.  For example, the menubar on the home page originally had much larger text based on the requirements of low-vision users.  However, it looked disproportionately large and attention-getting for the normal vision folks (including the learning disabled), drawing their eye to this region when the menu should be a secondary layout item.  (It is there for reference but shouldn’t be a focal point.)  This also caused problems for the responsive design, turning the menubar into a hamburger menu (reduced to an icon with no text – harder to visually distinguish and more steps for the screen reader to read) way too early when shrinking the browser width.

Menubar wrap

Bookshare menu wraps instead of reducing text size.

Responsive design starts to look pretty terrible when width is reduced too far.  Menubar becomes a hamburger menu too early – there is still room to fit menus if it used a smaller font.  Note also that login now requires more horizontal space instead of reducing the size of the search bar.

Menubar - hamburger

Responsive design collapses entire menu to hamburger and orphans the Login link in upper left.

I argued for reducing text size before wrapping or resorting to a hamburger menu even though the smaller text is not ideal for users with low-vision.  It works best for folks with normal vision, is sufficient for the learning disabled (if they have normal vision, text size will not impair nor improve their ability to read the words), and has no impact on the blind (screen reader reads the same no matter the text size.)  So the only population that benefitted from overly large text was those with low-vision, which was not a sufficient reason to make it less usable.  I also recommended adding an icon to each menu to support learning disabilities, but there wasn’t time to do this.

Design idea for menu with icons.

Design idea for menubar with color icons to improve readability for the learning disabled.

User Research

We went through 4 rounds of user testing:

  • Round 1 – accessibility study on existing website conducted by accessibility expert during task analysis phase
  • Round 2 – study of initial assessment workflow using a clickable PDF mockup with a large cross-section of users (teachers, parents, students, adults with disabilities making sure to get blind, low-vision, learning disabled, and physically disabled folks) conducted by me
  • Round 3 – study of application backend integration – make sure users can smoothly go from CMS to application pages without getting lost conducted by me
  • Round 4 – putting it all together.  Final user study to ensure design, workflow, and integration all working together, easy for users to navigate, no broken links or orphaned pages.

Future

  • Improve My Bookshare portion of site
  • Improve search and ease of accessing books through mobile apps
  • Through Benetech Labs, improve usability of books heavy on images (image descriptions using alt:text) and math textbooks (MathML – markup language for math equations that autogenerates alt:text descriptions).
© Copyright 2011-2013 - Deanna McCusker