SYDNEY SWANSON


Wayfinding Solution: Helping Visitors Navigate a Health Care Facility


Business Goals
Wireframes
Final Design
Live Product
Reflection

For this project, Sharp HealthCare wanted to improve upon the existing, vendor-supplied wayfinding system in place at one of their facilities. I led the design process to make a digital directory that aimed to clearly navigate users to their goal location(s). In addition, I made sure to communicate directly with the client during the process to ensure that client needs were met, as well as to speak with the developer early on to determine technical scope.



ROLE: UX Designer

TIMELINE: 5 Months

TOOLS: Axure, Sketch, Zeplin

TEAM: A Product Manager, UX Designer (Me), UI Designer, Content Strategist, Full Stack Developer, and the Client



Determining Business Goals





The client for this project wanted to utilize a wayfinding solution similar to one that had already been implemented at another location. However, as the previous system used a vendor product, there was very little customization and quite a few usability issues with the design. My challenge was to create a new design that still accomplished the user goals of navigating to the correct department location, yet addressed the issues with the prior product.



HEURISTIC EVALUATION - IDENTIFYING ISSUES



After analysis, I reported that the vendor product failed to meet the following heuristics:

  1. Findable - The search icon is the prime example here, as it is located at the bottom center of the screens, in close proximity to a long line of unrelated text. Because of this, the information hierarchy of the elements is lost.
  2. Usable - A good example of where this falls short is on the department listing pages. The pages are set to a timed cycle between the floors so a user can only view one floor at a time with no way to navigate through them at will.
  3. Valuable - My initial inclination was that users did not interact with wayfinding systems to discover inspirational doctor quotations, so I argued that including the quotations added no value to the user and interfered with conveying the most important information up front: doctor locations.


HEURISTIC EVALUATION - IDENTIFYING ISSUES



After analysis, I reported that the vendor product failed to meet the following heuristics:

  1. Findable - The search icon is the prime example here, as it is located at the bottom center of the screens, in close proximity to a long line of unrelated text. Because of this, the information hierarchy of the elements is lost.
  2. Usable - A good example of where this falls short is on the department listing pages. The pages are set to a timed cycle between the floors so a user can only view one floor at a time with no way to navigate through them at will.
  3. Valuable - My initial inclination was that users did not interact with wayfinding systems to discover inspirational doctor quotations, so I argued that including the quotations added no value to the user and interfered with conveying the most important information up front: doctor locations.


HEURISTIC EVALUATION - IDENTIFYING ISSUES



After analysis, I reported that the vendor product failed to meet the following heuristics:

  1. Findable - The search icon is the prime example here, as it is located at the bottom center of the screens, in close proximity to a long line of unrelated text. Because of this, the information hierarchy of the elements is lost.
  2. Usable - A good example of where this falls short is on the department listing pages. The pages are set to a timed cycle between the floors so a user can only view one floor at a time with no way to navigate through them at will.
  3. Valuable - My initial inclination was that users did not interact with wayfinding systems to discover inspirational doctor quotations, so I argued that including the quotations added no value to the user and interfered with conveying the most important information up front: doctor locations.


IDEATION - ADDRESSING ISSUES



When brainstorming designs, I prioritized fixing the usability issues I had reported:

  1. Findable - I thought about how users might want to navigate through the screens, and designed clearly marked controls that would allow users to navigate as needed.
  2. Usable - After researching examples of other directories, I concluded that giving users the option to view departments both by floor and alphabetically would help satisfy the unique user needs.
  3. Valuable - By focusing on the main goal of finding a department or doctor's location, I was able to create a distraction-free design optimized for efficiently getting users to where they needed to be (digitally and physically).

In addition to usability issues, I also addressed the color scheme. The yellow and green did not fit with Sharp's brand identity, so I opted to stick with primary brand colors, and only use those colors to highlight action items or improve readability.



UX Design to Create an Ideal Solution





Now that my initial analysis research was complete, I worked on wireframing a wayfinding solution that was both usable and delightful.



Wireframes - FIRST ITERATION



I drew out some initial ideas for how users would navigate through the screens while keeping in mind that the design needed to be wheelchair accessible. I found it challenging to keep the interactive elements in the bottom half of the screen while also providing users the flexibility of navigational control.


After my first take, I still had some questions:

  • How would a search function operate effectively? Are there any alternatives to search that allow a user to find their doctor quickly?
  • How should the alphabetical view be organized to reduce user error (i.e. mismatch)?
  • Is there a way to incorporate doctor quotations without distracting from usability?


Wireframes - FIRST ITERATION



I drew out some initial ideas for how users would navigate through the screens while keeping in mind that the design needed to be wheelchair accessible. I found it challenging to keep the interactive elements in the bottom half of the screen while also providing users the flexibility of navigational control.


After my first take, I still had some questions:

  • How would a search function operate effectively? Are there any alternatives to search that allow a user to find their doctor quickly?
  • How should the alphabetical view be organized to reduce user error (i.e. mismatch)?
  • Is there a way to incorporate doctor quotations without distracting from usability?


Wireframes - FIRST ITERATION



I drew out some initial ideas for how users would navigate through the screens while keeping in mind that the design needed to be wheelchair accessible. I found it challenging to keep the interactive elements in the bottom half of the screen while also providing users the flexibility of navigational control.


