University of Iowa Hospitals & Clinics
Care you deserve, expertise you trust: a reimagined website putting the patient first.
For the citizens of Iowa, they had top-notch health care around the corner, but it wasn’t at their fingertips. I was part of an ambitious project to redesign the University of Iowa Hospitals & Clinics’ digital experience to provide access to care at the human level.
Project goals
- Support UIHC’s growth as a leading regional provider.
- Enhance transactional functionality.
- Strengthen the UIHC brand.
- Provide flexibility in components, layout, and a consistent experience on both the adult and pediatric site.
- Create a dynamic, intuitive, and engaging digital experience.
The ChallengeCreating a unified and intuitive experience
University of Iowa Hospitals & Clinics (UIHC) is a large, public teaching health care facility affiliated with the University of Iowa. It consists of a main adult-care hospital, a children’s hospital, and numerous outpatient clinics. Centretek partnered with UIHC to redesign their website, and a children’s multi-site, to incorporate new branding and functionality improvements.
My role
I was the sole UX designer. My role was to compile key findings, user research, and stakeholder interviews to create a comprehensive set of wireframes and visual designs.
Target AudienceMeet the users
Name: Steve
Age: 50
Occupation: Magazine Editor
Steve is a middle-age family man who recently moved to Iowa. He’s looking for a pediatrician as well as specialized doctors for his elderly parents. He would use the website to search for nearby doctors with high ratings.
Name: Rebecca
Age: 43
Occupation: Heart Surgeon
Reena is a heart surgeon at several of UIHC’s hospital locations. She would use the website to access key pages to refer a patient, read systemwide news, and update her provider profile.
Name: William
Age: 76
Occupation: Retired
William is an elderly man who needs to easily access ways to make an appointment. He is not very adept with using a computer, so finding phone numbers, forms, and urgent care locations should be intuitive.
ApproachGiving focus on what matters to users
Insights
Through heatmaps on their current site, our research focused on user behaviors and their interaction with finding access to care. We found that users were task-oriented and weren’t looking to read about specific care options. Rather, they anticipated their needs and clicked on the available option, usually within one scroll. Being able to find those care options proved difficult for users, and became a focus during the UX design phase.
As you can see from the heatmaps, it was imperative to prioritize key calls to action within the first viewport and provide a clear path to appointments.
UX design process
This was a project that would have put wireframe naysayers in their place, as wireframes were crucial in making decisions on site functionality. Each wireframe went through multiple iterations before solving these complex, technical problems. UX writing and component strategy typically received a quicker nod of approval.
With access to care being at the forefront of improvements, the navigation, homepage components, and various site searches were designed to be easy to find, use, and produce results. Due to findings that users scanned rather than absorbed large amounts of content, components were designed to include short blurbs and imagery or iconography. When extensive copy was needed, there were enough flexible components to break up the flow of text.
All in all, there were over 50 wireframes, 120 designs, and numerous interactive states and components.
SolutionKey features
Using color and style variables, we were able to achieve reusable components that provided a consistent experience while still maintaining distinct branding.
An Ajax live search allowed us to create a comprehensive search experience to provide relevant results in real time. Both the homepage search and global search provided results in categories, allowing users to browse by services, providers, locations, articles, health topics, and resources. We created a consistent experience across all search experiences by displaying the results as they would appear within more specialized searches. For example, doctors had the same visual style in the global results page as on the provider results page, but with abridged content.
Because of this strategy, users are able to find relevant results quickly and land on the page they are looking for with less clicks.
Flexibility is key to display and search for locations, whether on a robust locations listing or on a large hospital page with multiple clinics and centers within the location. As users react well to maps, we made sure that this view was accounted for on various components.
TakeawayLess is more
With great power comes great flexibility, and a responsibility on when and where to use it. Although we designed numerous components, each with a distinct purpose, the standard set of components and their variations grew exponentially throughout the site build. The client was heavily involved and took the reins on a lot of project management and component iterations. The client also introduced multiple options for layout, background colors, patterns, and container widths. This meant an excessive amount of variations and not enough time and resources for a comprehensive design audit on all instances. I can’t imagine this will be sustainable in the future.
Additionally, this project included a team of engineers from both Centretek and UIHC, and it was difficult in the beginning to maintain consistent code. As I performed design audits and functionality QA, the same problem I had solved earlier on one component was resurfaced on another. It was a daunting task to have to review on the page level, and not the component level.
What did I learn?
Create a design system and stick to it. Draw the line when enough is enough. I also learned a lot about multi-site variables, and how to cleanly create components that can be reskinned and repurposed on a different site. I became more involved in the technical aspect, and was engaged in Ajax search development to better create an intuitive experience.