Moving forward from our Lo-Fi prototype, our goal is to design a refined product that is ready to showcase. To guide our design process, we developed a set of Hi-Fi prototyping questions that will ensure our product meets high standards of usability, aesthetics, and functionality. These guiding questions are: 

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

2. Which versions of components, based on user feedback and testing, perform best in terms of usability and aesthetics? 

3. What positive feedback and successful elements from user testing can be incorporated into the final design? 

4. How does user satisfaction with the new design compare to their satisfaction with the original design? 

What We Designed

Design System

In our design system, we've inherited color and font elements from UW Medicine to maintain brand consistency. To enhance the visual appeal and user experience, we've transitioned the right corner designs on our current webpage to rounded corners, imparting a sense of gentleness and modernity.

For our icons, we've opted for Google Material symbols due to their convenience and availability through a Figma plugin. This choice allows us to quickly integrate and customize icons, ensuring consistency and clarity throughout the interface.

Our grid system has been carefully designed to optimize the view on laptop screens, ensuring content is well-organized and visually balanced. This approach supports a cohesive layout and enhances usability across different screen sizes.

Overall, these design choices—inheritance of color and font elements, rounded corners for a softer aesthetic, use of Google Material icons for convenience, and a laptop-optimized grid system—contribute to a unified and user-friendly design system that aligns with both UW Medicine's branding and modern design principles.

Hi-Fi Webpages

Omni Search

The redesigned omni-search bar offers a comprehensive solution for users seeking care, acting as the central hub for all user entering. This feature enables users to search for locations, providers, and other essential resources seamlessly.

User research revealed that the current website's multiple search bars caused confusion among participants. One participant, after completing a usability test, remarked, "I don't know the location name, so why is that the location search bar?" This highlighted a significant pain point: users were often unsure which search bar to use for their needs.

To address this issue, we integrated all search functions into a single, optimized search bar. This unified approach not only simplifies the search process but also enhances the search logistics. The search bar now includes an auto-fill feature that predicts and suggests relevant results as users type, streamlining their search experience.

Additionally, an explore section is located beneath the search bar, providing shortcuts for users to quickly navigate to their desired resources. This section further improves user experience by offering immediate access to frequently searched items and categories, ensuring users can find the information they need with minimal effort.

Search Results and Map

Compared to the lo-fi prototype, the hi-fi prototype includes additional details and a redesigned location result card to align with the UW Medicine design system. Although no new functions were added, the hi-fi prototype is easier to use and more aesthetically appealing.

The top search and filter bar is refreshed with relevant icons for all filters, and a UW Medicine logo is placed leftmost emphasizing the brand identity.


The interactive map received several updates to increase its fidelity. The placeholder image of the map was replaced with one that resembles the current Google map design. Zoom buttons were added to the top right of the map to enable zooming with mouse clicks. The map legend was redesigned and placed on the top left. Hospitals and clinics now have distinct icons: hospitals are marked with a purple "W" indicating their affiliation with UW Medicine, and clinics are marked with a red cross. During the second round of user testing, users found the “Your location” icon to be confusing. To address this, the icon was redesigned to resemble modern online map indicators, with two concentric blue circles. These redesigns give the map a clear style and make it more intuitive, aligning with other interactive maps.

The location result card underwent significant revisions based on user feedback from the second round of testing. Long descriptions were removed and replaced with information on specialties and phone numbers. The dual color chip received mixed feedback: users appreciated the colors indicating the opening status but found the distance chip confusing. In response, the opening status colors were retained, but the distance chip was moved to the top left corner of the location image with a semi-transparent background for better contrast. The chip now shows the opening status and time, replacing the original italicized opening time under the location name. In place of the dual color chip, icons of available amenities were added. This refined design provides users with essential information at a glance, without needing to navigate to a detailed page.

The hi-fi prototype incorporates user feedback to enhance both usability and visual appeal. The redesigned map and location result card provide a clearer, more intuitive interface, ensuring that users can easily access and understand the information they need. These improvements not only align with the UW Medicine design system but also enhance the overall user experience.

Overview & Amenities

The redesigned overview section reorganizes the existing site layout to become clearer and more easily navigable. With this, users can better discover information relevant to their visit, including new points like visitation hours for those accompanying patients in hospitals. We also introduced a new amenities subsection in order to bring the in-person experience of UW Medicine online

Our initial user testing revealed that participants struggled with understanding the current UI and were misled by confusing and inconsistent verbiage. Multiple participants missed buttons, had difficulty finding addresses and other essential information, and overall felt disconnection between the search results and location pages.

To resolve these issues, the layout of the overview section has been completely remodeled. Better consistency in information placement has been implemented to best match user mental models and direct users to the location's most essential information. Confusing verbiage, such as the phone number being associated with "contact" on some pages and "make an appointment" on others, has been removed in favor of presenting information without any use qualifiers.

The development of the amenities subsection is based on our sponsor sharing that visitors frequently ask location staff questions like, "Where is X?" Staff usually say visitors should check the website, only to find that the information does not exist online. This presented a pressing need that our redesign could fulfill. insights from our field visit, where we noticed amenity information necessary to know that was not communicated ahead of time. Furthermore, our initial user tests revealed that participants struggled with correctly finding and ascertaining parking information, the only amenities with information currently provided.

By providing amenity information, the subsection helps users prepare for their visits and avoid unforeseen stressors. A parking map and a site map are also provided to help users gain confidence in navigating the location. The design is inspired by our competitive analyses, where we took note of design systems efficient in communicating site experience information and emulated their best qualities, such as the use of icons and brief descriptions.

Location Detail Page - Services & Providers

