Accessibility App Prototype

Project Brief

“What we have are a few people who know a lot about Accessibility. What we need are a lot of people to know a little about it.” —Matt May, Adobe

Background

To gain a deeper understanding of UX/UI design and industry-standard prototyping software, you’ll design an app for web, desktop, iPad, phone, or watch based on one of the following given project briefs. As a group, you'll present research on the needs of your users. Then, individually, you’ll design your own app. You'll consider the structure of the app through a user flow and wireframe and create a UI kit based on your own custom branding. You’ll then use a prototyping tool to produce a simple interactive prototype. Each of these app concepts deals with accessibility in some way.

Why Design with Accessibility in Mind?

The curb cut effect shows that what is good for one group can have great benefits for all. The dip in the curb of the sidewalk that allows a wheelchair user to travel independently also makes it easier for people with bikes or strollers to travel more easily.

Captions on a video are useful not just for deaf or hard-of-hearing viewers, but also for people in a loud room or who are not native speakers of the language. Proper color contrast in a design is useful not just for color blind people, but also for people in harsh light—think about how washed out a screen gets when you sit in the sun. An online form that can be navigated with just a keyboard is useful not just for someone with a screen reader but also for someone using one hand to hold something like a drink, pet, or child.

Prompt

Choose one of the 3 project briefs listed below. Each brief provides suggested names and a general app goal. In the readings and resources section, you'll find a list of inspiration and background research for each prompt. Although a full app design might consist of dozens or hundreds of screens, you will only be designing 10-20 distinct screens of this app concept for this project. Focus on the most interesting or important aspects of your design and your concept. Note: the sign-up or log-in process is usually pretty boring, but it might be interesting if you have a highly customizable app. Remember, this does not have to be for the phone! Use whatever prototyping tool you prefer for your design, including Adobe XD or Figma.

Process

• Group Research Presentation
• User Flow + Style Tile
• Wireframe, UI Kit, & Branding
• First Finish Prototype 
• Final Prototype

Briefs

Review the following three briefs and select one to work with. 

1. Local Event Guide with Filters. Possible names: impromptu, fomo, spur, ticket

The goal of this app

This app addresses the problem of finding events (concerts, festivals, theatre performances, etc.) and spaces that are accessible. A great deal of planning is often required when someone needs an accommodation. Someone may need to ensure an interpreter will be present. Someone may also need to conduct extensive research to make sure stairs won't be the only way to access the event space, or that there is accessible transit to and from the event. Someone may need to be sure there will be bathrooms (not just portable toilets) at the event. The goal of this app is to allow for spontaneity, so that everyone can quickly find an activity they can do or an event they can attend without requiring extensive pre-planning. A primary feature of this app should be a filter system so users can search based on their interests as well as needs. 

This app might include

• A web, tablet, or phone app
• Robust user preferences
• A filter system to sort by needs or topic
• A search system
• A ranking or rating system

2. Indoor Navigation App. Possible names: atlas, trace, perspective, vicinity

The goal of this app

A variety of apps like google maps and waze exist to provide turn-by-turn street directions and maps. But these apps that rely on GPS are seriously lacking when it comes to helping with navigation of indoor spaces. It can be extremely difficult for anyone, but especially blind and low-vision people, to navigate an unfamiliar building. Consider the last time you tried to find a new class or meeting in an unfamiliar building, or tried to find a specific store in an unfamiliar mall. Certain types of architecture may need to be explained (what exactly is an atrium?). The app may need to explain unexpected numbering of rooms or point out department locations. Consider things like stairs, elevators, bathrooms, and emergency exits. How do we get context in the space? Consider how "you are here" works on a map. You might focus your app design on a specific location such as a campus building, a transit hub, or a museum.

This app might include

• A phone app 
• An app for wearable tech like a smart watch or glasses
• A supporting set of physical wayfinding devices or designs
• A focus on audio for people who don't want to or can't look at their phone while they walk
• A high-contrast and/or adjustable size map
• Step-by-step directions
• Alerts
• A filter system to select route options
• A rating or reporting system

3. Plain Language Translation App. Possible names: gist, clarify, brief, sum-up

The goal of this app

The goal of this app is to provide a translator for unusual or specialized words and phrases. Certain cognitive disabilities make it difficult to understand figures of speech, idioms, and complicated metaphors. Complex language can also be a problem for non-native speakers. This app would translate problematic terms and phrases into plain language. How might a user understand what is meant by an idiom like "it's raining cats and dogs" or by technical jargon found in a textbook or professional conversation? Perhaps the app could translate other forms of non-literal meaning. What might be meant by an eggplant emoji? What is the difference between a text that says "k" with no punctuation and "k." with a period?

This app might include

• A browser plugin, desktop app, or phone app
• a way to copy and paste content for translation
• A camera for translation of printed text
• Audio input for use during lectures or conversation
• Search function
• Way to save and organize past entries

Learning Objectives

Through this project, you will learn to:

• consider the needs of diverse users
• justify your design decisions with research
• translate an app concept into a user flow, wireframe, and high-fidelity prototype

Deliverables

An app prototype is the final stage of design for an application or program before it is coded. It shows how a user will navigate the process of using the app, and the interface they will use. To create your prototype, you'll use your branding and UI Kit to fill in the basic outline of your wireframe. 

Your prototype should include:

