American Council of the Blind Nebraska

Website Redesign

Brief Description

This project was part of a global web accessibility competition - OpenAIR: the Accessibility Internet Rally 2018 organized by Knowbility to be completed in 5 weeks. As part of a team of 3 web developers, we competed against 13 teams in the Professional Developer category. In this competition, OpenAIR partnered teams with nonprofits to create accessible websites for these organizations that will serve all populations equally, including persons with disabilities. We were judged mainly on web accessibility criterias such as:

  • Core Accessibility (use of alt text for images, semantic markup, color contrast, ARIA landmark roles, etc.,)
  • Basic Accessibility, Usability and Rally Requirements (spelling, form controls, site map, search, etc.,)
  • Overall Site Quality (visual aesthetics, site appropriateness, etc.)
  • Advanced Accessibility (data tables, audio transcripts, responsive design, etc.,)
  • Nonprofit Organization Satisfaction

Disclaimer: Site has been heavily altered since it was handed over to the client.

Client

American Council of the Blind Nebraska

Role

Theming, Information Architecture, User Experience

Technology Used

  • Drupal 8
  • Design system
  • Twig
  • Gulp
  • SCSS
  • HTML
  • BEM and ITCSS methodology
  • JavaScript
  • Adobe XD

The Challenge

We were paired with the American Council of the Blind of Nebraska to help them overhaul their website. Their original website was built on Wordpress without any form of design/theming. Content was also not organized in an intuitive way.

For us, this was a great opportunity to introduce fresh UI redesign for both screen and print, content strategy and an intuitive information architecture, layout that enhances UX, a platform that allows for easy site maintenance, and of course an end product that is highly accessible to all end users. We also incorporated SEO improvements and Google Analytics.

With input from our client, we decided on Drupal 8 as the platform of choice due to its open-source and ease of maintenance among many other factors. This was our first time building a site in Drupal 8, but we all have had experience building websites in Drupal 7.

item.left_alt_tag ||
A screenshot of the old website
A screenshot of the new website
A screenshot of the new website

The Process Taken

  1. Site discovery and content inventory phase
    Inventorized existing content, and made notes of areas of improvement.
  2. Content Migration and Site Creation
    Major content editing and reorganization was performed to improve user experience. An intuitive information architecture was created as a result of careful content planning and strategy.
  3. Branding, design and prototyping phase
    I picked colors and fonts that match the organization’s purpose. Color selection criteria also met the WCAG 2.0 AAA standard with a contrast ratio of 7:1. Mockups were created using Adobe XD.
  4. Implementation phase
    After the Drupal 8 instance has been set up, I was responsible for sourcing the needed Drupal modules, installing, and configuring them. I also played a large role in setting up various content types and dynamic views to populate the site. Other features implemented:
    • Used twig template files to create custom theme/design system with fluid typography
    • CSS styles for print and media
    • Support touch screens in the main navigation by using a button to expand/collapse drop down menus (rather than a link)
    • Audio transcript
    • WCAG 2.0 compatible

Throughout the entire process we sought constant input from the client who is visually impaired and a great subject for our user testing. We made every effort to communicate frequently and the rationale behind our design and development choices every step of the way.

Result

Our dedication and hard work won us first place in the Professional Developer Team category and we achieved the best score in 20 years of the competition’s existence.

Seven Developer Teams Place While 153 Developers & 25 Nonprofits Win During The OpenAIR 2018 Website Accessibility Competition

Client Feedback

I was absolutely thrilled with the response and turnaround time provided by The Inclusive Lab. Not only were Michael, Richard and Natalie knowledgeable about what it was they were doing to build a totally awesome and dynamic site, but also provided feedback and suggestions as to why some of the requested concepts were not a good idea to include. Supporting documentation was also provided to further justify their thought process in why some modifications were not a good idea. Because of the professionalism and web development skills, our website went from looking like it was designed by someone in grade school with limited .html experience to looking more professional and more up to date. As was communicated by one of our visitors. "After reviewing the site, I’m writing to say I’m pleased with its layout and design. Heading structures are logical and sequential, search results are properly identified and the page titles are unique and orienting. As a screen reader user I’m unable to comment on visual aspects of the site, but please pass on my positive feedback to the web team…well done."