OttrCellular Re-vamp project

OttrCellular

Re-vamp project

MacBook Air

Introduction

One of the signature projects at CareDx, is OttrCellular, an enterprise software solution that enhances hematopoietic cellular transplant and therapy programs. The project was to update the UI and its design system.

My role

Redesigning the UI

I worked on overhauling the existing UI to make it more user-friendly, visually appealing, and intuitive. This involved updating the layout, typography, color scheme, and overall visual design to align with the new design system.

Improving Responsiveness

I focused on ensuring that the UI elements and interactions within OttrCellular were responsive and adaptable to different screen sizes and devices.

Enhancing Usability

I conducted usability evaluations and gathered user feedback to identify pain points and areas for improvement in the existing UI. 

Design System Overhaul

I revamped the design system for OttrCellular, creating a comprehensive set of guidelines, components, and patterns. 

Collaboration with Developers

I closely collaborated with the development team to ensure the smooth implementation of the new design system and UI enhancements.

Problem statement

The current user interface of OttrCellular has been reported as difficult to navigate, causing users to spend excessive time finding, editing, or adding patient information. This issue not only hinders prompt response to patient care but also increases stress levels for users. Addressing this problem is crucial to improve efficiency and reduce user frustration.

Challenge

I antiparticle to working closely with the product manager and subject experts to understand the product. I aim to create a seamlessly responsive system that empowers engineers to implement it swiftly and effortlessly. To achieve this, I will conduct thorough and comprehensive tests, carefully analyzing the results to identify areas for improvement. I am committed to delivering a final product that exceeds expectations by prioritizing performance optimization.

Who are users?

Transplant Coordinator

TC use OttrCellular to track patient information, manage transplant schedules, and facilitate communication within the transplant team during hematopoietic cellular transplants.

Laboratory Technician

Professionals working in cellular therapy laboratories who utilize OttrCellular to record and track laboratory test results, manage sample inventory, and ensure compliance with quality control measures. 

Medical Director

Physicians overseeing cellular therapy programs who use OttrCellular to review patient data, monitor treatment progress, and make informed decisions regarding patient care and treatment protocols. 

Design process

I had the opportunity to meet with the product owner who had years of experiences working with the users and gained valuable insights into both the project and the product itself. Additionally, we had the chance to connect with clinicians and lab technicians who have been using the product. They shared their experiences and provided us with a comprehensive list of areas that require improvement.

Design system

 

To ensure a responsive design for the product, I used Bootstrap. I chose Bootstrap because of its highly customizable nature, which includes a versatile grid system and a wide range of components. This framework will enable us to tailor the product’s design to various screen sizes and devices effectively.

Build the design system in Figma and applied the CareDx style guide.

2023-05-30_13-32-03
2023-05-30_13-33-51
2023-05-30_13-35-04

Design approach

 
I have prioritized resolving the most frequent user concerns, such as difficulties in adding plans, viewing data in tablet view, complex input forms, and the timeline feature. The redesigned layout incorporates a new design system and introduces improvements like a navigation bar, a menu sidebar, tables, buttons, and more. Below are some of the pages and features design.

Old

app-cellular-ottr-dev.azurewebsites 37

Updated

MacBook Air

Old

ottr-single.ottr 1

Updated

MacBook Air

To upload the document, I have designed a list view page with a button directing the user to upload a document with explicit instructions. 

Old

app-cellular-ottr-dev.azurewebsites 31

Updated

MacBook Air
MacBook Air

Regarding the timeline feature, I refined the visualization to provide a clear overview of events and their progression. I introduced a timeline widget that allows users to zoom in and out, as well as navigate through different time periods easily. Additionally, I added filtering and sorting options to enable users to quickly find specific events or trends within the timeline. 

Old

app-cellular-ottr-dev.azurewebsites 42

Updated

MacBook Air

Outcome

The redesign has successfully resolved the user issues, resulting in faster review and input processes. In many cases, users are required to handle large amounts of data within tight timeframes. The new design significantly reduces their stress by improving data comprehension and input efficiency.

Check out the

AlloCare App

Post image