NavIndor

Overview

People with visual impairment usually face some difficulty and frustration while navigating in indoor environments. They may experience confusion in identifying where they are in a building and how to get to the place where they want to go. The current market does not offer adequate technology resources used to help people with visual impairment navigate indoors. Our project scope hopes to offer a solution that can increase our user's independence with their mobility and their confidence level in navigating through unfamiliar terrain.

Design Goal

People with visual impairment access information differently from those with sight. The user interface therefore, had to be accessible for our target users to be able to use. 

The Solution

NavIndor is a mobile app that assists people with visual impairment to navigate through indoor environments independently. This application functions by pairing with Beacon systems and Wi-Fi based indoor localization technologies to map out floor plans in buildings, translating this information to visual and audio cues to our users.

01 Research

Interviews

User Journey Map

We focused our user journey map on our persona Greg Wernicke. While we adhered to our user research, some assumptions were made about our user’s feelings due to time constraints. We focused on communicating auditory and tactile descriptions to provide a richer user experience. The user journey map allowed us to identify specific areas of Greg’s routine where he had high levels of frustration. This helped us further focus our design to target those specific areas.

02 Design

Design Requirements

Storyboards

With an understanding of our solution’s design requirements, we independently created storyboards to ground potential design solutions in specific contexts. We storyboarded different keypath scenarios with divergent solutions and iterated upon our user’s emotions while using these potential solutions.

Information Architecture

While storyboarding allowed us to identify a direction and focus for our design solution, the information architecture allowed us to envision the detailed functionality of our design. With an understanding of what we wanted to make, we outlined the hierarchy of information between each component of our system. This gave us the basis for our prototype.

03 Prototype

Paper Prototypes

In order to create our paper prototypes, we used the hierarchy from our information architecture to design our interface. Three key goals were emphasized throughout the entire process: one, our users would be able to navigate to a specific indoor location, two, our users would be able to manage their points of interests, and three, they would be able to explore the locations in their surrounding. These low fidelity prototypes allowed for interaction between each interface screen. We then conducted usability testing with our prototype based on the completion of the three tasks and improved upon our initial designs through feedback.

Usability Testing

For the purpose of testing the usability of our paper prototype, we conducted four simple evaluations. We invited our users and asked them to complete three key tasks. This allowed us to observe where we succeeded and fell short. We implemented the feedback from these evaluations into our wireframes.

In order to receive more feedback on our design, we presented our paper prototype to Hadi Rangin, an accessibility specialist at the Accessible Technology Center and Do-IT at the University of Washington. Hadi is also visually impaired so his feedback was particularly beneficial for our purposes. We implemented his key feedback into the annotated wireframes and in our final high fidelity mockup.

Wireframes

Annotated wireframes are to show the overview of purpose and functions of the product. With the feedback we received from our experience evaluations and from Hadi, we created our annotated wireframes which showcased our app’s functionality. Some of the elements we explored in our wireframes were text sizes, text/background color contrasts, and other visual aspects. This helped us envision our final product, and the improvements we could make to our interface.

High-Fidelity Mockups

With the design of our system fairly settled, we created high-fidelity mock-ups to capture the look-and-feel of the app as if it was ready to ship. We enriched interactivity so buttons and links could be selectable and user action could be met with responses. We refined our visuals: thinking about spacing, visual hierarchy, and typography. We also completed the content so that text and visuals would be as close to what would be seen realistically. Because our app relies on screen readers like VoiceOver, we needed to make sure all of our non-text elements had labels that could be interpreted.   

04 Reflection

Looking back on our design, we had several areas where we saw room for improvement. One such improvement is giving our users more autonomy when using the product. For example, our users could set the radius for “Around Me” to widen or limit the range of landmark locations received. Another aspect we could have worked on is letting users choose between voice feedback or haptic feedback when pressing buttons.

The most surprising thing we came across was that sometimes designing too much can be harmful. We have learned that making assumptions about what our users think or feel without the support of research, although remarkably easy to do, actually pushes us away from the people we are designing for. Designing for people with visual impairment, we gradually understood the importance of maximizing our signal-to-noise ratio, the appropriate amount of functions in accordance with our users, which could be applied to countless other design projects. As user-centered design practitioners, our priority is to advocate for our users.