Ideation
Based on our user and market research findings and insights, we thought through the design of the product. During this Ideation stage, we aimed to build a solid foundation for our product, developing guiding design objectives to facilitate prototyping and iterations. The list of questions that we would like to solve are as follows:
What from the in-person hospital visitor experience can we bring online?
What are the requirements for our redesign based on the research recommendations?
How might we resolve the pain points our testers struggled with?
How should the logistics of the search system be redesigned to streamline the user flow to the desired location pages?
How do we organize the information on search and detail pages to reduce information overload?
Which visual elements should we keep from the original system and which should we redesign?
Design Requirements
Design requirements serve as a critical roadmap for designers during the transition from user research to the ideation stage. They clarify design objectives, guiding efforts to address user pain points and enhance the overall user experience. Derived from insights gathered in research, these requirements ensure that design solutions align with project goals and effectively meet user needs. Additionally, design requirements play a pivotal role in the user-centered design process, providing a framework for decision-making and maintaining consistency throughout. By grounding design decisions in user insights, requirements help keep us aligned and focused on achieving project objectives.
The design requirements were derived from the recommendations gathered during the research phase, particularly through affinity grouping. By identifying the most frequently appearing concerns and complaints of the current system, we were able to prioritize design objectives that directly address user pain points and improve the overall user experience. To make the requirements targeted and focused, we divided them into three categories: Overall UI, Location Detail Page, and Search System. This categorization helps streamline the design process and facilitates easier reference in the future, ensuring that each aspect of the user interface is addressed comprehensively.
Figure. Design Requirements - Overall UI.
Overall UI
Under the Overall UI category, the focus is on improving the visual clarity and navigational aspects of the website. Design elements such as bolding and color coding are emphasized to highlight key details, ensuring important information such as insurance options, appointment availability, and contact information are easily accessible. Additionally, improvements to button design, including clear back arrows/buttons and the removal of small arrows from menu options, aim to enhance user navigation and reduce confusion.
Figure. Design Requirements - Location Detailed Page.
Location Detailed Page
In the Location Detail Page category, the objective is to enhance the presentation of detailed information about healthcare facilities. This includes designing with a section-based layout in mind, incorporating two sets of maps for facility and general information, and organizing information into clear sections such as general intro, provider card info, medical specialties provided, insurance coverage, and navigation/parking details. The goal is to provide users with comprehensive and structured information that is easy to navigate and understand.
Figure. Design Requirements - Search System.
Search System
Finally, the Search System category focuses on improving the search functionality and user experience. This involves implementing a powerful search bar that supports plain language search and provides advanced filters for refining search results. Another key objective for the search system is addressing user confusion regarding the default "Our Hospitals" feature due to its confusion around the relationship between hospitals and clinics.
Key User Flows
Figure. New and old flows for Task 4, “Where’s that doctor?”.
Figure. The old and new flow of Task 5, “Pay it or Ticket.
We developed key user flows to compare the current system with our new improvements and identify areas for further revision. By organizing our flows in pairs of old and new versions, we allowed viewers to easily understand the existing system, see the differences in our revamped flow, and cross-reference to ensure we made the system more user-friendly. Our user flows focus on two tasks from our initial usability testing in Milestone One: Task 4 (Where’s That Doctor?) and Task 5 (Pay it or Ticket).
Task 4: Where’s That Doctor?
This task involved using a hidden feature of the search system that reveals a provider’s location when their name is entered. This feature is crucial for patients referred to a specific provider but unsure of their practice location. In our new flow, users start by searching for the provider’s name in the “omni search bar,” which supports a wide range of targeted and plain language searches. We then introduce a “Show providers only” filter, displaying provider detail cards instead of just location names. This allows users to confirm they have found the correct provider. Users then select the provider’s page, confirm the provider, and view their practice location, with an internal link to the location’s page for easy navigation.
Task 5: Pay it or Ticket
This task involved finding a suitable parking spot near the Hall Health Center clinic, considering an injury. Participants often failed this task due to unclear information and difficulties with the embedded Google Maps feature. Our new flow begins by establishing whether the user knows their destination. If not, they follow the new location-finding process. Upon reaching the location detail page, users scroll to a new Amenities section with a downloadable, printable, and screenshotable map offering detailed parking advice and clear directions to ideal parking spots. This section also provides information on payment methods, valet services, and validation availability, enhancing the user's confidence in finding parking. If further assistance is needed, users can call the facility using the contact information in the General Overview section.
Information Architecture
Figure. Information Architecture of the redesign location webpages
By organizing information logically and intuitively, Information Architecture (IA) ensures users can quickly access essential services, provider details, and location specifics. It promotes design consistency across the site, facilitates scalability for future expansions, and optimizes pages for better search engine visibility. Our IA for the redesigned UW Medicine website encompasses a range of features intended to enhance the user experience, marked with a star to indicate their significance.
Universal Search Bar: Positioned centrally in the user interface, the universal search bar consolidates various search functionalities into a single feature, allowing users to conduct searches using location and specialty data seamlessly. Advanced search filters enable users to narrow down results by specific providers or locations, and filter based on the insurance network. This enhancement streamlines the search process, making it more targeted and user-friendly.
Interactive Map: The interactive map visualizes the geographical placement of medical centers and clinics, providing users with a spatial understanding of facility locations. This feature allows users to zoom in and out and select specific facilities to see more detailed information, making it easier to plan visits or access services.
Providers: Provider profiles are enhanced with integrated features for improved user experience. A checkbox indicates whether providers are accepting new patients, aiding users in selecting available healthcare options. A dropdown menu allows users to filter providers based on their insurance network. Detailed information about all locations where a provider practices enhances flexibility and access. Each provider's profile is displayed on a user-friendly card, showing their photo, specialty, qualifications, and reviews.
Amenities: Detailed parking options, on-site dining choices, gift shop locations, availability of WiFi, quiet resting areas, and informational desks are identified as valuable amenities. Each amenity is detailed on an exportable amenity map, designed to be user-friendly and easily accessible. This map helps users plan visits, ensuring they can find all necessary services and facilities effortlessly.
Overall, these new features aim to provide a comprehensive and intuitive online experience that meets user needs, making information readily available and easy to navigate. Essential original data, such as location images, location names, medical specialties, and provider ratings, were retained due to their necessity.
Initial UI Draft
After having the Information Architecture set for our two pages, our next task was to sketch some rough UI layouts that we can build upon in the future prototypes. By working independently on initial UI drafts, we gathered ideas from diverse perspectives. Each team member brings a unique set of design sensibilities and experiences to the table. This individual brainstorming led to a wider range of ideas and ultimately, a richer selection of options to choose from during the review process. Additionally, our peer review sessions became more productive when comparing contrasting design approaches. Differences in our sketches led to insightful discussions and a more refined final product that incorporates the best aspects of each team member's vision.
In the next subsections, we will discuss some design insights and our consensus in design choices reached in our review sessions. For design choices that are still in discussion, we will design both of them and perform A/B tests with our lo-fi prototype to evaluate them. For each of the components, only one or two representative sketches will be displayed here. To check the full board of sketches, please refer to the appendix.
Insight and Consensus - Omni Search Bar
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. During the peer review, we have agreed on the following design choices for the search bar:
Under the search bar, there will be tabbed sections for different types of search.
While the users are searching, suggestions will dynamically show in the tabbed area below.
Do not have the hospital / clinic tab in this page, merge them in one “Locations” tab.
Make the content inside tabs scroll-able, not the whole page.
Express search buttons inside the search bar aligned to the right (e.g. “Vaccine”, “emergency”).
Insight and Consensus - Search Result and Filters
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. The standard size card will be used here, which includes the following components:
Head image.
Title.
Open hours.
Highlights / specialties.
Short introduction.
Status Indicator which has the distance and if the location is open.
A “Go to location” button.
Insight and Consensus - Interactive Map and Pop up
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. We currently have two designs for the smaller card, a vertical one and a mini one, which one to use is still under discussion.
Insight and Consensus - Detail Introduction
For every location, its detail page will always 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. Some other design insights include:
Add an overview sidebar fixed on the left.
Show all weeks opening hours, highlight today’s open hours.
Large header image on top and title below it.
Insight and Consensus - In-page Specialty Search
In the location detail page, under the introduction there will be a section for searching the right provider with symptoms or specialty. In the default state it will show all the specialties available. After the user searches for something, either a specialty or symptom in plain language, the page will show a link to check relevant providers or prompt the user to search again if there are no matching results.
Insight and Consensus - Amenity Map
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.
Insight and Consensus - Providers
Providers will be displayed as cards in the location details page, it will have several filters on top and the available providers below it. Whether to make the providers’ results in grid or list is still open to discussion.
Information in the providers result will include:
Provider’s name and title.
If the provider has completed any certifications with icons.
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 searches for the specialties, it will resemble the behavior of the specialty search bar in the above specialty search section.
Future Plans
In the upcoming milestone, we will transition to the low-fidelity prototype phase to build our design ideas in a testable format. We will build upon the initial UI sketches we have in this Ideation milestone, and turn them into rough figma frames as our wireframe. During this process, we will incorporate interactive elements such as checkboxes, dropdown menus, and clickable provider cards, ensuring these features are responsive and provide immediate feedback. We’ll maintain visual consistency throughout the prototype by using uniform colors, fonts, and layout styles, enhancing their engagement and intuitive navigation.
Then, we will add interactions to the wireframe and refine it into a low-fidelity prototype. This prototype should have interactions that allow the user to complete an entire user flow of our decision. We will perform small-scale usability testing with our prototype. We will validate the usability of the search functionality, especially focusing on the effectiveness of filters like insurance network and provider availability. By simulating the navigation flow, we aim to guarantee a seamless transition from searching providers to viewing individual provider details For the components that we have different ideas on, we will perform A/B tests to determine which approach is better. With the insights gathered from our user test, we will further refine our prototype and be ready for the last milestone - the high-fidelity prototype.
