MICHR Website Redesign
Context
Michigan Institute of Clinical & Health Research has been awarded an NIH grant with the purpose of advancing Translational Science. This grant is aimed towards identifying roadblocks in the scientific and operational research that hinder research investigators. The goal is to accelerate the research process from its inception to dissemination. With this idea, MICHR aimed to improve its website to educate the end users about the transition from Clinical Translational Research to Translational Science, improve the navigation of the website as well as find the information they are looking for within 2-3 clicks.
My role
*
My role *
-
Methods: Heuristic evaluation, Gap Analysis, Empathy Interviews, Thematic Analysis, Empathy Maps, Persona, User Journey Maps.
Tools: Zoom, Miro board -
Methods: Content Inventory, Content Audit, IA UX Research, Stakeholder engagement and decision workshops.
Tools: Google sheets, Miro, In-person workshops
-
Methods: Sketches, Wireframes, Prototypes
Tools: Paper prototypes, Figma, Adobe Creative Suite -
Methods: User Testing, Third-part collaboration for website development, Website maintenance.
Tools: Zoom, Dovetail, Wordpress
How might we?
Communicate the role of MICHR in catalyzing research and advancing the study of TS?
Discovery
Contextual Inquiry
In my role as Lead Designer for the website redesign project, I initiated preliminary interviews and engaged in discussions to gauge the overall sentiment among end users regarding the current website. These initial conversations provided valuable insights that informed the development of targeted interview questions.
Heuristic Evaluation based on 10 Usability Heuristics Principles by Nielsen Norman.
It was found that messaging was not clear for users, too many ways to navigate through the website that made it confusing, system was not matching the mental model of the user.
Gap Analysis
We analysed other websites in the consortium to identify the gaps in our website. This was to understand how other groups are presenting information and get some potential design inspiration.
Empathy Interviews
We conducted 20 interviews, 3 leadership, 12 program users, and 5 external users. Our recruitment process included tapping into existing programs within the organization and leveraging internal channels to recruit participants. in-depth participant interviews were conducted through 60-minute Zoom video calls.
These questions were designed to delve into various aspects of user experience, including website usability, navigation, educational content, visual enhancements, and overall user perception.
Empathy Maps
We used to synthesize the information. The empathy maps conveyed that all three user pools had different goals. Users wanted to find what they were looking for quickly, programs wanted visibility, leadership focused on effectively communicating the transition from CTR to TS.
Thematic Analysis
We conducted thematic analysis and came up with codes to categorize information. Additionally, we analysed each data point to recognize patterns and themes in the data we received. It was found that users needed to be educated about the transition from CTR to TS.
Analysis
Users need easy navigation, content clarity and easy access to information.
Educate users about the transition from CTR to CTS
Demonstrate the impact in the community as well as disseminate best practices to other institutions
Design
User Personas + User Journeys
User personas were divided into primary and secondary personas. Primary personas consisted of ‘New users’ and ‘Regular users’, whereas secondary personas consisted of ‘ PI/Mentors’ and ‘MICHR programs’. Persona needs were easy navigation, content clarity, easy access to information.
Users will need to be educated about the transition from CTR to CTS.
All 3 user pools have different expectations from the website.
Sketches
Sketches emphasizing the significance of a program-based approach, featuring extensive site content and organized, categorized information.
Content
Wireframes
Low to mid-fidelity prototypes on Figma highlighting a program based approach, navigation within 2-3 clicks, educating users about the transition from clinical translational research to clinical and translational science.
Content Inventory
An inventory of services and resources that existed on the website, aimed at removing duplicates, adding new offerings, and retaining those that remain relevant.
Content Audit
An audit evaluating the meaningfulness and value of each service or resource, ensuring they contribute effectively to the website’s goals.
Information Architecture
Information architecture refocused from a program-based approach to an offerings and resources-based framework. This highlights offerings related to roadblocks in the translational research pipeline, helping users find relevant content by categorizing information meaningfully within these key areas
User testing on Prototype
User testing was conducted with 17 participants, including primary investigators, MICHR staff, community members, and patient partners. The results revealed that certain terms were confusing and required clarification. Compatibility across screen sizes needed improvement, and accessibility features needed enhancement. Additionally, the testing highlighted the diverse needs and goals of different audience groups, emphasizing the need for more tailored accommodations.
Final Outcome
Categorized Information
Information categorized to focus on the Translational Science pipeline, aimed at identifying and removing persistent roadblocks in translational research.
Enhanced visual retention through the use of icons and clustered information, enabling quick identification of important details.
Filters
Filters designed around categories, audience types, and guiding questions, focused on specific user needs. Guiding questions developed to assist users in identifying relevant offerings or resources.
‘All offerings’ organized alphabetically for easy reference, and prominent call-to-action buttons for easy engagement and access.
Snapshot view
Snapshot view for quick access designed to give users fast access to information, ensuring seamless navigation and ease of use.