Surgical Learning Content Management
Supporting a surgical learning experience by creating a robust back-end media management system.
Understand how external user needs translated to the front-end design implementation
Discover internal media managers’ needs to support all ux requirements of the front-end implementation
Collaborate with engineering to understand pre-existing tools and assets to re-use and build upon as many as possible, where appropriate
Fully map out complex internal system architecture to support user needs and front-end implementation
Detailed interaction design and/or adaptation of all affordances in internal tool
Support and inform product decisions in prioritizing features and affordances due to time and resource constraints
My Tasks
Extremely short timeline; I would estimate this project more comfortably taking 5-6 months in design iteration cycles, but was accomplished in 3 months
Wherever possible, native or pre-existing assets and styles were to be re-used to lighten engineering lift
Challenges and Restrictions
⚠️Warning! The following process documentation includes images taken from surgical videos, including organs, blood, and medical instruments.
Outcomes
higher engagement than previous C-SATS Academy engagement record in first week
20%
playlists assembled by 2 media managers in the first day on the first day
42
01
Company Background
What is C-SATS?
C-SATS, a Johnson & Johnson company, is a surgical education platform—not only do surgeons get assessed on their surgical performances by experts in their field, but they also have the opportunity to view select learning content.
One of C-SATS’ main attractions is the Academy, a resource available to all members that contains thousands of performance videos and case studies to watch and learn from. User insights over the years have indicated a desire for more curated content. C-SATS has also partnered with Giblib, a creator of surgical education videos, to embed some of their videos in the Academy.
Strategy Pivot
This project’s deliverable was a system of curated playlists within the Academy, arranging the best of the Academy performances, case studies, and Giblib videos into specialty-specific and cohesive curricula. This was a first step in pivoting the entire Academy using a more curated content strategy and user experience.
I led the design for the internal tool supporting this feature, while providing support to the designer leading the front-end experience.
02
The Project
The Academy contains over 19,000 videos. Prior to this project, videos were of two types:
High-Scoring Videos: clips from performances that had been uploaded by participating surgeons and given high technical scores
Expert Case Studies: videos created in partnership with C-SATS Expert Reviewer surgeons, for the purpose of displaying specific techniques or surgical decision making
Videos are filterable based on a number of attributes such as specialty, procedure, step, or the presence of attributes including case context tags.
This feature is used for:
Performing surgeons who wish to review certain steps or compare their own performances to higher-scoring videos
Expert Reviewers will link an Academy video in a review to illustrate their point to the performing surgeon
C-SATS moderators select videos to promote for open forum discussion
However:
No video organization beyond sort feature
Generic, indistinguishable names make it difficult to find exactly what you’re looking for
No grouping of videos by subject, difficulty level, etc.
New Feature
User insights over the years have indicated a desire for more curated content. C-SATS had also recently partnered with Giblib, a creator of surgical education videos, to embed some of their videos in the Academy.
This project’s deliverable was a system of curated playlists within the Academy, arranging the best of the Academy performances, case studies, and Giblib videos into specialty-specific and cohesive curricula. This was a first step in pivoting the entire Academy using a more curated content strategy and user experience.
I led the design for the internal tool supporting this feature, while providing support to the designer leading the front-end experience.
03
Research and Front-End Reqs
Consolidated User Feedback Findings
Surgeon wants more clearly-labelled, specific video content that showcases specific techniques or issues, to help prepare for upcoming cases.
Finding 1
Internal media manager wants to easily upload and tag videos, track attributions, assemble playlists, and promote them to the right surgical specialty; this was all currently being tracked across multiple spreadsheets.
Finding 2
Front-End Requirements
Relevant UX Requirements complied by the other designer and product manager on this project for the front-end implementation were:
Multiple tags possible per playlist
Unique playlist names
Optional avatars for video attribution (performer or institution)
Unique playlist names
Differing orders of playlists per specialty (if shared across specialties) due to different priorities per specialty
Pictured below is the main academy page prototyped with the front-end of the playlists UX:
Here is a shot from the front-end design for a playlist video page, including tags, custom video name and attribution, and description:
04
Back-End Reqs and Structural Diagrams
Requirements
Based on the above insights, the internal tool would need to support:
Ability to upload videos and avatars
Ability to name videos and add attributions and tags
Ability to create and store attributions and tags
Ability to create a playlist and add videos to it
Ability to arrange order of videos in a playlist
Ability to set a playlist to show in one or more specialties
Ability to arrange playlist orders by specialty
This is a feature map created to determine the structure of this tool, going through several iterations with the engineering team (shown in full and zoomed in to one branch):
05
Rapid Lo-Fi Usability Testing
Wireframes
Wireframes were iterated on several times in the ideation stage, each time being used for feasibility checks with engineering and simple low-fi usability tests with the media managers. Each wireframe went through a round of both, to ensure that the limited engineering resources could create the tool in the time allotted while still fulfilling the media managers’ needs. Examples pictured below:
An example trade-off: rather than having an intermediate “published + new saved version unpublished” state, which would be most optimal but very engineering-heavy, media managers and I determine that simple “live” and “not-live” states for each playlist would be sufficient, since each playlist would likely undergo little editing after its first creation and could easily pulled, altered, and published.
Other Considerations and Revisions
Should edits to every entity save automatically?
Does this apply to entities that require multiple attributes to exist?
What is the difference between editing and replacing a tag or attribute?
Can the same uploaded video be given different attributes per playlist appears, or does it need to be duplicated?
Should Giblib metadata be customizable within the tool?
Should the general media upload capability be created as part of this tool or independently?
I collaborated with the UX lead of the front-end design to create an interactive usability test for the playlist sorting mechanism, with drag-and-drop being the vastly preferred method (shown below). This strengthened the case for engineering investment in a drag-and-drop interface when making feature trade-offs:
06
Final Specs
User and Business Needs Met
The following are excerpts from the specifications I handed off at the end of the usability testing process, containing:
Re-used pre-existing tab structure (created and used in back-end tools before I was hired)
Re-used all existing dropdown and field styles
Re-used existing case context tag styles for playlist tags
A universal media upload tool that could be used for playlist videos, avatars, and other media assets
Re-used pattern for adding new playlist
Databases for playlist videos and metadata, tags, and attributions
Giblib video importing and metadata editing
Custom thumbnails and titles to differentiate videos
New pattern for video and playlist re-ordering
Specification Examples
07
Hi-Fi Mockups
A Deliverable to Leadership
As part of the handoff, I presented the following high-fidelity mockups of the final experience, which demonstrated how the specifications brought old functionalities and new designs into a new, scalable process:
08
The Outcome
Assembled Playlists
The media managers were able to assemble nearly all starting playlists, which had taken weeks to plan using multiple spreadsheets, within the first day after the tool was deployed. These playlists were deployed across all surgical specialties in the C-SATS Academy.
As stated above, this led to record-breaking traffic to the Academy, 20% higher than the previous record.
Taking it Further
The release of Academy Playlists was a step towards supporting surgeons in further improving their patients’ outcomes. By creating curated curricula, we were targeting skills that surgeons had noted as needing improvement, or had received feedback on from their expert reviewers. Over the next several months, we would continue to develop strategies to support surgeons in their learning journeys, such as moving towards more personalized curation and long-term mentoring solutions.
09
User Testimonials
“This is super cool, and definitely easier to manage than all the excel spreadsheets.”
“This functionality makes it so much easier and intuitive to sort [the playlists]”