Home
Work
About
Resume
Contact

Michigan Medicine Clinical Homepage Redesign

Michigan Medicine's redesigned website features sleek design, intuitive functionality, and unwavering accessibility, Enhanced the user experience design of the Clinical Homepage website by implementing clear WCAG guidelines and human-centered design principles, resulting in a 83% Customer Satisfaction score.
Project Overview

Michigan Medicine's Clinical Homepage, a vital resource for patient care, suffered from an outdated design and navigation difficulties. With no updates for over two decades, the design had begun to significantly impede user efficiency. I was part of an ambitious project to redesign this experience for healthcare professionals and address their challenges.

Timeline
January 2022 - April 2022
SKILLS
User Research
User Testing
Visual Design
Prototyping
Tools
Figma
Vimeo
InVision
Miro
team
Chloe Minieri
Jack Pakela
Preetam Shokar 
the problem

Users are having difficulty locating essential information

The existing Clinical Homepage was difficult to navigate, had outdated content, and lacked intuitive information architecture, not only providing a poor user experience but also raised concerns about patient safety.
How We Got Here

01 Research

Identifying areas for improvement

SURVey
Surveys were conducted in order to gain quantitative data on user behavior and preferences. I identified patterns among the various user groups (doctors, medical students, nurses, etc.) for insight on problem areas.
Are there sections of the homepage that you never utilize?
Are there sections of the homepage that you use the most?
How often do you use the Michigan medicine Clinical Homepage?

Getting clarity on big-picture beliefs

interviews

Interviews were conducted one on one participants in order to understand qualitative data on users. I used them to learn preferences, opinions, and/or complaints about the Michigan Medicine Clinical site. More importantly, this was an opportunity for me to learn about the goals of our users.

Top Key Themes:

Users are reliant on memory
Most users use the same 2-3 links from the vast menu options
Search feature is rarely used

To gain a better understanding of the competitors

Competitive Analysis
A competitive analysis was conducted to research UX patterns, UI design, and accessibility. This method helps us understand what makes it possible for users to navigate easily through a website. This analysis revealed best practices in navigational design, page architecture, and UI patterns that facilitate easy navigation.

Identifying usability issues early

Heuristic Evaluation
A heuristic evaluation was conducted to evaluate the stehomepage across different devices and operating systems, revealing varied user experiences. This included a Windows laptop using Chrome, an iOS tablet using Safari, an Android smartphone using Chrome, and an Mac OS laptop using Chrome.
There are distinct differences in user experience between laptop users and those using tablets and phones.
  • Laptop users experience easier access, with the ability to view all homepage elements simultaneously.
  • Tablet and phone users face challenges like endless scrolling and extra clicks due to dropdown menus.
  • These differences impact the overall user experience, with laptop users having a smoother interaction compared to tablet and phone users.

02 Key Takeaways

  1. Users valued getting the information quickly
  2. Frustration with Link Farm: Duplicate Links, Outdated Titling, Broken Links, and Unseen Resources.
  3. The longer users spend interacting with the homepage, the more comfortable they become with using it but this is because they rely on Memorization
  4. Information is densely populated or clustered together
  5. Matured users are hesitant about a new design, but acknowledge the drawbacks and complexities of the current UI.
  6. Design feels dated which results in a sense of outdated information.
  7. Users valued fewer clicks and menus to get to the information they need

Defining and prioritizing key takeaways

User Personas & Scenarios
I crafted personas to encapsulate user behaviors and preferences from the interviews. These personas are instrumental in fostering empathy, informing decision-making, and facilitating customized experiences with the stakeholders.

03 Design

