Skip to Content
Enter

Aardvark Accessibility Capstone Research

How can we redesign an educational accessibility platform?

Role

Research

Time

09/27/22 - 12/08/22

Tools

FigJam

Deliverable

Research Report

Overview

Accessibility in a Digital Age

With more services being hosted online, the ability to access content on the internet is essential nowadays. However, a lack of digital accessibility hinders the daily lives of over 40 million Americans who have a disability. It is more crucial than ever before for designers to design for accessibility.

Aardvark Accessibility is a fictional prototype from a previous course that aims to teach designers about the Web Content Accessibility Guidelines (WCAG) standards. After evaluating its accessibility in my capstone, I found potential issues with the cognitive load and provided steps for improvement.

A laptop mockup of the Aardvark Accessibility prototype

Mockup of the learning module in the Aardvark Accessibility prototype

Problem

Cognitive Load in an Information Dense Website

As an educational source, Aardvark Accessibility provides a wide array of modules for junior designers to learn about accessibility. However, with the amount of resources and new concepts, a junior designer may be overwhelmed, especially with the unfamiliar language.

To tackle this problem, I asked myself:

How do we teach complex topics to help beginners learn and retain information without feeling overwhelmed?

The Process for Capstone

Expanding on Past Research

For this project, I built upon the research done during the creation of the prototype. While we researched the basics of accessibility and potential competitors, I wanted to build on the research to focus on the effects of cognitive load on learning and input from accessibility experts. My research process is shown below!

Four circles representing the stages in the process from left to right: research, interview, synthesize, and report

Process used to research issues with cognitive load

Evaluating the Platform’s Usability

Before jumping into the deep end with accessibility issues, I first analyzed the overarching usability issues and their potential effects. To do so, I first analyzed the prototype’s usability against Nielson’s usability guidelines.

The prototype had minor issues overall but had significant violations with help text and context of content, error ID and recovery, and consistency with structure and UI elements.

A table with notes on the prototype's usability based on aesthetics and minimalist design. The columns are: definition of the heuristic, the positives, the negatives, a synthesis, an overall score, and recommendations.

Example of heuristic evaluation table for aesthetic and minimalist design

Learning from Experts on Accessibility

Afterward, I analyzed various accessibility and cognitive load resources. Without a thorough understanding, it can be difficult to communicate in interviews and understand their obstacles with learning.

I built upon the previous course’s research and analyzed digital accessibility standards, the effects of cognitive load on learning, advice from accessibility experts, and other accessibility tools.

A table of notes on different accessibility tools and the features they have. Each tool has a check if it has the feature and an x if it doesn't

Overview of competitive analysis of other accessibility tools

After I examined the prototype and other competitors, I learned about cognitive load’s effects on learning and how other products tackle accessibility. These were my key takeaways from the research!

Field Research Findings

1. Cognitive Load Hinders Learning

Because cognitive load affects how users retain information and focus on content, it’s crucial to stick to regular conventions and avoid overwhelming interfaces and design elements.

2. Accessibility’s Effects on Cognitive Load

When parts of the page aren’t accessible, users may have to use more mental power to understand the interface and view information than actually learning the content.

3. Reliance on Customization

Many tools rely on eliminating inaccessible website elements rather than creating accessible interfaces to begin with. This adds more obstacles for users when interacting with content.

Preparing for Interviews

Before engaging with potential users, it’s vital to understand what are some roadblocks in their learning experience and how they can inform the questions and flow of the interviews. So far, my research has raised the following questions.

Potential Problem Areas

1. Module Structures

Many learning platforms structure modules as sectioned processes. Can our article layout cause users to use more mental load to understand the layout?

2. Learning vs Customizing

Accessibility experts stressed the pitfalls of accessibility overlays that to customize content. How much cognitive load are they using towards changing settings versus learning?

3. Necessity of Context

The platform should provide as much context as possible. Without knowing the basics or WCAG pillars, how can a designer truly understand the content?

Interviewing Our Users

To answer these questions, I interviewed four junior designers to learn about their understanding of accessibility and approach to learning. Dissecting their prior knowledge and learning process helps to understand where the prototype can cause more problems than benefits when learning accessibility.

A video call with a woman and a participant, who is blurred out. The participant is sharing their screen to show how they organize topics.

An interviewee performing a card sort, giving insight into their approach to organizing topics

Learning Accessibility Bit by Bit

Although the students came from different backgrounds, two traits stood out: their inexperience with designing for accessibility and tackling complex topics by breaking down and visually organizing information. One students spoke on how they break down information based on prior knowledge.

“I feel like you have to understand what you’re working with before you can even get into anything else”

Gaining More Insight on Usability

What Gaps Can I Fill In My Research?

While the past steps gave plenty of insights, I wanted to learn more about the users’ handle on the site. While I can use my interview findings, seeing a user's struggles can gauge whether the structure and context affected their use of the website. To do so, I included some usability tests.

Testing the Prototype

To understand a user’s flow for finding content and learning about accessibility, I had two participants replicate the process of creating an account and finding a content module. By going through this process, I can catch issues that create more cognitive load for users when learning.

A video call with a woman and a participant, who is blurred out. The participant is sharing their screen to show how they navigate through the prototype.

