Elevating Public Transportation
for Blind and Visually-impaired Users
at LookingBus

Overview

As the lead designer for my capstone UX project at the University of Michigan, Ann Arbor, I helped empower Blind and Visually-impaired (BVI) Users to use the Ann Arbor public transit system by designing, researching, and testing an award-winning mobile User Experience.

LookingBus is an Ann Arbor start-up that uses their proprietary Internet of Things technology to uplift BVI users through easier, more useful access to technology and transportation. In partnership with them, we identified that most apps aren't designed for Blind and Visually-Impaired Users. They do not account for the unique set of a BVI user's visual limitations, behavior patterns, physical tendencies, mental models, information hierarchies, and screen reader usage.

Thus, we deeply evaluated the BVI experience and perspective in designing the LookingBus User Experience. Every single element — from app navigation to route search, from ride booking and in-route information — was highly optimized for screen readers and the BVI User.

UX Research

We took a very considerate and thorough approach to our research. My team and I had little prior experience with UX design of this kind, so we ensured that we thoroughly understood the experience and problems faced by BVI users. Our research included user interviews, literature review, heurestic evaluations, and competitive analysis.

Heuristic Evaluations

For our heuristic evaluation, we had multiple sessions using screen readers with Android, the then-version of the LookingBus app, and various other mobile apps. We also adapted certain Nielsen-Norman metrics for the context of the screen readers and the BVI user. To see the full Heuristic Evaluation matric, the below image can be expanded on tap or click.

Literature Review

The citations for the literature we read and analyzed for our background research:

Competitive Analysis

For the competitive analysis, we looked at a variety of products, each with their own interesting design approach with regards to either transportation or BVI users. Some of what we looked at included Google Maps, Uber, SeeingAI, BlindSquare, et cetera. To see the full competitive matrix, the below image can be expanded on tap or click.

Personas and User Journeys

Based on our interviews and research, we had three prime personas, each with a discrete and particular level of vision: fully blind, mostly blind, and partially blind. Each personas had their own different levels of vision and, thus, their own unique considerations. Below is the example of Joan, our persona of a partially-blind woman. The documents below expand on tap or click.

Design Requirements

From our extensive research and understanding, we created three sets of design requirements for our User Experience. They are as follows:

Must Haves:

  • Clearly labelled buttons for screen readers to interpret and output to users

  • Clear system state conveyed, especially for when the system closes down.

  • Clearly defined start states and end states for all actions in the app.

  • A well-considered information hierarchy that takes into account how screen readers interpret UI content and information.

  • Support for the user during every stage of their commute.

Should Haves:

  • UI content and elements based on strong design convention.

  • High-contrast text and UI elements for BVI users with some degree of vison.

  • An onboarding process that is tailored to different persona types.

Nice-to-Haves:

  • A highly detailed set of instructions for any ‘reservation:’ Currently, the application does not specify what a reservation is, nor what a reservation entails. Having a highly-detailed set of instructions for a each reservation ensures that mostly and fully blind personas have full knowledge of their reservation.

Sketches and Lo-fi Wireframes

With all the research and requirements in mind, my team set out to create the UX for the LookingBus Android App. We moved from initial rough sketchs to lo-fi wireframes created in Figma. The documents below expand on tap or click.

Hi-fi Prototype Mk I

Then, we moved onto creating the first version of our design prototype. Here we implemented all meaningful and intended visual elements and interactions behaviors. The following prototype was created in Figma:

Hi-fi Prototype Mk II

We had a very positive response to our first prototype alongwith some great feedback. However, we came into a little hitch: how would we test and validate our prototype and our assumptions? In it's first version, while it considers how screen readers work and how BVI users analyze information, it was purely visual, and the Figma prototype wasn't compatible with a screen reader. It was a complex problem, and one that we hadn't encountered in our project and work experiences. Yet, our solution was rather creative and clever. We exported the Figma screens onto an HTML file, and then we image-mapped every relevant UI element. We would then load the HTML on a mobile internet browser and, voilà, our UI was successfully compatible with a screen reader.

Visual Design Spec

Our visual design spec was thoroughly considered, and it was crafted with care and patience. I took the lead in the ideation, designing, and execution of this and the other two design documents. A bulleted list of the visual design specifications can found below.

  • For the grid system, we chose an 8pt system. All icons, typeface fonts, spacing, gutters, etc. are set according to this grid system. The 8pt grid system was chosen for the sake of UI consistency and a few other reasons detailed here.

  • For our screen design, we used an aspect ratio of 18:9. It was a conscious decision to not use the traditional 16:9 aspect ratio: this was done to be stay consistent with the current mobile display trend towards taller phones,, that’ve been set by the Samsung Galaxy S8 and S9, the Google Pixel 2 XL, and several other flagship Android phones.

  • For our typeface, we chose to use Cabin. While we had initially chosen Nunito for it being sans-serif and curved vertices, we eventually ended up with Cabin for its high readability between certain characters like lowercase “L” and uppercase “I”

  • Most text has a minimum 18pt font size. This is to aid readability. And, text font goes all the way up to 36pt for page titles.

  • The only Cabin styles in use are Bold, SemiBold, and Regular, and they are used in descending order of information importance. No other styles are used in our design. We wanted to keep the design from being too nebulous, and styles such as Italics or Light are thought to negatively impact text readability.

  • The main color of UI elements is a denim blue. The hex value is #1756D4. All main interactions buttons and other actionable UI elements are painted this particular shade of blue. This color was picked from the official LookingBus website. For the benefit of readability, we checked combinations of this denim blue background through the WCAG 2.0 requirements for color contrast, and we ensured it passed the WCAG AAA standards for large test (which they define as at least 14pt). Save for, of course, black and white, there are no other colors in use.

  • The app uses the standard Material Design convention of a hamburger menu: it is used for navigation within the app (say, to settings, profile, help, contact, etc,). We strongly decided against bottom-panel navigation and tabbed navigation. This was done to highlight the singular main process of the app, that is to book a bus ride.

  • The app, in its current state, does not make much use of the three-dot menu (“more options”) and drop-down menu convention. The innate nature of these menus is such that they allow enable further information and actions to be nested underneath a button for a cleaner UI. However, this creates a trade-off between an additional UI element and added functionality and, given the nature of how BVI users and screen readers interpret information, we chose to create a less cluttered UI. We designed the interaction flow and information layout and such to not take much use of these menu systems.

Interaction Map

One of our final deliverable documents was an interaction map that details two main processes withing the LookingBus app: reserving a bus ride, and in-route ride details. The interaction maps below expand on tap or click.

Interaction Design Spec

The following pages showcases a well-considered and professionally-rendered design document that details every meaningful interaction between the UI and user and screen reader.

Outcomes

  • My design and research efforts at LookingBus directly empowered Blind and Visually-Impaired users to utilize the Ann Arbor public transit system.

  • Many BVI users noted the thoughtfulness of the design and the compatibility of the UX with their needs.

  • The project won the Diversity, Equity, and Inclusion (DEI) Award at UMSI ExpoSItion 2018.

  • The project won the Best UX Capstone Project Award 2018 at the University of Michigan, School of Information.

The University of Michigan School of Information
— Best Capstone Project Award

LookingBus
Bharat Raj Nair

•
Check out more UX work
How I improved the Threat Monitoring Dashboard for IBM Security →
Deliverables

Personas • User Journeys • Heuristic Evaluation • Wireframes • Screen Reader Flow Documentation
• Interaction Design Spec • Hi-fi Figma Prototypes • Dev Handoff Document

LinkedIn →

@BharatRajNair

E-mail →
bharatnair15@gmail.com
Résumé →