HopNav

ux research

strategy

product design

Blue banner image with logo made for HopNav project. A red location pin is in between hop & nav

Overview

For our User-Centered Design course, my classmates and I were asked to propose a design solution with a design equity theme. After brainstorming, we chose to focus on improving hospital navigation. Getting around a hospital can be a difficult experience. Hospital signs are often difficult to understand. They also assume certain levels of knowledge from patients and visitors. In this project, my team and I asked how might we reduce anxiety in the hospital navigation experience? The answer to this question was HopNav. HopNav is an accessibility-oriented, tablet-based navigation system. The intention of its design is for adoption in health-based settings. You can view the live prototype here!

my role

This project was in collaboration with three other colleagues through the HCDE Master's program at the University of Washington. We equally divided tasks during each step of the design cycle (from ideation to final prototype).

Timeline

October 2020 - December 2020

tools

Figma, LucidChart

Gif showing a walkthrough of the proptype created for this project

Discovery

Survey

To start the research process, an online survey was conducted to collect general information about people's experiences with hospital navigation. Our survey asked about participants' recent hospital visits and the tools they use to navigate through hospitals. It also asked participants to describe how they felt about navigating through a hospital. A lot of our respondents used words like "stressful" and "confusing".

Interviews & Cognitive Mapping

To gain a deeper understanding of our survey respondents' experiences, we followed up with 5 in-depth interviews. We asked questions to find specific pain points and review the effectiveness of current hospital signage. Chosen participants reported recent visits to a hospital and indicated a higher level of difficulty navigating through a hospital. We also conducted a cognitive mapping exercise with a doctor to understand how hospital personnel provide directions to visitors in a hospital.

Personas

Based on the interviews and cognitive mapping process, we set up four personas. For each persona, we identified goals and pinpoints. We referred to them throughout the entire product development process.

Image highlighting quotes from interviews conducted.

"I tend to use landmarks to orient myself when I'm in a hospital...like courtyards"

"Trying to read signs when I am stressed is hard! i feel like I'm losing my mind"

"Sometimes I worry that people in the hospital won't be able to understand me because of my accent so I just try to find my destination by myself"

"The first navigation issue I have when I visit the hospital is finding the right parking lot. It's always confusing"

"I don't mind asking hospital personnel for directions when I need to. I actually would prefer to speak to a human when I feel anxious"

"It would be nice to have an app I can pull directions from on my phone but I also don't want to have to look at my phone while I am walking around a hospital"

Ideation

Design Requirements

Through insights generated from our user research, we identified five requirements that informed our proposed design solution:

1. The solution should provide clear and concise directions.  
2. The solution should enable users to find directions/instructions for navigation without having to ask people at the hospital.
3. It should have multiple language options.
4. It should be a tool the user doesn’t have to bring or carry around in the hospital.
5. It should offer the option to speak with a real person that works at the hospital.

Sketches

Using our personas and design requirements, we began brainstorming on solutions to address the identified user needs. We explored self-driving robots, wearable technologies, and digital screens incorporated into the physical structure of hospitals. Ultimately, we decided on an application that would exist on a stationary tablet. We made this decision because it satisfied all of our design requirements while taking into consideration the scope of our project. We considered the familiarity of the tablet technology to our users. It was also the most accessible of our proposed solutions.

Idea sketching done by one of the teammates. It shows a tablet with a microphone that users can speak into. The tablet then provides directions based on user needs

Sketch by Adoniah Carmeline.
Below are sketches of solutions we considered for our project. (In order: Wall Signage by IB Sobayo, Wearable Technology Idea by Alainna Brown, NavBot by Rama Malik)

Prototype showing a wall interactive sign that users can tap anywhere to interact with and ask for directionsSketch idea with interactive watch for users to input direction requests intoSketch idea with a navigation bot that has wheels to move around the hospital and a screen with a face. Users can speak to the bot to ask for navigation assistance

User Flows

We also created user flows to understand how a user would navigate the structure of the solution. We primarily focused on how the user would ultimately seek assistance, change the application language, and find paths with accessibility needs.

Flow for when a user needs to choose paths with accessibility needsUser flow for

Information Architecture

We grouped the flow of the application into four main entry points that matched the pain-points identified in our research. The objective was to ensure that users were immediately provided with the tools they needed to navigate as soon as they opened the application. This way, they did not have to search for functionality before being able to use the solution.

Evaluation

Usability Testing

We introduced our design solution to the participants and included information about the intended use as well as any pain-points/design goals we identified during user research.

Task List

1. Try getting to Radiology through the search button and avoiding the stairs
2. Try speaking with hospital personnel through the tablet
3. Navigate to radiology and send yourself instructions
4. Sign-up for pre-visit information
5Change the language from English to Japanese

Post-Evaluation Questions

1. What was the most confusing part of the test?
2. Are there any other features you'd expect to be a part of this product?

Final Design

Gif showing a walkthrough of the proptype created for this project

‍Through incorporating feedback from our usability testing, a high-fidelity prototype was implemented along with a style guide. Animations were also included to make our prototype as close to the real application as possible.

What's Next?

1. With more time, the goal would be to test this high-fidelity prototype and build out the voice command functionality.
2. HopNav was envisioned as one component of a larger suite of navigation products since no one product can necessarily address all user needs we identified in our research.

Lessons Learned

Research works: A significant amount of the insights I found in this project were found solely through talking to users. There were several assumptions I made about users' needs that turned out to be not so critical.

Designing for a system: Sometimes identified problems exist within bigger problems. Going through this project showed me that UX research and design are simply avenues for chipping away at “wicked problems” one solution at a time.

Collaborating remotely: This project was completed during the pandemic and all our work was done remotely. I learned to communicate effectively despite never meeting in person!

back to top