Build upon the initial UI sketches from our ideation stage, we entered the lo-fi prototyping stage where we transfer our scattered design ideas into a comprehensive, yet basic, screens in online design tools to allow for another round of user testing. To guide the lo-fi prototype stage, we have also come up with a list of questions as our cornerstone:

1. How do the users perform with our design compared to the original one?

2. What are the improvements and shortcomings of our design with the original one?

3. How do we order the sections in the detail page to facilitate an uninterrupted user flow?

4. Which design of components should we keep when we have more than one of them?

5. What are some design choices we can bring to our next stage from our user test?

Milestone 3 Activities and Outcomes 

Low Fidelity Prototype 

The low fidelity prototype marks a crucial stage in our design process, building upon the UI sketches from the previous milestone. In Figma, we recreated these sketches, providing a tangible platform for testing, revision, and refinement towards our final high fidelity prototype.

Our approach involved recreating the individual components from the sketches into Figma, ensuring consistency with our initial design. From there, these components were assembled into screens, reflecting the planned user interface. Additionally, we incorporated interactions into most of the main components, thereby establishing a functional flow that users can engage with during testing.

Throughout this process, we retained the diverse design ideas from the earlier stage, integrating them into our Figma design. This allowed us to explore various design directions and iterate upon them with the help of a small scale user testing.

Included in this report are screenshots comparing the initial UI sketches with their Figma recreations. Furthermore, the Figma design itself will be accessible in the Appendix, offering a more comprehensive view of our prototype.

Omni Search Landing Page

The omni search bar (short for “omnipotent”) is the default page when a user lands on the search page but does not do anything. It serves as the ultimate entry point for all the user flows. It enables search for locations, providers, and other available resources.

Figma Recreation

In the recreation process, we enhanced fidelity by introducing additional tabs with realistic labels. Furthermore, we incorporated an animation for the title that cycles through various functionalities such as "Find a Hospital" and "Find a Provider", before settling on "Find Care". This dynamic animation implies to the users that the system offers comprehensive support in finding care.

Search Result Page

After the user searches with the Omni search bar, they will be brought to a new page showing the search results. This page will be composed of three main parts: Search bar and filters, search results, and interactive map.

The search bar will be placed on the top of the page, however, whether to put the filters as a sidebar or parallel with the search bar is still undecided. The search result will be shown in a list composed with cards.

Beside the search bar, there will be an interactive map in a two column set up. The map will show points of interest on it as pins. Pins will have different icons showing different types of locations, and different colors to show the opening status of the location (open, closing soon, closed). When hovering on the pins, a smaller card of the location will pop up. 

Figma Recreation

Most components are kept the same in the recreation of this page, except that all of them have a much higher fidelity. One minor design we have in this page is the dual-color chip for the open status and distance: now before the user provides their location, the distance pill will display “Enter Zip Code”, prompting them to enter their zip code in the top right text entry.

Cards are recreated with the main design choices and components. The mini and vertical version of the cards had a slightly different design and content to make their sizes reasonable.

Location Detail Page - Introduction

For every location, its detail page will alway consist of a general introduction section. This section will include some image of the location, its name, contact information, location, opening hours, and popular specialties. There will also be a floating sidebar to assist in-page navigation by indicating which part of the page the user is currently reading.

Figma Recreation

The component is recreated without any major changes. Along with introducing a Back button for navigation back to the map, the name of the location has been moved to the top of the page for better clarity. The Make an Appointment button now appears in the providers section.

Location Detail Page - Specialty Search

The Service section, as one of the most central features of a location page, is the influencing factor that most users will view and make a decision whether or not to visit the location. In the pre test questions in our user research, users also cited the specialties offered by the location as an important influencing factor. 

In our redesign, we have retained the existing specialties listing format that most hospitals have. However, a number of participants in the pre-test demonstrated difficulty in locating this list and were unfamiliar with the specialized medical terminology in the list. Therefore, we propose to add a search field in the Service section as well, which supports everyday language or specialized medical terms as inputs, to help users of all knowledge levels to be able to retrieve the specialties contained in the locations more easily.

If the specialty of the Service search result is provided by this location, a shortcut link to the relevant providers will appear to bridge and facilitate the flow of users confirming the location and confirming the provider. If not provided by this location, a shortcut back to the search page will appear to provide the next call to action after the user flow breaks.

Figma Recreation

This component is created without any major change. Real medical specialties and interactions are added to increase the fidelity.

Location Detail Page - Amenity

One aspect that’s lacking on the current UW Medicine’s website that is vital to a user’s visit is the amenity section. Based on our analysis on hotel systems and our field trip to UW Medicine Montlake, we have come to the conclusion of a tabbed list design for the amenities and include both a detailed parking instruction and a downloadable site map. The instruction and the site map will be two buttons on the same level, one primary and one secondary, right below the section title. Icons will also be added beside the amenities to improve readability. We also made sure to include information we found useful from our on-site visit, such as parking validation and wifi availability.

Figma Recreation

To increase the readability of this section, icons are added in front of the titles within the section. Also, two maps are linked as buttons on the top of the section: one parking instruction map, which will help users see recommended parking lots, and one internal site map, which will help users locate amenities within the center

Location Detail Page - Providers

The Providers section shows all healthcare providers within a location and is usually the end point of the user flow where the user contacts a provider or schedules an appointment. This area will also be longer due to the large number of providers at the location, especially the hospital, so it is also the last section of the detail page. However, users can also choose to be directed quickly to the providers section if they found a specific specialty in the previous Services section. 