• 10-20 distinct screens. The meaning of a "screen" may vary based on your app's format (web, desktop, iPad, phone, watch, etc.). Focus on the most interesting or important aspects of your design and your concept. 
• Actual text, images, colors, and other elements from your UI Kit.
• (Optional) Depending on time and your particular idea, consider micro-animations and active links for at least the main user flow.
• (Optional) Include designs for supporting external devices or printed materials

You'll submit:

• a link to a completed prototype.
• PDFs or high-res jpegs of ALL your screens in order of your user flow. (Any screens not directly part of the user flow can just go at the end.) Name them with your name and your app name, like jsmith_appname_screens.pdf or jsmith_appname_screen1.jpeg
• Mockups of your app in a realistic (e.g. in a phone) or abstract (e.g. a rectangle screen on a color background)
• A video walk-through of your app prototype with a clear, step-by-step process highlighting your user flow. You can provide audio commentary or show off important features. Note: If you include spoken audio in your walkthrough, be sure to add captions wherever you will display your video. Platforms like youtube support auto-captions that can be shown or hidden by the user. You can add your own permanent captions in a video editing program. If you include music in your walkthrough, keep it soft in the background so it isn't startling or distracting.

Readings/Resources

Background: The Importance of Accessibility

• Curb Cuts Article and podcast episode from 99% Invisible
• How the ADA Changed the Built World | Crip Camp | Netflix on Youtube
• What is Accessibility? Video by Annie Elainey on Youtube

Inspiration for Local Event Guide with Filters

• Access Earth
• Meetup
• EventBrite

Supporting Research for Local Event Guide with Filters

• In the City, Apps Help and Hinder Accessibility article from the Atlantic
• Inside the World of Concert Sign Language Interpreters article from Vice
• Accessible Meeting and Event Checklist from Cornell University
• A Planning Guide for Making Temporary Events Accessible to People With Disabilities from the ADA National Network

Inspiration for Indoor Navigation App 

• NavCog
• GoodMaps
• Google Indoor Maps
• Waze

Supporting Research for Indoor Navigation App 

• A New Way to See: Looking at museums through the eyes of the blind from the American Alliance of Museums
• White Canes and Guide Dogs: What's Actually the Difference? podcast and transcript from the Be My Eyes podcast
• How I grocery shop as a blind girl by raegreen135 on TikTok
• How Blind People Travel by James Rath on youtube
• 7 smart tech developments for people who are blind or have low vision from Microsoft
• Eye Disease Simulations from the National Eye Institute
• Vision Simulations (edit an image to simulate common visual issues)

Inspiration for Plain Language Translation App 

• Google Translate
• Hemingway App
• Datayze Readability Analyzer
• Grammarly

Supporting Research for Plain Language Translation App 

• Check comprehension level article from the a11y project
• Simple Write app from XKCD, inspired by the Thing Explainer: complicated stuff in simple words book by Randall Munroe that takes plain language to the extreme by using only a vocabulary of the 1,000 (or "ten hundred") most common words.
• An Introductory Guide to Understanding Cognitive Disabilities from Deque Systems
• PlainLanguage.gov, a group working to promote plain language for all government communications
• Readability guidelines as explained by W3C Working Group. See specifically their explanations of reading level, unusual words, and abbreviations. 
• Legibility, Readability, and Comprehension: Making Users Read Your Words from Nielsen Norman Group. This article explains the difference between legibility—which is related to design—and readability—which is related to the content. 
• Simple English Wikipedia, which uses fewer words and grammar that is easier to understand than the ordinary English Wikipedia.
• No More Periods When Texting. Period. New York Times article 
• EmojiPedia, an online encyclopedia of emoji and their cultural meanings

General Resources

A real design project, especially one focused on accessibility, should incorporate diverse voices and stakeholders (people impacted by the design) on the team. It should also include real user research: conversations, surveys, and testing with real people who would benefit from the project. An important motto in the disability community is, "Nothing about Us Without Us". It's important to avoid assumptions, trivialization, or patronization of users. Due to the constraints of this course and the fictional nature of this project, we'll work from pre-established research (listed below). If possible, you are encouraged to reach out to experts, speak to real stakeholders, and conduct your own supplementary research. Remember that you have your own voice and unique perspective, as well. 

Accessibility User Personas

A user persona is an example user meant to represent a large group of real people who would use your app. Personas can be problematic in that they can reenforce stereotypes or lead to over-simplification. However, the following pre-existing personas are based in accessibility research and can provide a bit of insight into these fictional users' accessibility needs. Feel free to use these as personas for your app. 

• Stories of Web Users from the Web Accessibility Initiative 
• Accessibility Personas pdf by Alicia Crowther + Mark Boyes-Smith, from Bringing inclusive design to life through Personas on Medium
• Personas with Disabilities by Sheri Byrne-Haber, CPACC on Medium 

Accessibility & Accessible Design Resources

• Temple's TechOWL PA, Pennsylvania's designated Assistive Technology Act Program.  There are tons of amazing resources on the TechOwl Website and on their TikTok. They also lend and create assistive technology and devices. 
• Disability Impacts All of Us infographic from the CDC
• DisabilityStatistics.org
• Philadelphia has highest rate of disability among large U.S. cities (2018 PhillyVoice article)
• The a11y project

Reflections

This particular project was conducted over 6 weeks along with other in-class exercises and tasks. The limited amount of time prevented a full design cycle. The project would be stronger with more time for students to conduct more independent research, engage with members of the disability community and University experts on disability and accessibility, and to test and refine their app prototypes. This project would benefit from guest speakers and might work well as a team project.