Circlage Surgical Evaluation Platform
UX Design and development of Circlage, an AI-driven medical assessment platform.
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.
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
1Users 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
2Timestamp 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
3Users 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
4Users 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
Viewing an assessment
Design
Style Guide
With the feedback on visibility from our heuristic testing, we iterated upon the original Hexcite style tile.
Old Design
New Design
High Fidelity Wireframes
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.
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.