Care, Just a Click Away
UW Medicine Location Webpage Redesign
This capstone project for UW Medicine reimagines the online search experience for patients seeking care across their extensive network of hospitals and clinics, aiming to make finding medical services accessible, simple, and stress-free.
My Role
Product Designer / Project Manager / UX Researcher
Disciplines
Collaborative Research / User Centered Design / Usability Testing
Team
Borui Wang / Carly Minow / Congyi Zhu
Date
Spring 2024 / 10 weeks
Design Question
"How might we redesign the 'Find a Location' feature to optimize clarity and simplicity for patients of all technical and medical knowledge levels?
Design Objectives
A new plain language search system to lower barriers to access to care.
A new map search result system to provide better user understanding of the care available to them.
A customizable location page template that enhances user understanding for the information and service at UWM locations
Guiding Questions For Research
Who are UWM’s current site visitors?
How do site visitors use the location webpages currently?
Why do visitors use the locations webpages the way they do?
What from the in-person hospital visitor experience can we bring online?
Which user centered design methods will be helpful in our redesign process?
Competitive Analysis
💻 Effective Website Layout
🔍 Omni Search Bar & Filters
🗺️ Interactive Maps
ℹ️ Details Pages & Amenities UI
We conducted a field study at UW Medical Center-Montlake in order to understand the availability, discoverability, and usability of the amenities inside a UWM hospital.
-
Parking - Identify the parking area (employee, patient, and long-term parking areas) and the method by which you pay for parking (kiosk, app, etc.)
Emergency Department - Locate the entrance to the Emergency Department and identify the signage indicating emergency services.
Cafeteria - Read the menu and order something to eat.
Coffee Shop - Purchase a medium-sized coffee and note the price.
Gift Shop - Find a small gift item priced under $10.
Vending Machine - Purchase a bottle of water from the nearest vending machine and note the price.
Information Desk - Find operational hours and hospital maps at the desk. Also, take a photo of the signage on the desk.
Quiet Place - Find a designated quiet area and take a photo of the signage indicating it as such.
Wi-Fi Access - Connect to the hospital Wi-Fi network and take note of the network name and password and the pricing if it’s not free.
Pharmacy - Locate the hospital pharmacy and evaluate its proximity to other hospital services.
Charging/outlets - Locate charging stations or outlets and evaluate its proximity to other hospital services, especially dining tables and sitting areas.
Most tasks were rated as a 3/5 difficulty. However, we found the following constrains:
Services (Parking Cashier, detours) are not communicated online
No information online about the amenities (cafeteria, Wi-Fi, power outlets)
Signs and directions are not clear inside the hospital.
Field Study at UWMC-Montlake
To evaluate the current UW Medicine website's usability and identify pain points, we conducted 6 moderated "talk-aloud" usability tests. These tests provided valuable insights through direct observation of user interactions and collection of subjective feedback.
Key aspects of the testing process:
6 moderated tests were conducted via Zoom or in person
Real-time, interview-like usability tasks were followed by immediate Q&A sessions
Test scripts and tasks were developed by the team with sponsor input
Affinity Grouping
Takeaways
Confusing navigation and search: Users struggled with unclear layouts, limited search features, and difficulty returning to home pages.
Language and terminology barriers while searching: Non-native speakers and seniors were hindered by unfamiliar terms and similar location names.
Unclear services and locations: Vague “Specialties” lists and poor info led to missed details, prompting some participants to prefer calling directly.
Initial User Testing
The design requirements serve as the transition from research to design. Derived from research takeaways and user insights, these requirements keep the product targeted and focused. We divided the redesign into three categories: Overall UI, Location Detail Page, and Search System to ensure comprehensiveness.
Design Requirements
Information Architecture
Our team redesigned Information Architecture (IA) to ensure quick and intuitive access to services, provider details, and location information.
A universal search bar consolidates specialty, location, and insurance-based searches, streamlining the process.
An interactive map offers a spatial overview of medical centers and clinics, allowing users to zoom and select facilities for more information.
Provider profiles display acceptance of new patients, insurance compatibility, and multiple practice locations, guiding users comprehensively.
Amenities like parking, dining, and WiFi, paired with preserved data such as location images and provider ratings, help users plan visits effectively.
After having the IA set for our two pages, our next task was to sketch some rough UI layouts that we can build upon in the future prototypes
Lo-Fi 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.
User Testing
We tested the redesigned UW Medicine website with both familiar and new users, collecting feedback to guide further improvements. Feedback was categorized as "good," "bad," or "comments" to refine the user experience
To mimic the real user base, we had 3 returning and 2 new participants. The full redesign ensured prior site familiarity did not affect feedback quality.
Insights
🔍 Search Page
👍 Omni-search bar's versatility
👍 Auto-fill feature for symptoms
💡 A welcoming title
💡 Simplified location cards
🗺️ Map Page
👍 The layout and interactive map
💡 Enhancing contrast for better readability
💡 Adding a legend for map icons
📍 Location Page
Overview Section
💡 A traditional list of hours over a collapsible format
Services Section
💡 Need for clearer instructions and more precise section naming
💡 Provide examples of valid search terms
Amenities Section
👍 Clear and helpful presentation of information
Providers Section
👍 Positive feedback on the grid layout as default
💡 Rename the "new patients" badge to "accepting new patients" for clarity
Hi-Fi Prototype
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.
"I don't know the location name, so why is that the location search bar?"
We solved a significant pain point: users were often unsure which search bar to use for their needs.
Search Results and Map
The hi-fi prototype incorporates user feedback to enhance both usability and visual appeal. Key enhancements include a redesigned interactive map with clearer icons and legend, and a refined location result card that provides essential information at a glance.
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.
Services & Providers
Enhancements of these sections aim to streamline the user's care-searching process and improve healthcare service information accessibility, addressing the inefficiencies observed during user research. Key improvements include the addition of interactive components such as search bars with plain language support, filters for insurance plans and new patient acceptance, and reorganized provider cards with more comprehensive information.
Design System
Our design system incorporates UW Medicine's color and font elements, adds rounded corners for a modern and friendly look, and utilizes Google Material icons via a Figma plugin for consistency. The grid system is optimized for laptop screens, ensuring a balanced and cohesive layout across different sizes. These choices create a user-friendly interface that aligns with UW Medicine's branding and contemporary design principles.
Evaluation
Sponsor Feedback
We evaluated our hi-fi prototype with Kory Kuriel, Director of Digital Experience at UW Medicine, using targeted questions about hierarchy, color usage, and customization. His feedback emphasized improving usability, visual consistency with UW Medicine’s branding, and accessibility. Key recommendations included refining the location page hierarchy, adjusting text size, reevaluating the use of yellow and purple, and enhancing map legends and color coding for better clarity.
Judges’ Feedback
During our showcase, two mid-senior designers evaluated our design. A starting game comparing medical terminology with plain language terms highlighted the accessibility improvements in our redesign. Judge one praised the user-centered approach and raised questions about future AI integration. Judge two, a UW Medicine patient, found the redesign empathetic and a significant improvement over the current system, appreciating its focus on user needs.
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.