Context

The Disability Resources for Students (DRS) at the University of Washington (UW) and I collaborated together to create a newly updated and accessible website for all students, focusing on students with disabilities, which include vision, dexterity, and other limitations, who use assistive technology and are in need of accessible resources.

I designed and coded a new website for UW Disability Resources for Students (DRS) to provide UW students with disabilities easy access to online resources and support their academic success.

This section will focus on the Academic Skills page, but the FULL DRS website is still in the process of being built and is NOT currently live.

Note Analysis

My Role and Responsibilities

Graphic Design

Icon Design

UX/UI Design

Digital Media/ Web Design


Challenge

  • The previous website created accessibility challenges for students with disabilities and was too text-heavy. My goal was to simplify and reorganize the content to make it more digestible and user-friendly, ensuring all students had easy access to the resources they needed.

  • All graphics, infographics, icons, web pages, etc., MUST BE accessible to ALL USERS and ensure compliance with legal standards such as the ADA guidelines (Americans with Disabilities Act) and WCAG (Web Content Accessibility Guidelines).

  • Students with different disabilities have very different needs, which makes it hard to identify unified user needs.

Design Question

How might we improve the accessibility of UW’s online learning systems to support students with diverse disabilities?

Improve Information Architecture

The website contains a vast amount of information, but the initial version of the Information Architecture (IA) did not effectively guide users through the content. Page titles were neither descriptive nor distinct, making navigation challenging. To address this, I revised the IA to better organize the content, ensuring clearer pathways and more informative, unique page titles.

Visual Elements

I created various infographics to enhance the web experience, making it more delightful while also helping users better understand complex concepts and techniques. Below are some examples I have created with Adobe Creative Suite, Figma, and Procreate.

In addition to ensuring diversity, inclusion, and accessibility in all graphics, I also adhered to the University of Washington's branding and style guidelines to maintain consistency and alignment with institutional standards.

User Testing

After creating the prototype in WordPress, I wrote a usability script to conduct a test with six students with various disabilities (participants were not required to disclose their diagnosis or accommodations during the test). Through the test, I mainly hoped to understand:

  • Could the students find the information they need easily?

  • Was the website still too content-heavy?

Key Insights

Enhance Information Architecture for Better Usability by:

  • Streamline Content Organization and Labeling: Improve the structure and labeling of content to make it more intuitive and user-friendly.

  • Simplify Titles: Make titles more concise, clear, and action-oriented to enhance readability and navigation.

  • Optimize Banner for Accessibility: Update the banner design to ensure it meets accessibility standards (e.g., contrast, alt text, and responsive behavior).

  • Implement Accordion Menus: Use accordion menus to organize content into collapsible sections, improving readability and reducing clutter.

  • Refine Language: Reword content for clarity, consistency, and a more engaging user experience.

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: Accordion sections are used to break down text-heavy pages into manageable sections, supporting users with disabilities (such as ADHD) by improving focus and helping them navigate content more effectively.

Ensure Accessibility: Use graphics to make reading more enjoyable and ensure all users can access the text content.

New and Improved Information Architechure

The FULL site is still updating and in the process of going live, but the Academic Skills site is available for preview!

Click the image below to go to the website!

Reflection

Working with students with disabilities was an incredibly meaningful and invaluable experience. It deepened my understanding of web accessibility standards and highlighted the importance of designing inclusive digital experiences.

However, the process of recruiting students with disabilities for user testing proved to be complex and time-consuming. Due to Disability Resources for Students (DRS) procedures, I could not reach out to students directly and had to rely on DRS staff to recruit participants. This delayed the start of user testing, pushing it to a later stage in the project.

As a result, when I implemented navigation and information architecture changes based on user feedback, I had to adjust numerous links and WordPress codes, which was a time-intensive process. Conducting even simple user testing earlier in the project could have saved significant time and effort in the long run.

Currently, parts of the old site remain live as I finalize the updates and revamp. The site's updated version will be launched soon, incorporating the valuable insights gained from this process to create a more accessible and user-friendly experience.

Note Analysis