Shared Application Architecture
Project Overview
Clinicians have become overwhelmed by the ever expanding set of medical record-keeping systems and login credentials they are forced to personally manage. These systems feature dissimilar user experiences and do not integrate intelligently with one another. Managing these systems takes time away from clinicians who would prefer to focus on providing the best possible treatment plans for their patients.
NantHealth, a leader in personalized cancer diagnosis and treatment solutions, planned to consolidate its expanding catalog of online oncology services into a unified user experience. I worked with a team of UX professionals, product owners and medical subject matter experts to design the user experience architecture for this new oncology application suite. The suite would follow a style guide and design pattern library which I also helped produce.
Updating our styles and architecture would allow us to unify our legacy services with the products we had recently acquired and with the new applications we were then designing. We focused on ease of use, often hiding the transition points between what had before been separate applications. Our users would experience a single, unified user experience
Project Requirements
Conform new and existing apps to our improved company style guide
Create a unified architecture between our healthcare apps
Add functionality to promote new or complimentary services and solutions
Design an integrated system that feels less like a collection of solutions and more like a singular, intelligent service.
Unified Application Architecture
I used the Axure prototyping tool to design a fully functional high-fidelity UX prototype. The screens above illustrate the desktop and mobile form factors for the application suite. The architecture established in the Oncology Suite was later adopted throughout our existing product catalog. Below is a breakdown of page architecture and universal header I designed.
Interaction Design
Menu item animations
I gave the universal header a number of subtle interaction animations to guide the user's attention and help them transition from one area of focus on the screen to another.
Dynamic screen space allocation
Screen real estate is always a concern when designing highly involved healthcare applications. The universal header dynamically reallocates screen space depending on where the user's attention is focused. When the user begins to scroll down on the page, the header collapses, locking the application header to the top of the screen rather than the universal header.
The animation below illustrates these interactions.
