Under University of Michigan - College of Engineering
Bluepath: An Application for the Visually Impaired
June 2018
Role
UI/UX Designer | Brand Designer
Frameworks Used
Contextual Interviews, Secondary Research, Expert Interviews, Auto-ethnography, Competitor Analysis, Personas, Concept Walkthrough, Wireframing, Prototyping, Co-design, Design Validation
Context
253 million people are visually impaired. Of this total 36 million are blind and 217 million have moderate to severe vision impairment (WHO) and these numbers are expected to increase. How might campuses, as well as eye centers, and other public spaces ensure accessibility and ease of navigation for visually impaired individuals?
Solution
The solution was a research project with 4 engineers and 3 designers to create an Android application that is accessible and inclusive to users of all forms of visual impairment.
Key Outcomes
80%
of users understood the instructions from the app
80%
of users were able to navigate through the app easily
100%
of users understood the audio outputs for elements on the app
Discovery
Key Challenge
How might campuses, as well as eye centers, and other public spaces ensure accessibility and ease of navigation for visually impaired individuals?
Approach: Interviews & Current Context
The designers started with getting feedback of the limitations of the previous app made by the 2017 team. Additionally, we were wondering whether there should be a change made from a smartphone application to a haptic device specifically for the project's purpose. A user walkthrough and contextual research was done with users interacting with the previous app.
1. Users do prefer the app on a smartphone device
2. The app does not detect obstacles on time
3. There are delayed directions
4. Users are not informed when they missed their destination
5. The app has unclear speech command
6. The touch screen of the phone does not provide enough feedback.
Indoor Navigation Insights
Challenges: Room Numbering Patterns, location of Braille inscriptions near rooms, location of elevators and stairs, obstacle detection
Interaction: Siri, app folders, voiceover speed, horizontal orientation for phone
Solutions: Audio, Echolocation, asking a person nearby, sticking close to walls, cane
Desired Features: Distance to location (in ft.), Distance orientation, specify bathrooms, information on multiple entries for a room, combination of audio+vibrating signals
Define
Who is our application for?
Based off of our user research, we developed personas to understand our users’ goals, frustrations, and motivations to use the application. This was important because we used these personas to develop our design requirements.
Process Flow
Part of defining Bluepath was also understanding what tools were available in the market to develop this application.
IndoorAtlas , a software developer's kit (SDK) uses geomagnetic signals from the user's position in relation to the Earth's magnetic field and sends these signals with the help of magnetic sensors that exist in one's smartphone device. The SDK works because each architecture has a unique geomagnetic makeup to it, which makes sending and receiving signals easier via WiFi.
To help make the application more accessible to users, we decided to have both audio and text input along with IndoorAtlas’ own input in order to provide both audio and haptic cues on how to move between indoor spaces.
Develop
Remember we uncovered some insights on desired features for the application? Part of our team’s decision-making was to understand how to incorporate users’ desired features into the application.
We decided that besides the navigation, we would create an onboarding procedure that would allow for users to select their desired settings.
Low Fidelity Prototypes
Using Balsamiq, we developed low fidelity prototypes to help understand the types of screens that we would need and how to assist the engineering team in the back-end.
Deliver
As we moved from low fidelity to high fidelity, we initially used colors that were used by the previous team, given that the application was intended for users with complete visual impairment.
However, we realized that if we wanted to cater towards a wider audience within the visually impaired demographic, we needed to make the application available for partially visually impaired users as well as the legally blind users. In order to do this, we needed to change the color schemes to combinations of black, white and yellow. Additionally, for these visually impaired users, it would make sense to simplify the number of steps shown on the screen.
Here is a sample of our app's design specs when the application is using black on white. Other variations included white on black, black on yellow and yellow on black.
Inclusive & Back-End Development
We made some more alterations based on:
1. Color Schemes
We wanted to add more options to the color schemes so people can personalize their app in some way or the other.
2. Number of steps on the screen
This helps in terms of focusing on the main step and making sure it is clear to the user which step they are currently on
3. Number of steps we could show on the screen
This could not be incorporated as the software tool kit we were using could not predict steps ahead of time.
4. Estimated Time
As we could not predict the steps ahead of time, we could also not predict the time beforehand.
5. Saving Locations
Instead of saving a location, we decided that having a list that auto-populates would serve better as it would reduce the number of interfaces that would be needed, and therefore would reduce the number of steps it takes for the user to input their desired destination.
6. Settings Interface
To match Android's interface
Branding
Our app icon was a nod to the previous design made by our predecessor team using the blue. However, we wanted to simplify the logo and use the "B", both for the building's name we were testing the app in (Bob and Betty Beyster Building at the University of Michigan) and for "Bluepath". Having the arrow and the two dots were indicators to it being an app for wayfinding and navigation, as part of its brand identity.
Evaluation
Location & Feedback Is Critical
While the app was in development for more research, we wanted to be able to implement in buildings that visually impaired individuals would travel to more (for example, the Kellogg's Eye Center at Ann Arbor) so this could potentially go into the market. However, lack of access to the buillding's blueprints as well as time prevented as to extend the project any further.
Additionally, we still required more fine tuning of the UI, as well as the technical components of the application. For example, accurately reading the user's location and sending feedback instantly so the user knows if they have passed their desired destination or not.
Key Learnings
Building an Inclusive Application
This was the first foray into creating an inclusive application, for users that have very different needs from the “average” user.
However, it provided me the ability to use a wide range of research tools to build empathy and understand how users of different abilities adapt to the world around them. I learned from experts who allowed the team to open up to a wider audience for the app and co-designed with multiple stakeholders too.
I performed field tests and user walk-through exercises to test the app and tweak the design specifications as needed, collaborated with engineers to understand how the back-end would inform the front-end of the application and communicated our project’s social, technological and business relevance to external partners.