Web Accessibility

NYU Prison Education Program

Problem Statement: Redesigning the NYU Prison Education Program website according to WCAG AA guidelines for accessibility

My role: Used inclusive design methology, web accessibility guidelines and user experience design process to redesign the PEP website

Duration: June 19, 2018 to August 21, 2018

Tools: Adobe Illustrator, Adobe Photoshop, Axe plugin, Wave reporter, VoiceOver, JAWS

Design Process

Research

General Observations
The website of the Prison Education Program needs to be redesigned in order to achieve the following:

– Better outreach
– Conformation to the standards of Web Accessibility
– Restructing content for better navigation
– Provide improved resources to people who have been released recently
– Showcase the influence of the program

Audit Report Observations
An audit was performed on the current website to discover the following areas where it needed to be remediated to ensure web accessibility:

– Content navigation: landmarks and headings
– Tab order
– WCAG compliance
– Color contrast
– Alternate text
– Purpose of links
– Accordion, Buttons, Forms, Search

User Interview Insights

Conducted user interviews with people who were involved with the program who were either staff member or student from the program or an individual interested to get involved with the program. The insights from these users was quite useful to understand the gaps in the current website and how the navigation and content structure could be improved for better access.

Persona

Based on the insights from the research and user interviews, three different persona were created as shown below:

Journey Map

A journey map was created in order to understand the user journey in detail and analyze the pain points, opportunities, emotions and experience of the user while they navigated the current website.

Card Sorting

Performed the card sorting to categorize the hierarchy and priority of the topics to be included in the new website.

Current Website Flow

Analyzed and mapped the navigation flow of the current website to understand how the content was structured and to find the gaps which prevented the user from finding the right information on the website.

Information Architecture

After gathering all the data received from the above steps, created the information architecture to address all the needs of the different users.

Stakeholder Feedback

The information architecture was shown and explained to the client, Raechel Bosch, who was the Manager of the NYU Prison Education Program. She gave feedback to each of the pages and changes were made in order to improve the structure even further.

Revised Information Architecture

Based on the feedback received from the stakeholder, the information architecture was updated as follows:

Wireframes

Once the information architecture was finalized, the wireframes were created by mapping existing content and deciding the layout and template of the new wesbite.

Website Design Process

User Flows

The user flows were based on the user personas created earlier and a task was assigned to each user and the flow was mapped based on how they would navigate the website.

User Testing

Once all the new webpages were created and the content was put onto the new website, user testing was conducted to ensure the information could be easily found by the users. 

Testing for Accessibility

Every page was tested for accessibility to ensure that all content and media within the new layout of the website was according to the guidelines of WCAG for AA level of accessibility.

Design Iteration

The user testing and accessibility tests resulted in a number of issues which needed further attention and some fixes to ensure the requirements are met effectively. The iterations are summarized as given below:

Final Design

After the changes were made in the design based on the feedback received the final website was launched. Given below are some snapshots of the comparison between the old and the new website:

Next Steps

– Ensure all content on site meets accessibility requirements
– Add more content for resources and projects
– Maintain site regularly with latest achievements
– Upload new content which is tested for accessibility
– Create awareness about program on social media
– Increase reach to wider target audience

View Website