Problem
The Find a Doctor directory for uhhospitals.org/doctors suffered from an unclear content hierarchy, layout issues, and did not sync with newer components throughout the website and UH apps.
Solution
UH Marketing and communications stakeholders proposed we design a new, conventional finder component that can be used throughout the website and mobile apps. This component would be used for directories like find a doctor, location, clinical trial, etc. It was important that the design made the best use of space, looked clean, was responsive and accessible, and an enjoyable user experience.
Role
- Senior UI/UX Designer (Solo)
- User Researcher
Tools
- Adobe XD & Figma
- UserZoom
Process
- Ideation
- Design & Wireframes
- User Research
- Dev Handoff & Monitoring
- Results & Reflections
Ideation
With any project, my first step was to meet with stakeholders to determine the business goals and use that as a foundation for developing product usability goals and user stories. I met with engineers and developers to understand what existing components can be used, where the data is getting piped in from, and what kind of custom development is feasible within scope. I also did a competitive analysis to review other healthcare system doctor directories.
As a patient, I need to find a doctor:
- I can trust so I can feel safe and comfortable
- Who is close in proximity to me to save my time
- Who accepts my insurance so I can afford it
Business Goals:
- Increase appointments booked
- Users can easily pick a doctor and make an appointment
- Ensure app and web components are consistent
Usability Goals:
- Intuitive listings and filters that are easy to find
- Help users avoid taking unnecessary steps/actions
- Provide enough information for users to commit to making an appointment
Design & Wireframes
Utilizing University Hospital’s design system and pattern library, the wireframes were built entirely in high fidelity to ensure the new finder component would be brand compliant. Wireframes were designed to be responsive with mobile and desktop examples. Doctor listings were designed considering the most extreme amount of content and minimal examples to ensure the design could handle any scenario. Filtering, sorting and the search bar were merged into one single component. Listing details, links and calls to action were organized in a cleaner orientation using icons, and conventional styles. Other new features were added including audio name pronunciation and a grid view for listing (desktop only).
Usability Testing
Usability testing was the next step to ensure the design measured up to meeting established usability goals. Usability questions were conceived based on these goals and the testing method was an unmoderated usability study. Participants answered questions, engaged in preset tasks with wireframes while recording their voices and screen activity within the UserZoom user testing platform.
Among many discoveries, we saw that 50% of users expected the filters to activate immediately after selection instead of looking for a button to apply these filters. We also noticed that 83% of participants were noticeably inconvenienced scrolling through so many listings of doctors who were not seeing new patients. This led the development team to consider removing these doctors from the default view of listings and introducing automatic updates after each filter is selected.
Dev Handoff & Monitoring
The new search bar and doctor listing components were added to the website design system for future reference and wireframes were sent to the development team. It was decided that the audio name pronunciation feature would have to be a future enhancement. Front-end developers utilize Figma’s dev-mode feature with the wireframe for new component CSS specifications. They also integrated existing stylesheet rules into the proposed design and layout. Engineers ensured their API’s were operating as expected and data was reviewed to ensure accuracy. I was available for testing development progress in staging and provided guidance regarding styles and functionality when needed.
Results & Reflections
The new Find a Doctor listing page design went live within the expected time and budget. There was an executive decision to require all UH doctors to be available for new patients. We introduced a new option for users to request an appointment if no schedule dates were available. The same finder components were integrated into other features throughout the website like find a location and an e-commerce platform.
Since the new design went live, the bounce rate decreased by 15%, clicks to profile pages increased by 8% and appointments scheduled increased by 20%. This project was a significant reminder of how important usability testing is. With every study, unexpected out comes and discoveries are made. In this case, the research gave me ideas for designing future enhancements like a comparison filter for users to conveniently build their own list of doctors they like and compare them to one another. It was impressive to see what kind of results came from using this process with redesigning the find a doctor component.
View the webpage