Circlage Surgical Evaluation Platform
UX Design and development of Circlage, an AI-driven medical assessment platform.
How might we create intuitive UI on a platform for busy medical residents?
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.
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.
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.
The scope of this project included UX design, UI design and iterative development.
In the 6 month timeline for the project, we created an MVP with main workflow functions.
The project was built with an Azure database, and developed for security and scalability.
We started with the initial design and results of the Hexcite project.
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.
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.
- 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.
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
With the feedback on visibility from our heuristic testing, we iterated upon the original Hexcite style tile.
Updated Style Guide
Full Style Guide here
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.
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
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.