Proposed Solutions
Design Rationale
Page Consistency
Each tab within the Michigan Medicine Clinical Homepage has a different style and design. Enhancing familiarity and consistency through the implementation of a uniform design across all tabs.
Reorganize links by title
Organizing the links within each category (Nursing, Pharmacy, etc.) through alphabetization would provide users with a clearer and more structured experience.
Standard Naming Conventions
Several link titles on the page are outdated and require revision to accurately reflect recent updates.
Search functionality and filters
The existing search bar does not effectively filter clinical information and often displays articles related to UM. This tool is crucial when navigating the "link farm."
Eliminate duplicate links
Several instances of duplicate links exist on the MM Clinical Homepage. However, while some users find this redundancy helpful, it falls under the category of preference rather than necessity.

From insights to reality

Low-Fidelity wireframes
Low-fidelity sketches progressed to intermediate designs based on user testing insights.

04 User Testing

A/B Testing
We recruited users from various Michigan Medicine departments through the Office of Clinical Affairs. We tested these three prototypes by asking open-ended questions, such as "What do you like about this design?" for the four main departments, resulting in a 83% Customer Satisfaction score.

User Testing Insights:

  • Designs are cleaner compared to the original homepage.
  • 'Resources by Roles' sections should be renamed to 'Departments' for clarity.
  • Users prefer warmer tone colors for the homepage.
  • Alphabetization is preferred over random link placement.
  • Covid-19 guidelines look better on the left-hand side.
  • Directories section placement is appropriate as it's centered to indicate importance.
  • Users prefer a visible layout over hovering design for quicker discovery of elements.
Task Completion
Leveraged a high-fidelity interactive prototype of the Clinical Homepage for comprehensive usability testing. Participants were assigned diverse tasks to assess the functionality of different features during testing sessions.

05 Envisioning the Final Design

The final prototype prioritized consistency, warm color schemes, alphabetization, and an efficient page layout. We removed the dropdown feature to minimize user clicks. This organized layout, featuring identifiable headers ensures a user-friendly interaction.
Quick Search Bar Function
We introduced the Quick Find search bar for fast access to desired links.
Directories
Directories has been rerouted to the top as it is an important and heavily used section that crosses all job families
Buttons
Clinical References- Content has been reorganized; buttons no longer appear has header sections, eliminating the inconsistency between buttons & headers
Color Scheme
Clinical Resources- Color scheme is consistent, the page layout is consistent, and all content within each header is alphabetized
Page Layout
Clinical Systems Connection - Similar to all prior screens, consistency, organization of content, alphabetization, etc. is present

Feedback Highlights

“There is so much available on the homepage, this ability to search would drastically help. It is very simple to use.”' - Nurse X
‍
“The website looks very clean, it is so much easier to read and focus on.” - Chief Physician X

06 Takeaways

Next Steps

Implementation! With the prototype tested and reviewed, we will need to build the front end using the following tech stack: HTML, CSS, JavaScript

  • Challenges: The Quick Find bar will require more time to in order to reliably index the site and provide users what they’re looking for.
  • Recommendations: Use Bootstrap v5. Bootstrap is an incredibly useful tool for frontend developers, especially when it comes to organizing content and having it displayed in a simple-to-understand manner. There are many University of Michigan websites that use customized versions of Bootstrap, including the main U-M login page for students &
    staff.
  • Measuring Success: We handed off the final design. To measure success, I would monitor website performance for user behavior (time on site, pages per session, bounce rate), track conversion rates and leads, and compare the redesign’s metrics to baseline statistics.
Challenges
  • Stakeholder Alignment: Ensuring consistent alignment with stakeholders throughout the project to avoid differences in expectations.
  • Iterative Design: Managing the iterative design process to incorporate evolving user feedback while maintaining project timelines.
Learnings
This experience not only enhanced the Clinical Homepage but also deepened my comprehension of design methodologies and their influence on user satisfaction and system efficiency.
  • User-Centered Approach: Keeping the users at the center of our designs ensured final product enhanced the experience.
  • Collaboration: Cross-functional collaboration contributed to project success by enabling knowledge sharing and minimizes errors.
  • Iterative Improvement: Embracing a culture of continuous improvement and iteration based on user feedback leads to more refined design solutions.
Next case study
Next case study