A mission to improve the experience of managing patients in a clinical study
This project involved the redesign of an existing web platform offering services to manage and engage with patients participating in a clinical study.
The goal of the redesign was to facilitate the user experience, simplify the current complexity of the platform, and modernize the overall UI.
Sketch
Zeplin
Overflow
Invision
Miro
To overcome the issues of inconsistency throughout the existing UI, I decided to create a design system following an atomic design structure.
Additionally, a team decision was made that the new application framework will be Angular Material, so on my end I decided to use Material Design as a base and customize it.
As a clinical product, it had to be 508 compliant meaning accessible to people with disabilities. On my end that meant:
Testing how colors will appear for different types of color blindness and making sure primary and secondary colors can be distinguished.
Testing the color contrast of the product colors: according to 508 compliance, text should have a color contrast ratio of at least 4:5:1 against the background.
Meeting level AA contrast ratio is the legally required level for considering a website accessible.
Level AAA is much stricter, harder to achieve, and required in very specialized digital products, which was not the case for this product.
I had to consider several key points to better assist users:
Assistive Text: Instructions and help text were added to form fields where necessary.
Error Messages: Besides color indication, informative text was provided to help users rectify the errors.
Confirmations: popups and preview pages were put in place to allow users to review and confirm information before finalizing submission.
When I got involved in this project, some research was already completed. It concluded that the current navigation was confusing for users especially because it was mixed for all user roles.
Additionally, the navigation was 4 levels deep and had really long submenus which increased the time people took to look for certain pages. Users were often struggling to find what they were looking for, especially since certain menu items were placed in submenus that did not make sense to the parent menu.
The first improvement exercise was to evaluate the menu items in the current navigation followed by defining a new sitemap.
The product did not have a UI for configuring different user roles and assigning permissions. User roles were configured in the back end only, and there were often issues when changes to the permissions were requested.
The user roles setup was inevitably related to the navigation restructure. The new navigation was to reflect the permissions assigned to a certain user role. Taking that under consideration I designed a simple way of creating a new user role and adding or removing its permissions by the use of checkboxes.
Since there was more demand from patients participating in the studies to communicate with their doctors without having to go to the clinics, the need for developing a video consult emerged.
The requirement was simple: as a study coordinator, the user should be able to schedule a video consult for the patient and initiate the video straight from the study portal.
Creating core templates of the product features was to help in presenting the product to future clients and to serve as a base for any clinical study allowing for customization to satisfy the brand and specific needs of the study.
The templates were built in Overflow as high fidelity wireframes representing the full flows for all features illustrating happy paths, sad paths, and multiple use cases where applicable.
The redesign scope was quite big. There were a lot of expectations from different teams but no solid plan in place. It took some time but once a product roadmap and timelines were created, the process was more streamlined and incremental steps were put in place.
Having to design a 508 compliant product was an amazing learning experience about accessibility. It re-shaped my perspective on how products can be designed to be used by everyone and helped me understand the difference between usability and accessibility.
The overall outcome of the re-design was well received but we lacked in user testing. Some testing was done in the beginning phase but it didn’t continue after development which kept leading to way more bugs and functionality issues than expected.
