Accessify UI Design

The Overview

October 2017
Completed for Dubhacks 2017
Role: UX & Visual Designer

The Problem

Students with disabilities at the University of Washington often download multiple google chrome extensions just to make websites usable. This is true across a variety of disabilities and includes adding alternative (alt) text to images, changing fonts, and screen readers.

The Solution

Our team created a google chrome extension and API. Together, these address multiple issues that those with disabilities experience while on websites. It requires the user to only download one google chrome extension and pick and choose which settings, or modifications they wish to utilize.

The google chrome extension allows users to modify different websites. It currently does not utilize the settings page and simply addresses all disabilities at the same time. Some of the aspects of websites it addresses is;

  • Changing the background to white
  • Changing the text to black
  • Changing the text to Verdana
  • Adding more space between lines of text
  • If a paragraph is too long, summarizing it
  • Adding alt text to images without alt text

The API takes large bodies of text and summarizes them by using the first, last, and another important sentence from a paragraph. The API also takes images without alt text and provides alt text for them using the Microsoft Vision API.

The code for this project, can be found here.

The Process

Over 24 hours our team went through research, ideation, coding, and presenting.

Research

A friend who works with disabled students suggested we pursue a project around accessibility. One of the main issues they brought up was that students were downloading multiple google chrome extensions just to make websites usable. We decided that we wanted to create a google chrome extension that made websites usable for a variety of different users. However, we weren't sure what made websites accessible.

Specifically, our team was interested in investigating the overall stickiness of the site. We wanted to find whether Eventbrite encourages users to stay on the site and browse, and what could be done to improve the overall stickiness of the site.

We then took this research and created two personas, Emily Scott a dyslexic high school student, and Addison Earl a blind college student.

Ideation

We decided that we wanted to create a google chrome extension because we felt it would be most convenient to our user base. We also decided that this chrome extension should be able to address issues for all of the different disabilities. In order to do this, we decided to create profiles with pre-set settings for different users based on the research. We identified which do’s and don’ts from the research we could address. The other designer and I then moved to sketching the information flow and the settings page layout while the developers were working on the API and how to alter the html of different sites.

After we sketched out the information flow and had established a basis for the design of the settings page, we started working on the prototype in Adobe XD and Adobe Illustrator. We struggled with color choices for a long time because we were trying to balance aesthetic with accessibility. This meant we had to have contrast between the background and text, no bright colors, and still have it look nice. We eventually decided on an orange and kept the color palette simple with only orange, white, and dark grey. Other than that, most design choices were simple. We were sure we wanted large buttons for those with physical disabilities, and that we wanted short but informational descriptions for those with dyslexia.

the protoyped settings page

Coding

After completing our prototype, our team moved towards coding everything and presenting our project. I did not participate in the coding of our project, and instead focused on the slide deck, the presentation, the write up, and submitting our project.

The other members of my team worked on finishing the API, the google chrome extension, and the settings page.

Presentation

Reflection

I enjoyed the topic of this project, and it was interesting working with developers, as I haven't had much experience working with other disciplines. In the beginning, Oorja, the other UX designer, and I had to convince the rest of our team to start with research and the user, rather than starting with what technology was interesting. This took awhile, but when we showed them the research we had found, they started to understand and got excited.

Currently, the google chrome extension does not utilize the settings page. Instead, it has all of the settings turned on, all the time. If we had more time, we'd have linked the setting page to the program, so users can pick and choose which modifications they need or don't need.

Team Members

Evan Frawley

Evan Frawley

Developer

Helena Merk

Helena Merk

Developer

Ishan Saksena

Ishan Saksena

Developer

Oorja Chowdhary

Oorja Chowdhary

UX Designer & Developer

More Projects