Smart IRB Website Redesign
5 Weeks
20 Screens
Website
Project Context
SMART IRB is a platform designed to ease common challenges associated with initiating multisite research and to provide a roadmap for institutions to implement the NIH Single IRB Review policy. Freely available for institutions and investigators, SMART IRB is an integrated, comprehensive platform that allows flexibility in the size and scope of collaboration to enable IRB reliance for multisite studies across the nation, regardless of funding status.
The team at Harvard Catalyst receives a lot of emails from users asking for assistance in the form of emails and support tickets. Axle was brought on to streamline the smart irb process end to end .
Roles
Tools
Client
— Problem Statement —
“How might we make information more findable for users and minimize the number of tickets Harvard Catalyst’s support team receives?”
Old Website
Key Issues to Address
“Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.”
Aesthetic & Minimalist Design
Lack of balance between text & visuals. Incorporating more visuals, whitespace, & visual hierarchy is needed here.
Join SMART IRB button & “Learn more about joining today” take users to the same page.
“Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.”
Recognition, not recall
Amount of text is overwhelming and call to actions are not standing out. Instead there should be clear instructions & call to actions that stand out.
instructions for investigators & IRB/HRPP staff are lost in a sea of text.
“The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.“
Match the Real World
Provide users a clear list of requirements they need to successfully join.
Distinguish difference in user requirements for creating a new account if user belongs to a participating institution vs. what a user needs to do to get their institution to becoming a participating member (maybe before even creating their account)
“Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.”
Aesthetic & Minimalist Design
hard to tell what information is important on this page.
contact us link is hiding in between content
current agreement & resources for this process provide more important info than “now available…” , “learn more”, & “background” sections on the page. Information needs to be reordered.
suggest a content audit to remove unnecessary language & communicate the sections listed above with less words.
“Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.”
Flexibility & Efficiency
User should see a table of contents equivalent so they can jump to terms in the page without scrolling through the whole list.
“Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.”
Recognition, not recall
terms blend in with the paragraphs, create visual hierarchy so terms stand out from the definitions and the list is more easy to scroll through.
“Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.”
Flexibility & Efficiency
Remove endless scroll and incorporate pagination instead. User should be able to get to the footer without scrolling through the whole list of 1000+ institutions
if user does not see their institution (after search), give them prompt for next steps to get their institution to become a member.
Consistency & Standards
“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.”
icon looks like it opens new tab with intuition information but it does nothing.
“Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.”
Aesthetic & Minimalist Design
A lot is going on right side with getting started & has your institution joined sections.
suggest a content audit. At the point there is a lot of repeating information across pages & plenty of room to reduce redundant information. Simplicity is key. The less users need to click around to find the information they are looking for, the better.
“Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.”
Aesthetic & Minimalist Design
suggest a content audit to minimize clickable sections, see if sections can be grouped together to minimize clicking
“Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.”
Flexibility & Efficiency
At this stage a form with a list of drop-down to select from (example: common issues or problem areas) & input fields might be better for the team so they can triage more efficiently.
Consistency & Standards
“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.”
request a consultation button opens up a new email, which isn’t clear from button. The other two buttons open up new page.
The Solution:
Smart IRB Website Redesigned
Impact
Addressed issues uncovered from heuristic evaluation
aesthetic & minimalist design: create visual hierarchy to create separation for all the text content and redesign so new website is consistent to the new SMART IRB portal designs
Clear call to actions -> join / login; help new users find a clear starting point
Findability/Self-help: provide findable resources for users to find help on website rather than email the support team
minimized clicking & evaluated information architecture to improve findability
chatbot assists users in finding information on the website and taking them to the contact form