Currently UW Medicine's Providers area arranges them alphabetically by provider name and does not provide any sorting or filtering capabilities. In our initial user testing, we also received feedback that it was difficult to find suitable providers. In order to enable users to locate the desired provider more accurately and quickly, we decided to add filters to the providers area.

Providers will be displayed as cards in the location details page, it will have several filters on top and the available providers below it. Filters will enable users to scope down the providers by the specialties and insurances they cover, and whether they accept new patients or not. We also proposed two types of layout for provider cards display - grid or list, but we will need feedback from usability testing to choose between them.

Information in the providers result will include:

• Provider’s photo, name and title

• If the provider has board certifications with a universal icon

• Their specialties in chips (small rectangular or rounded elements with text or icons used for displaying user-selected options)

• Available languages in chips

• If they accept new patients in badges on the top corner

The medical specialties filter will display a list of available specialties and the filter will turn into a text entry. When the user was quickly directed from the Service section, the specialty filter will be auto filled with the specialty entered or generated previously.

Figma Recreation

Medical specialty filter was placed in the first place. Accepting new patients filter is now a checkbox rather than a button style. Also, the badge on the provider’s card is now displaying whether they are accepting new patients rather than if they are certified or not. Two layouts of the providers are designed, a grid layout with cards and a list layout, a layout switch is added along with the filters for the users to change if they want.

Search Page

According to the user testing on the Search Page prototype, users appreciate the convenience and versatility of the omni-search bar. The search bar can not only search for locations but also auto-fill common symptoms. It reduces the effort required to type symptoms manually and provides guidance for users unsure of how to describe their symptoms. 

Nevertheless, there are still possible improvements that can be made to improve users’ experience. For example, a welcoming title with positive emotion would create a favorable impression, reinforcing brand identity and trustworthiness. 

Additionally, multiple users expressed confusion while preserving the suggested contents under the search bar. Wordings like “Online Resources” could be changed to more specific terms like “Health Information” to improve clarity. Consistency in terminology is essential to avoid confusing users.

Last but not least, our internal discussion suggests simplified location cards to improve clarity, making it easy for users to quickly grasp key details. Inside the location card, the usage of plain language for common symptoms ensures accessibility for all literacy levels.

Map Page

During our analysis of user feedback on the Map Page component, we found that the current layout generally meets users' expectations and received positive feedback. Users appreciate the clear layout of the result cards and the intuitiveness of the interactive map, despite its current non-functional state as a mock-up.

However, some issues were identified. First, there are concerns regarding the low contrast in the distance part of the dual-color chip. The dark gray text on a light gray background makes it difficult to read, so we plan to adjust the color scheme to improve readability.

Another issue is the wording "Enter Zip Code" within the dual-color chip. Users find this confusing before they enter their location. To address this, we will revise the wording to clearly indicate that users need to provide their zip code for the system to calculate distances.

Additionally, users expressed confusion about the meaning of different icons on the pins in the interactive map. For instance, some read the pin with a blue triangle as their current location, which actually represents a clinic. We plan to implement a legend on the map to explain the meaning of each icon clearly. Moreover, we will redesign the icons to ensure they are more intuitive and easily understood by users.

Overview

During our analysis of our Overview section of the Location Page component, we found that the current layout was positively received by our testers. The information displayed consistently felt understandable, relevant, and easily accessible.

Regarding the hours displayed, we discussed with our users whether or not they would like the information to be collapsible. Their preferences leaned overwhelmingly toward having a more traditional list of hours, citing unease at not being able to see the information ahead of scheduling an appointment. Furthermore, some users also felt that the bolding of “today’s” hours was not apparent enough, but we believe this issue will be corrected once color is introduced.

Internally, we debated whether or not to stack the address and phone number information as we cannot guarantee a consistent length for addresses, thus making spacing a challenge. We will experiment with this while creating our high fidelity prototype.

Services

In the usability testing of the Service (Specialty search) section, several key insights were gathered. 

Participants expressed confusion regarding the instruction text "check below," which led them to expect relevant information within the specialty search section rather than directing them to the providers section. This highlights the need for clearer cues and instructions to guide users effectively. 

Additionally, participants found the term "Services" ambiguous for a section displaying specialties, suggesting the necessity for a more precise and targeted name to avoid confusion. 

To address users' uncertainty about search capabilities, suggestions were made to provide examples or instructions indicating that plain language and medical terms are both accepted in the search bar.

Amenities

For the Amenities section, we received generally positive feedback from our users, who found the information clearly presented and helpful. However, some were concerned about the section’s placement between the Services section and Providers section, as they felt that the search/filter connection between the two sections was severed by Amenities. In our high fidelity prototype, we will move the Amenities section up to below Overview so as to better show the connection between Services and Providers.

Internally, we discussed how to display the amenities. We discussed a two column format, but felt that it did not allow enough information to be displayed at the same time. So, we will aim for our existing one column format with space to include up to fifteen amenities in our high fidelity prototype.

Providers

Regarding the Providers section, participants appreciated the layout switch feature, with a preference for the grid layout as the default option. This feedback suggests that offering users the ability to customize their viewing experience enhances usability without overwhelming them with unnecessary choices.

Furthermore, participants recommended renaming the badge on provider cards from "new patients" to "accepting new patients" for clearer communication of the providers' availability.

Appendix I - Figma Low Fidelity Prototype

https://www.figma.com/design/LTwqqYDca4S8KVyjXYyXbm/Lo-Fi-Prototype?node-id=0%3A1&t=x05TBEFAchI10T5C-1

Appendix II - User Testing FigJam Board

https://www.figma.com/board/CPMFhqXTjhzgRh6Be5B5kp/Lo-Fi-Usability-Testing-User-Flows?node-id=74%3A373&t=32QKB1HMjKcvW5cn-1