An interviewee giving their thoughts on the structure of the learning modules

While both participants gave plenty of great feedback, some details stook out as the tests progressed. After the test, I summarized my findings and noted things of to continue or fix.

Things to Continue

1. Provide Variety of Content

Having different forms of content, like videos and interactive content in modules, can help users engage with the content based on their learning style.

Areas to Improve

1. Inconsistency with Similar Tools

The learning modules are structured like articles, which differed from modules in platforms that the participants were more familiar with like Duolingo.

2. Lack of Context for Features

The lack of context for the onboarding and color-coding confused our participants, forcing them to focus on the structure before the content.

Connecting the Dots

After the interviews, I compiled their responses by mapping each participant based on how much they related to certain behaviors. Finding patterns in the behavioral maps helps me analyze common behaviors with our users and update the persona, or user representation, from the previous research.

Some scales with dots placed along the line to represent each participant. Each dot shows the participant's placement based on how much they relate to a behavior.

Example of behavioral maps used to find how users digest information

Meet Zara Harper

The persona, Zara Harper, is a novice UX Designer at a startup. As someone who is starting to learn about accessibility, she needs to understand the basics before diving into more complex topics.

For details on Zara, refer to the persona sheet .

A photo of a woman with her personal details and her end goals written out. She is a junior designer with little accessibility experience. Her main goals are to learn accessibility by breaking up engaging content.

Part of Zara Harper’s persona template

New Findings About Zara

Based on this information, I now know that it’s vital to break up information, so complex topics relating to accessibility are more approachable for a newbie like her. Alongside this crucial discovery, there are other crucial things to consider.

Key Takeaways

1. Stick with Conventions

Diverting from users’ experiences with similar features, like Duolingo’s modules, can confuse them. We could break down the modules into bite-sized lessons instead of article layouts.

2. Explain Organizational Structures

The website lacks explanations for what WCAG is, its main pillars, and how content is organized and color-coded. Having some explanations may help users navigate more easily.

3. Make Error Recovery Consistent

While users can recover from errors in some places, it's nonexistent in most of the website. To prevent users from causing errors, the website needs to warn them of potential issues.

Reporting My Findings

Research Report

After determining the problem areas with the prototype. I compiled a research report to communicate my findings.

For more details on the research completed and the findings, refer to the research report.

Recommendations

So Where Do We Go From Here? 

After researching cognitive load and the designers’ goals and needs, I was able to determine areas they were struggling with and how to approach these issues. These are my recommendations for improving the cognitive load in the learning experience.

The search bar, module progress bars, and accessibility tool overlay are outlined in red. The notes state that these elements lack visual contrast, and the website relies on an overlay for accessibility.

Example of low accessibility in the homepage

Ensure Accessibility Compliance

This is crucial because it allows more users to access the content. For example, the search bar’s low contrast makes it hard to see.

If users can’t even see or interact with the content, how can they expect to learn anything?

Four cards that represent each of the WCAG pillars are outlined in red at the bottom of the homepage. The note states that this is the only context for the pillars.

WCAG pillars at the bottom of the modules page

Supply Help Text or Tutorials

Supplying help text or tutorials can help users allocate their mental energy toward learning instead of understanding the website.

By adding a tutorial for how the WCAG pillars are color-coded, users may be able to find the content they’re looking for quicker.

Names of modules are outlined in red. The note states that new learners may not understand some terms and miss content they're looking for.

Examples of modules with names that can confuse users

Provide Flexibility in Search

Providing flexibility will help designers who aren’t familiar with accessibility terms find the content they want.

For example, if a user wants to learn how to limit distracting animations but doesn’t know the term, they’ll struggle to find content.

The module content and module tab are outlined in red. The note states that the module is structured like an article, which can be confusing for new users.

Example of the module layout

Follow Industry Standards

We need to use familiar UI elements and patterns, so users can focus on learning the content instead of the website’s structure.

It’s okay to have similar layouts to other websites, especially if it’s common that feature. Besides, why reinvent the wheel?

The log out button in the side navigation is outlined in red. The note states that when logging out, the prototype doesn't give any warning to confirm.

Log out button shown in the side navigation

Add Error States

Things don’t always work correctly, so it’s important to show how the website would react to invalid inputs and prevent errors.

Some examples that could be implemented are invalid search inputs, account changes, and bookmark deletions.

Challenges

As my first solo project, the experience was both rewarding and challenging! While this experience greatly improved my research skills, I came upon some challenges.

Obstacles in the Process

1. Digging In Too Deep

With a field as large as accessibility, it was easy to get caught in all the intricate details. To focus on the end goal, I prioritized categorizing the information, and I then started with the basics and supplemented it with more complex topics.

2. Excluding Personal Experiences

While I was also a junior designer during this project, it was key to separate my own experiences from the users because my thoughts may not represent our use base. To do so, I made sure to back up any findings with patterns I found from the participants.

Takeaways

This capstone course was a valuable experience as a designer! I not only learned more about accessibility, but I was also able to revisit a past project to improve upon it. While I completed the project for a hypothetical product, I will take my experiences with this research to ensure that I continue to design accessibly!

Let’s Connect!
LinkedIn logo in black
Made with ❤ © 2024 Antonella Mai