Circlage Surgical Evaluation Platform

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

The Challenge

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

Our Process

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.

The Solution

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

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.

Results

The Circlage platform is currently in development.

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

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.

Understand

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

Defining Success
We first needed to validate the platform in it’s early Hexcite prototype stage with our user base.

User Profile
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.

Usability 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.

  • Users wanted to see the logic behind their AI-evaluated scores. They were unclear what the numbers on their own meant.
  • 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.
  • Some of the personal statistic graphs on the user dashboard did not feel helpful.
  • 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.

Explore

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

A diagram depicting the steps of three user flows

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

Flow diagram of tasks needed to view an assessed video

Information Architecture
The architecture was also determined during the Hexcite program.

Design

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

Original Style Guide

Updated Style Guide
Full Style Guide here

High-Fidelity Wireframes

Validate

High-Fidelity Iterations

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.

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

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

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 that had to be cut for future iterations included:

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

Our work on the Circlage platform has made an impact.
Circlage has won a Gold tier award from the Hermes Creative Award in Web Application/SAAS Product Design.

Get in Touch

Learn how Standard Beagle can help you turn your customers into raving fans.
Schedule a short conversation to talk about how Standard Beagle can be your guide.