After my first take, I still had some questions:

  • How would a search function operate effectively? Are there any alternatives to search that allow a user to find their doctor quickly?
  • How should the alphabetical view be organized to reduce user error (i.e. mismatch)?
  • Is there a way to incorporate doctor quotations without distracting from usability?


WIREFRAMES - SECOND ITERATION



After feedback from other UX designers at Sharp HealthCare, I created a second set of wireframes addressing the questions that had come up before.

  • Instead of a search function, an alpha-selector would provide quick usability in a static view (instead of having a keyboard pop up).
  • By applying zebra striping to the alphabetical department list, user error is reduced.
  • Placing a carousel of doctor quotations on the home screen places unnecessary information outside of the wayfinding user flow

I prototyped my wireframes to present the system functionality to the client, while the UI designer applied Sharp branding and design treatments to propose a look and feel to the client.


Link to Prototype

WIREFRAMES - SECOND ITERATION



After feedback from other UX designers at Sharp HealthCare, I created a second set of wireframes addressing the questions that had come up before.

  • Instead of a search function, an alpha-selector would provide quick usability in a static view (instead of having a keyboard pop up).
  • By applying zebra striping to the alphabetical department list, user error is reduced.
  • Placing a carousel of doctor quotations on the home screen places unnecessary information outside of the wayfinding user flow

I prototyped my wireframes to present the system functionality to the client, while the UI designer applied Sharp branding and design treatments to propose a look and feel to the client.


Link to Prototype

WIREFRAMES - SECOND ITERATION



After feedback from other UX designers at Sharp HealthCare, I created a second set of wireframes addressing the questions that had come up before.

  • Instead of a search function, an alpha-selector would provide quick usability in a static view (instead of having a keyboard pop up).
  • By applying zebra striping to the alphabetical department list, user error is reduced.
  • Placing a carousel of doctor quotations on the home screen places unnecessary information outside of the wayfinding user flow

I prototyped my wireframes to present the system functionality to the client, while the UI designer applied Sharp branding and design treatments to propose a look and feel to the client.


Link to Prototype

Final Design and Development





After some back and forth with the client, we came to an agreement on the final design. The main changes to my original proposal included:

  • A standard header treatment to all screens instead of the "lock screen" treatment to the home view - This helped with design clarity by keeping all screens consistent.
  • Featuring value propositions for the departments offered at the medical building instead of doctor quotations - I was able to convince the client that this content better served the users and their wayfinding needs.
  • A way for the user to toggle directly between physician and department view - While I still believe this is not a necessary functionality, it could be argued that this would help with error prevention (i.e. If a user accidentally searches by department instead of by doctor).


Home - Top-rated Doctors



Home - Laboratory



Home - Urgent Care



Home - Optical Shop



Home - Physical Therapy



Home - Pharmacy



Provider Directory



Department Directory by Floor



Department Directory A-Z



LAST MINUTE CHANGES DUE TO DEV CONSTRAINTS



In some cases, the physician listing was cut off at awkward points. For instance, only half of the letter B displayed at the bottom of the first page. To avoid this, I asked the dev if there was any way he could code in logic that would prevent anything from displaying that was not a complete item. Unfortunately, he could not think of an easy way to accomplish it.


To remedy this, I came up with a simple design solution that showed users that more information was available in situations where content was cut off. By adding a border, I utilized the Law of Continuity, which demonstrates that users will perceive an obscured object as whole and simply hidden behind the obstruction.



LAST MINUTE CHANGES DUE TO DEV CONSTRAINTS



In some cases, the physician listing was cut off at awkward points. For instance, only half of the letter B displayed at the bottom of the first page. To avoid this, I asked the dev if there was any way he could code in logic that would prevent anything from displaying that was not a complete item. Unfortunately, he could not think of an easy way to accomplish it.


To remedy this, I came up with a simple design solution that showed users that more information was available in situations where content was cut off. By adding a border, I utilized the Law of Continuity, which demonstrates that users will perceive an obscured object as whole and simply hidden behind the obstruction.



LIVE PRODUCT LAUNCH



The boards were installed in the newly constructed building, which opened on October 5th, 2020. I was able to visit in person to troubleshoot and ensure that they are fully operational!



Reflection





This project marked a pivotal moment in my UX career, as it was my first experience designing for users with potential mobility issues, requiring me to prioritize ADA compliance. Shifting from digital interfaces to a physical product setting introduced unique challenges, especially in anticipating user needs in an entirely new environment.


Designing for Accessibility

Ensuring ADA compliance pushed me to deepen my understanding of accessible design, moving beyond the assumptions I previously had. I needed to rethink user behavior, anticipating how they might interact with the device in various contexts. This required more creative problem-solving and iterative testing to design a product that all users could find intuitive and reliable.


Bringing a Vision to Life

Seeing a product go from concept to physical reality was incredibly rewarding. This experience expanded my skill set, teaching me how to bridge the gap between abstract design principles and tangible, real-world applications. It solidified my understanding that successful UX design isn’t just about interfaces—it’s about creating seamless, intuitive experiences across any medium.



Leave a message




Like what you see?
Drop me a line and I will get back to you soon.








send




Icons by Noun Project