The Services and Providers sections display the types of medical specialties the location can offer, and the providers available at the location. Based on users' responses in our testing, these are important sections that most users will view and make a decision whether or not to visit the location. Our redesign focuses on adding interactive components, including search bars, filters, and checkboxes, to streamline user's searching and checking process.

During user research, participants exhibit a lack of confidence and inefficiency in retrieving information about services and providers, as evidenced by one-by-one viewing of provider card content and repeated scrolling of pages. In addition, one participant used CTRL+F to find keywords. These behaviors reflect the necessity of the information access improvement.

To address this issue, we added search bars to both Services and Providers section that enable plain-language-search. In addition, users now can use search bar to confirm the availability of certain insurance plan and filter acceptance of new patients by checkbox, which turned out to be user's needs in testing insights. 

Additionally, we reorganized the information displayment on provider cards to incorporate important but missing information. Specifically, we added provider's rating, language spoken, and insurance covered. Also, we highlighted the call-to-action buttons like Make an appointment and Detailed page to better guide users for the possible next move.

Evaluation

After crafting the high-fi prototype, we evaluated the design with both our sponsor and faculty panelists. They provided us with constructive feedback on our product.

With Sponsor

Before the meeting, we’ve crafted the following evaluation questions:

• How do users feel about the location page hierarchy?

• Is the yellow in the side navigation bar too much?

• Are there additional customization options users would like?

• Is the Omni Search Bar visually appealing?

• Thoughts on the text and color above the search bar?

The review session with Kory Kuriel, the Director of Digital Experience at UW Medicine, provided invaluable insights into our design, guiding our next steps. His feedback focused on usability, visual consistency, and accessibility, prompting us to develop specific evaluation questions based on user feedback.

Kory highlighted potential usability issues and recommended improvements to the hierarchy and text size of our location and amenities pages. He stressed visual consistency with UW Medicine’s branding and suggested evaluating the use of color, particularly the yellow in our side navigation bar and purple in every screen. Accessibility improvements were also prioritized, including clearer legend designs for map results and better color coding for open and closed locations.

With Judges

During our showcase, we were judged by two mid-senior designers as selected by HCDE. We began with a game where we asked our judges to pair medical terminology (e.g., obstetrics, nephrolithiasis) with the correct UWM location. We then asked them to play the game again, but this time with plain language medical terms (e.g., childbirth, kidney stone). The judges found the plain language matching much easier to complete, and we revealed that was a functionality we included in our final design.

Judge one was very impressed with our work and its centering of the user throughout every component. He especially enjoyed the starting game and felt it was a great introduction to the problem. He was primarily curious about the future value of our design, asking us questions on how we could incorporate AI, a topic we will discuss in our Future Plan section.

Judge two was a UW Medicine patient herself who had recently struggled with using the Find a Location feature. She strongly believed that our redesign was a drastic improvement on the experience, highlighting our design's caring and empathetic nature. Similarly to judge one, she appreciated the centering of the user, having felt very frustrated by the existing system. 

Project Showcase

Future Plan

Integrating Artificial Intelligence (AI) into our location search experience would be a significant advancement to enhance usability and efficiency. AI can improve search accuracy by understanding user intent and context, personalize experiences based on preferences and behavior, and predict user needs proactively. Natural Language Processing (NLP) can also make interactions more intuitive and responsive. Additionally, AI's ability to analyze data allows us to derive insights from user behavior, supporting data-driven improvements to the search experience.

However, we must address several concerns, particularly regarding privacy. Data privacy is crucial, and we need to ensure that user data is anonymized, securely stored, and used only for its intended purposes. Transparently communicating how AI will utilize data and obtaining user consent are essential steps to build trust and comply with privacy regulations. Additionally, AI algorithms must be carefully developed and tested to mitigate biases and ensure fairness in healthcare recommendations and search results. Adherence to healthcare regulations and standards is essential to protect patient privacy and maintain legal compliance. 

By addressing these concerns and leveraging AI responsibly, we can enhance our location search experience while maintaining user trust and safeguarding their privacy.

Final Reflection

Throughout our capstone project, our team, the Locationologists, has remained steadfast in our commitment to improving the Find a Location feature on UW Medicine's webpages. At every stage, from research to ideation, low-fidelity prototyping to high-fidelity prototyping, our decisions have been rooted in either research outcomes or analysis of user feedback. We've kept patients at the forefront of our minds, ensuring that every design choice prioritizes their needs and preferences.

By addressing pain points identified through research and testing, we've  successfully crafted a redesign that enhances the user experience for  patients of all technical and medical knowledge levels. Our efforts have received overwhelmingly positive feedback during our final evaluation with our sponsor and showcase visitors.

Our journey began with understanding the challenges patients and their relatives faced with the existing system. Through research projects, usability testing, and analysis, we uncovered key insights that informed our design decisions. Ideation allowed us to generate innovative solutions, and low-fidelity prototyping enabled us to quickly iterate and gather feedback from users. As we progressed to high-fidelity prototyping, our focus remained on creating a functional and aesthetically pleasing prototype that addressed user needs. We carefully considered every element, from layout to color combination to visual design, ensuring that the final product was intuitive and user-friendly.

As we conclude our project, we are proud of the impact we've made and  confident in the lasting improvements we've implemented for UW  Medicine's Find a Location feature. In addition to the tangible outcomes of our project, our collaboration in this capstone has also been a valuable learning experience for each member of our team. Through the process of design, research, and communication, we have all developed our skills and grown as professionals. These lessons will serve us well as we graduate and embark on our future careers or enter graduate school. As we move forward, we carry with us the joy and satisfaction of a project well done and also the knowledge and experience gained from working together towards a common goal.