January, 2018 - May, 2018

LookingBus App Redesign

Shortly before graduating from UMich, I worked with an Ann Arbor startup called LookingBus to redesign the UX of their mobile app.

LookingBus' goal is to make public transportation more accessible to blind and visually impaired (BVI) users via their mobile app and proprietary IOT technology.

Overview

• For this project, I conducted heuristic evaluations, competitive analyses, user research, market research, user interviews, wire-framing, digital prototyping, and usability testing.

• Our end product was a simple, creatively-designed, screen reader friendly, hi-fi digital prototype with a set of thoroughly-considered visual and interaction design systems.

• The final prototype design was created using Figma, and implemented for validation using HTML.

The Design Problem

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 strongly considered 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.

Heuristic Evaluation

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 matrix, click or tap the image below.

Competitive Analysis

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

Literature Review

Below are the citations for the literature that I read to gain more background on accessibility, relating specifically to BVI app development:

• Sierra, Javier Sánchez, and Joaquín Selva Roca De Togores. “Designing Mobile Apps for Visually Impaired and Blind Users.” ACHI 2012: The Fifth International Conference on Advances in Computer-Human Interactions, 2012.

• Inc., Apple. “IOS Accessibility - WWDC 2015 - Videos.” Apple Developer, 2015, developer.apple.com/videos/play/wwdc2015/201/.

• Alphabet. “Accessibility - Usability.” Material Design — Accessibility, material.io/guidelines/usability/accessibility.html#.

• Alphabet. “Making Apps More Accessible.” Android Developers, 16 Oct. 2017, developer.android.com/guide/topics/ui/accessibility/apps.html

• Alphabet. “Accessibility.” Google Drive Help, Google, support.google.com/drive/topic/2650510?hl=en&ref_topic=14940.

• Uber. “Uber Help — Accessibility.” Uber Help, help.uber.com/h/fab02244-735f-4a03-9781-201644262564.

We made sure to cover native accessibility feature integration into personal devices, as well as how 3rd-party developers address the issue.

Personas and User Journeys

Based on our interviews and research, we had three primary personas, each with a discrete and particular level of vision: fully blind, mostly blind, and partially blind. Each persona had their own levels of vision and therefore unique considerations. Below is the example of Joan, our persona that portrays a partially-blind woman.

Tap or click a tile below to view all of the personas created for this project.

Design Requirements

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

Must Haves:

• Clearly labeled 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 vision.

• 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 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 and I set out to create the UX for the LookingBus Android App. We moved from initial rough sketches to lo-fi wireframes created in Figma.

Hi-fi Prototyping V1

At this point of the project, we moved onto creating our first version of our design prototype. Here we implemented all meaningful and intended visual elements and interactions behaviors. Given my familiarity with Figma, I was the primary creator of most of our final prototype content.

Below is a prototype that was created in Figma. Full screen is recommended for detailed viewing.

Hi-fi Prototyping V2

We had a very positive response to our first prototype along with some great feedback. However, we ran into a problem: how would we test and validate our prototype and our assumptions? In its first version, while it considers how screen readers work and how BVI users analyze information, it was purely visual since Figma prototypes aren't compatible with a screen reader. It was a complex problem that we needed to find a solution to for testing.

I came up with the solution that we could export screens from Figma, and then, using my general HTML knowledge at the time, create clickable hot spots on the PNG images with "alt" tags (so that they would work with a screen reader). I exported the Figma screens onto an HTML file, and then image-mapped every relevant UI element. The pages were then hosted on my site, allowing the prototype to be compatible and testable with a screen reader.

You can view and interact with our final mobile prototype here (see note below):
LookingBus HTML Prototype

NOTE: This prototype is meant to be viewed in a mobile browser with the mobile device's screen reader turned on.

On iPhone, you can turn your screen reader on by going to Settings > General > Accessibility > VoiceOver (ON). You can view the prototype without the screen reader, although you'll lack the full experience!

Technical Design Specs

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 be 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

• 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 stay consistent with the display strategy for Android phones such as the Samsung Galaxy S8, S9, the Google Pixel 2 XL, and several other flagship Androids.

• 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 the 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 text (which is defined to be at least 14pt).

• 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.

Interaction Map

One of our deliverable documents for our client was an interaction map that details two main processes within the LookingBus app: reserving a bus ride, and in-route ride details.

Tap or click the image below to view both interaction maps in full.

Interaction Design Spec

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

Select any image below to open the full Interaction Design Spec document.

Final Thoughts

For me, this project was a huge success. It was my first time fully immersing myself into a UX project where success was determined by stakeholder satisfaction rather than a grade. I challenged myself by choosing to do a project that was centered around accessibility for blind and visually impaired users, something that I had zero exposure to prior to this. It was an excellent combination of complexity, analysis, creativity, and problem solving.

This is undoubtedly one of the most meaningful UX projects that I have had the pleasure of working on thus far in my career.