ACLU

Discovering what access really means in the context of impactful UX

tl;dr

time

10 weeks (2019)

user

my role

strategies

over 1 million new visitors to the ACLU site

Redesign the ACLU site to be more accessible and easy to navigate

User Research, Card Sorting, Tree testing, Accessibility Testing, A/B test

lessons learned

Simplify designs to avoid excessive visual input, increasing ease of navigation

context

Asnew members join the ACLU, the ACLU needs to ensure that the new members can access the information they need on the site.

target user

During my internship, access was defined in two ways:

  1. Users are able to access the information they seek quickly

  2. Users of different abilities are able to have a meaningful experience when interacting with the site

 

As a result, the projects were divided into these two categories. The first being focused on the navigation bar and the other focused on the interactive carousel.

project one

the navigation bar

Users need to be able to access the information they seek quickly

 

In order to find what you are looking for on a site, you typically turn to the navigation bar. While the ACLU had a navigation bar in place, it had a few issues.

context

old navigation bar

The first was that there were almost two navigation bars: one for donation related topics and one for content. Additionally, that second navigation bar (the one in light blue text) was organized in a way that really only made sense to an insider. For example, while “Defending Our Rights” and “Know Your Rights” are internally seen as very distinctly different categories, an outsider may have trouble distinguishing them.  

research

empathize

Since we were unsure if the navigation bar was intuitive to new members, we decided to conduct some user research. The main questions guiding our research were:

learn

We first began by using a research technique called card sorting.

 

During card sorting:

  • Participants are given a set of cards that reflect pieces of content

  • Participants are asked to sort the cards into groups that make sense to them

  • Groups are labeled by participant

For our card sorting activity, we had 25 cards. Each card represented one piece of content on the ACLU site.

We were able to interview 12 participants, ranging in both location and age. In addition to grouping cards, participants were given editing powers. This meant they could write different names for cards that were unclear, add cards that were missing, remove cards that felt redundant. I had the wonderful opportunity to conduct most of the interviews as well as synthesize the data.

define

We were able to get answers to both research questions.

 

Users did have a general expectation for how the content should be organized!

 

There was a general trend in how participants organized the cards. Below are the overall buckets participants created:

User did expect information to be labeled differently!

We actually found that 83% of participants found 4 card names confusing.  The most confusing cards were “Local Affiliates” and “Know Your Rights”. Users were confused by the name of Local Affiliates-- which was an easy fix. The harder problem was Know Your Rights. We found that users were unsure if Know Your Rights was a resource or a way to get involved; as a result, they were never really sure which category to place it under.

more research

Now that we had a general sense of the content should be organized, we decided to use another research method called Tree Testing. Tree Testing helps us get more specific information. We used tree testing to determine where Know Your Rights most intuitively fits (since it could be a way to “Take Action” or a part of “Our Work”)

design

Based off the Tree Testing research, we found that Know Your Rights best fit into the  “Take Action” category. We also found that users prefer the words legal work and take action.

 

Based on all this research, we reorganized the navigation bar. Of course, not could just directly syphon what users said into a solution. There were many stakeholders for the navigation bar that had influence on our decisions as well. For instance, donate needed to in the end be its own button since our stakeholders wanted to reduce the friction to donate.

new navigation bar

project two

interactive carousel

Users of all abilities should have a meaningful experience when interacting with the site

 

The second project was focused on increasing accessibility on the site. Typically in accessibility design work, the objective is to meet the basic standards. This means ensuring that there is high contrast in the visuals and that the text can be picked up by a screen reader. However, just because text can be picked up by a screen reader does not mean the users are having an impactful experience.

 

For the project, we decided to focus on the main interactive element on the ACLU.org site: the carousel.

context

research

Drawers versus Carousels

While those with no visual impairment would describe the carousel as a set of rotating slides. Someone would no vision would describe the carousel as more like a set of drawers, since they are not influenced by the actual movement. Each drawer has a label, the title, and they can click in/open it to learn more.

 

When we were designing the experience of this interaction, we kept thinking about it as a carousel. Thus, when we went to test the prototypes, our users were so confused by why the experience was so fixated on quick movement. They were lost on why we kept calling it a carousel! However, once we realized that those with low vision have different experiences, we were able to redesign how the screen reader read the carousel to be more intuitive.

We defined “meaningful” with the following metrics:

  1. Users understood the purpose of the carousel in relation to the ACLU

  2. Users engaged with more than one piece of content

  3. Users understood the purpose of each piece of content

results

lessons

My team and I had the wonderful opportunity to test out these prototypes with participants living with both no vision and low vision at VISIONS, a center for the blind.  We presented each participant with the first prototype and then the second, asking them questions to determine which one offered the most meaningful experience. 



 

 

 

 

 

 

What we discovered was that designing for screen readers is immensely difficult as people who do not use a screen reader on a daily basis. We had no idea what a “good” experience with a screen reader typically is. As a result, we were completely reliant on our participants telling us what was good. Yet, this also was difficult. Many of the participants would hesitate when sharing criticism and instead say, “oh this is a lot better than most websites I visit” or “it is so good that you guys are trying”.

 

Thus, I took the initiative and adjusted our research script so that we could help participants feel more comfortable to tell us the truth.

 

Once we were able to have participants more comfortable, we discovered some fascinating insights about accessible design. 

Mobile versus Desktop Design Differences

Furthermore, our testing revealed how dramatically different the UX can be screen readers on mobile devices are from the ones that are computer based. Participants that use computer based screen readers had more control of the device since they were able to adjust it to meet their needs and thus tended to have a better experience than those that used mobile.

 

Sadly my internship came to an end before I was able to complete the carousel design with my team. However, the experience taught me a great deal about both user experience design and research. I learned not only how to develop opportunities for accessibility but also important lessons on how to hold research studies with different kinds of participants.

other designs

In addition to conducting UX research, I got to work on a variety of design projects such as developing the system design for the social media preview designs as well as developing (both the designs and code) for the official  ACLUFoundation page!

Below you can see some of design iterations that happened to produce the final results above!