Pit Stop
UX/UI Accessibility App
Pit Stop is a concept app that assists users in locating restrooms within the area. The app provides a complete detailed description of (but not limited to): location, direction, issue report, bookmarking, and level of cleanliness. In addition, the app is designed to be inclusive of people with dyslexia and/or who are visually impaired, specifically individuals with 20/70 vision and color blindness through heavy emphasis on color and typographic studies.
Team: Mikayah Arbizo, Carlos Aviles, and Emmeline Lam
My Roles: UI/UX Design, UX Analysis, Color Research, and Iconography
Timeline: 5 weeks
Tools: Adobe XD, Adobe Illustrator, and Adobe Photoshop
Visually Impaired Health Conditions
20/70 Vision
According to the American Foundation for the Blind, "[a] visual acuity measurement of 20/70 means that a person with 20/70 (impaired) vision who is 20 feet from an eye chart sees what a person with unimpaired (20/20) vision can see from 70 feet away."
Color Blindness
According to the American Academy of Ophthalmology, color blindness occurs when a person cannot see colors in a normal way. It can range from mild to severe. Depending on the type of color blindness, some people see color in a different hue, saturation, grayscale, or tint.
Dyslexia
Individuals with dyslexia have a language learning disability that interferes with their ability to correlate the letters seen with spoken sounds; as a result, this causes reading to be difficult and slowed. Additionally, struggles with memory and mentally organizing information is often common with dyslexics.
Overview
Problem
The app market for restroom apps is almost nonexistent. We as a team discover several problems:
Individuals have a hard time finding the nearest restroom, especially in an emergency.
Restroom apps are not user-friendly for users to have the full experience.
Restroom apps are not visually accessible for ALL users.
Solution
An accessible and user-friendly design for all users to find the nearest restroom with just a few taps without worries.
Research
Competitive Analysis
For our competitive analysis, we compared several various apps that allow people to search for the nearest restroom within the area. We split the analysis into two parts: UI analysis and the UX analysis.
UI Analysis: consists of design elements and principles in branding.
UX Analysis: consists of key features within the app.
User Personas
Personas ensure that our team will have a deep understanding of the target audience we are aiming for to create an exceptional product. By understanding the expectations, motivations, and concerns of target users, our product designers can create a well thought out design that will fulfill people’s needs and therefore be successful.
Design
After researching the UX/UI components, we have taken each visual element and created several icons, illustrations, and additional imagery that will follow the concept of the app. In addition, our team has calculated the color value, different outcomes through color blindness, visibility distance in typography, and line width for users who are visually impaired.
Color Palette
Each color’s y-tristimulus value is measured based on its distance from white (100) using the Classic Color Meter app downloaded from the App Store on Macintosh computers.
Accessible Color Combinations
Combinations with a y-tristimulus differential of 40 or more and a minimum luminance contrast ratio of 4.5 between the background and foreground color indicates that there is enough contrast. Luminance ratios are calculated using the Planetcalc website to distinguish how easily a human is able to recognize text or images in the foreground on a colored background.
Color Blindness Views
Using the Color Blindness simulator, we collected each viewing perspective according to each color blindness type.
Red-Weak / Protanomaly: Individuals have red cones and can usually see some shades of red. Green and blue cones function properly.
Green-Weak / Deuteranomaly: Individuals have green cones and can usually see some shades of green. Red and blue cones function properly.
Blue-Weak / Tritanomaly: Individuals have blue cones and can usually see some shades of blue. Red and green cones function properly.
Red-Blind / Protanopia: Individuals have no red cones and cannot see any shades of red. Green and blue cones function properly.
Green-Blind / Deuteranopia: Individuals have no green cones and cannot see any shades of green. Red and blue cones function properly.
Blue-Blind / Tritanopia: Individuals have no blue cones and cannot see any shades of blue. Red and green cones function properly.
Monochromacy / Anchromatopsia: Individuals cannot see any color at all. People with this color blindness see everything in black and white. Red, green, and blue cones do not function.
Blue Cone Monochromacy: Individuals have blue cones and can usually see black, white, and shades of blue. Red and green cones do not function.
Red Weak / Protanomaly
Each color’s y-tristimulus values and luminance ratios are recalculated for each combination to confirm their accessibility with each color blindness type.
Typography
A san serif font family with a medium or semi-bold weight (for body copy) provides better legibility and readability. Using italic and all capital letterforms cannot be used as it interferes with reading speed for the visually impaired and people with dyslexia.
Typography Viewing Distances (Inter Font)
Based on color, type weight, and type size, viewing distances are calculated using a formula provided by the Innovation Center for Design Excellence’s White Paper. Only the darker color (lower y-tristimulus number) in color combinations must be calculated. The following calculations are minimum (viewed at 1.5 ft) and maximum (viewed at 3 ft) point sizes that can be used for the darkest hue (#001A35).
Iconography
Outlined icons must have a minimum 2 point stroke. In order to ensure the readability of the icons, their viewing distances are calculated using the same type viewing distance formula.
Brand Identity
We discovered that multiple restroom applications have a simple logo of toilets, toilet paper, or some object that represents a restroom during the research. We collectively gathered this data and created Pit Stop’s logo to feel playful and express amusement within the object. Also, the “i” in “Pit” is a simple representation of a gender restroom sign hung on walls or doors.
Illustrations
Colors are selectively chosen within the color palette and either comply with the list of accessible color combinations or are tested to confirm the contrast differential is adequate.
User Journeys
The user journeys provide visual steps of user engagement with the app. This allows our team to see from the user's point of view how their needs have been met. Also, the team is able to detect the lowest and highest points of the app in order to make changes for better navigation.
Prototype
Ideation and Sketches
We as a team created some initial sketches of low-fidelity wireframes. We brainstorm ideas and features that would benefit user’s goals. Users are able to:
Immediately find a meant toilet under emergency circumstances
Search for nearby restrooms by using their location or entering a location in the search bar
Receive navigation directions
Report issues with toilet listings
Rate and view the cleanliness of toilets
Add toilet locations that haven't been discovered
Save toilet locations for future use
Low-Fidelity Wireframes
The low-fidelity wireframes provide an initial visualization of how the app design will be developed. This allows our team to have a print and digital concept to receive quick feedback and improve the product when testing.
High-Fidelity Wireframes
The high-fidelity wireframes give a close as possible to a true representation of the finalized design with highly functional and interactive capabilities.