Context
I designed and coded a new Academic Skills website for UW Disability Resources for Students (DRS), to help UW students with disabilities improve their academic performance. My work focused on accessibility design for the website. The Academic Skills section is launched on the UW DRS website.
Team
1 Project Manager
1 Content Writer
1 UX Designer (Me)
1 Graphic Designer
1 Web Developer
My Responsibilities
UX Design
Visual Design
Content Design
Web Development
User Testing
Challenge
Most web pages are content-heavy, but many students with disabilities have difficulties viewing text-heavy pages.
Students with different disabilities may have very different needs, which made it hard to identify unified user needs.
Design Question
How might we provide an inclusive, accessible and useful web experience for all students with disabilities at the University of Washington?
Content Auditing
All web content was first created in Google Site by a content writer. I conducted a content audit of all web pages and implemented design strategies to improve accessibility.
Summaries for complex web pages:
I added summaries on top to give an overview of content-heavy web pages and help users navigate it.
Clear structure and proper reading order:
I utilized headings, paragraphs, sections, bullet points, and other page elements to present a web page in a way that makes sense to the user, a screen reader or other text-to-speech tool.
Add Visual Elements
30+ graphics and infographics were created to make the experience more delightful, and to help users better understand complex concepts and techniques. Here’re some of them.
Improve Information Architecture
The website has a large amount of information to display, but the first version of Information Architecture (IA) failed to provide clear paths through content, and the page titles were neither informative nor unique. I adjusted the IA to organize content more clearly.
Accessibility Check
I transferred the website prototype from Google Site to WordPress and made design refinements along the way. I then ran a thorough accessibility check to make sure the experience is inclusive and accessible to all users.
Accessible PDFs on the website:
I made sure PDFs on the website have searchable text, document language, title, document structure tags, and other accessible characteristics.
ALT text for non-text elements:
I added accurate and concise Alternative Text Descriptions for icons, images, infographics and other non-text elements.
Provide descriptive links:
I used descriptive and accurate link texts to provide accessible experience for assistive technology users.
Usability Test
Background
After creating the prototype in WordPress, I wrote a usability script to run a test with 6 students with different disabilities (participants didn’t need to disclose their diagnosis and accommodations during the test). Through the test, we mainly hoped to understand:
If students could find the information they need.
If the website was still too content-heavy.
Note Analysis
Key Insights
Improve Information Architecture to organize and label content more effectively.
Make titles more concise and intuitive.
Change banner to improve accessibility.
Use accordion to improve content structure.
Updated Information Architecture
Design Solution
Smooth Navigation: Clear information architecture, intuitive menu and page titles to help users navigate the site smoothly and find the content they need.
Clear Content Layout: Accordions are fully utilized to break down text-heavy pages, and help users browse content accurately.
Ensure Accessibility: Use graphics to make reading more enjoyable, but also ensure all users have access to the text content.
(Click Image to View the Website)
Reflection
It was a meaningful and invaluable experience to work with students with disabilities and learn a lot about web accessibility standards.
The process of recruiting students with disabilities to participate in user testing is complex and time-consuming. According to DRS procedures, I couldn’t reach out to students with disabilities myself. I needed to wait for DRS staff to recruit participants for me. So we started user testing late in the project. As a result, when I made changes on navigation and information architecture based on user feedback, I had to adjust many links and codes in Wordpress. If we could conduct user testing earlier, even just some simple testing, we may save a lot of time later on.
