award winning

Circlage Surgical Evaluation Platform

UX Design and development of Circlage, an AI-driven medical assessment platform.
Expertise

, ,

Client

Circlage

Timeline

6 months

Challenge

Circlage is a platform that utilizes an AI to assess medical residents’ surgical footage. Originating as a project from John Hopkin’s Hexcite program, Circlage aims to expedite and centralize the process of getting feedback from mentors on surgical performance.

Our goal for this project was to create the UI and develop the front and back-end of the platform.

Success would look like a functioning platform, capable of expanding for more features.

How might we create intuitive UI on a platform for busy medical residents?

Scope

The scope of this project included UX design, UI design and iterative development.

Constraints

In the 6 month timeline for the project, we created an MVP with main workflow functions.

Implementation

The project was built with an Azure database, and developed for security and scalability.

Our Goal

The platform needed to be a central place for medical residents to upload surgical footage, annotate, and send off to the AI or mentors for assessment.

Residents had to be able to create an annotated version of their footage with both typed and voice recorded notes, and get feedback on how to improve.

We needed to figure out how create a streamlined process, focusing on core features with the ability to build out more quality of life features.

We also needed to take into account HIPAA laws and design with safeguards in place.

Our Solution

We needed to design a platform that is intuitive for busy medical residents, with features that would enhance their experience.

Results

Our work on Circlage has been awarded the Gold tier Hermes Creative Award in Web Application/SAAS Product Design.

Awards

2022

Web Application/SaaS Product Design

Hermes Creative Award: Gold Tier

2022

Medical Apps & Software

Vega Award

Our Process

Understand

We started with the initial design and results of the Hexcite project.

User Profile

We first needed to validate the platform in it’s early Hexcite prototype stage with our user base.
After speaking with stakeholders, we discovered more about medical researchers and their current issues with getting their surgeries evaluated.

  • Both medical residents and their mentors have to communicate through email. This includes sending footage of surgeries with notes and questions.
  • Residents are constantly busy, and therefore could benefit from a central, organized place to annotate their footage and receive feedback.
  • In sending out footage and notes as a case study, it was important to uphold HIPAA laws, and create solutions that would keep residents from accidentally breaking them.

Informal Testing

Our first round of testing was an informal evaluation of the heuristics. We wanted to determine the initial pain-points of users in general on the Hexcite prototype.

  • Redundant pages were removed.
  • Icon and button nomenclature was rewritten for clarity.
  • Case creation flow was improved with clearer calls to action, hierarchy, and visual prompts.

With these findings, we iterated on the prototype, and tested with medical residents.

A mockup of a single report page.

Explore

Usability Testing

Score clarity

Users wanted to see the logic behind their AI-evaluated scores. They were unclear what the numbers on their own meant.

Insights and Opportunities
1

Users needed clarity around their scores and rubric to learn what they specifically needed to improve on.

Timestamp

The timestamp feature for adding notes did not feel intuitive for users. They were also unclear on what the tag feature for videos was for. Nomenclature of these options felt confusing.

Insights and Opportunities
2

Timestamp wording and iconography would need to be clear at a glance, which would mean adding titles for buttons.

Dashboard metrics

Some of the personal metric graphs on the user dashboard did not feel helpful to users.

Insights and Opportunities
3

Users noted they were used to dashboards being configurable, with the ability to hide or turn off unwanted metrics.

HIPAA compliance

Testers were concerned that if users were allowed to fill in their own title for a case study, they might break HIPAA if not careful.

Insights and Opportunities
4

Users were worried that inexperienced residents may break HIPAA by accident, and felt default or date-only naming conventions were safer.

User Flow

The initial Hexcite build marked 3 main tasks the user would take.

  • Setting up their profile
  • Uploading their footage, add details, and submit for review
  • View assessment report

After testing, we focused on 2 flows: uploading a video and adding details to submit for review, and viewing an assessed video.

Uploading a video

Flow diagram of tasks needed to upload a video.

Viewing an assessment

Flow diagram of tasks needed to view an assessed video

Design

Style Guide

With the feedback on visibility from our heuristic testing, we iterated upon the original Hexcite style tile.

Old Design

The initial UI style tile.

New Design

An excerpt of the Circlage style guide.

Validate

After testing the new high-fidelity prototype, we made changes according to our findings.

  • Broke down the main 2 flows into distinct parts, creating a comprehensive video upload flow, video labelling flow, case creation flow, video sharing flow, and a generate and view assessment report flow.
  • A HIPAA advisory warning was added to video labelling and sharing options
  • Annotating the video with a written comment or voice recording was made clearer with higher contrast visual cues, and timestamping was made the default condition.

Create

Development

We created a story for the user, following their path through the platform and the technological steps we would need to implement to support this path.

A map of the Circlage user's technological journey through the platform

Platform Framework

We implemented the following frameworks and technologies for building the platform:

  • NextJs/React for front-end, UI, and state management
  • Directus and GraphQl for the back-end
  • SQL Server as a database for HIPAA compliance
  • Azure blob storage for the videos and audio files
  • Azure Authentication, for secure 3rd party authorization

Custom Build

We created various features and customized it specifically for the Circlage platform:

  • Uploading surgery videos with the option for drag and drop from the user’s desktop
  • A video player and audio recording feature
  • The timestamped notes and general notes added to video files
  • Displaying report data generated for each video
  • Statistics for each user account

Lessons Learned

Due to the limited scope of the project, we had to focus on very key features. Some of the features to be included for future iterations included:

  • The video sharing feature.
  • Timestamping videos.
  • A search function for videos.
  • Bookmarked Videos and Video Library pages.