MedSims
Company: WebMD
Tools: Figma, Adobe XD (initially), Adobe Illustrator, Adobe Photoshop, HTML, CSS
Building a medical simulation application, while also designing the content tool that writers will use to build it.
MedSims is, put simply, a web-based application that allows medical students seeking credits, doctors needing credits for their further education requirements, or curious physicians who wish to challenge themselves to take part in a simulated medical case.
That sounds simple, until you realize just how much a physician needs to be able to do that. MedSims allows a physician to see a simulated medical chart with all of the patients information (biometrics, previous prescriptions, case summary, medical history, the list goes on), prescribe new medication, speak to the patient in a simulated video interview, and finally, diagnose them.
Working on it was incredibly difficult. Especially since there needs to be some way to create these cases, and none currently existed.
The challenge: create a visual, accessible platform for medical case simulation, and an authoring tool to allow writers to create and edit cases on their own.
We’ll start with MedSims. First, here’s what a simulation starting point looks like:
A screenshot of the Patient Introduction page of a MedSims case. Click to enlarge.
There’s a lot going on.
This is the beginning portion of a case. If it seems excessive, that’s because for most people, it is. However, physicians need detail, and lots of it. The goal of a MedSims case is to simulate all of the info and possible choices that a doctor would need in a given case. Along the left, you’ll notice our simulated medical chart, which sticks with them throughout the simulation.
Here’s the flow of a typical MedSims case:
Let’s take a look at each section.
Interview
The interview is one of my favorites things about the MedSims platform, because each one is a recorded video with actors and an in-house set. Seeing them come into the office and watching the taping sessions is a very cool experience.
Though the questions are limited, the video interview was created as a way to 1. ) help the physician/student immerse themselves in the case and therefore enhance the realism of the simulation, and 2. ) simulate the information-gathering portion of any office visit, where the doctor speaks to and better understands the patients’ concerns face-to-face.
Tests
A screenshot of the Tests page. Click to enlarge.
In this section, physicians/students select for a pre-determined list of tests (added by the MedSims authors), in order to give the patient accurate treatment.
Here’s where a new feature comes into play: Guidance.
A guidance modal, as it appears in the Tests section.
A guidance modal appears whenever a user makes a decision in the simulation. For a test, it will show the test’s results, good or bad, and update the medical chart appropriately.
For a non-test guidance, the modal will give the user information on why their decision was good or bad, allowing the user to understand why a choice should or should not be made.
Diagnoses
For the diagnosis section of the case, we were able to leverage the fact that WebMD (and Medscape, by extension) have already-existing and consistently updated repositories of diagnoses and medications that are used in their other physician tools. This allowed us to employ a search bar as opposed to simply choosing from a list, allowing users to employ their own decision making.
Each choice that the authors believed was a likely pick was also given guidance, so any choice a user makes (that we could anticipate) would give them positive, neutral, or negative feedback.
Here is an example of a guidance modal for a medicine order, which is identical to the one used for diagnoses.
The orders portion is mostly identical to Diagnoses, so we’ll skip ahead to Case Review.
Case Review
Users can receive feedback to their own choices throughout the simulation, as well as see what decisions their peers made.
Case Review is where it all comes together, and is the biggest selling point of MedSims. MedSims biggest customer is, it should be no surprise, medical companies and organizations. The MedSims platform collects data on what choices users made in each scenario throughout the case, and presents those insights and learnings to the customer at the end of the simulation’s lifespan, typically 3-6 months.
This data is invaluable in understanding what physicians do in real-world scenarios, without the expense of performing a real-world trial.
Clinical Composer
What happens when a physician makes one decision in combination with another? One but not the other?
Clinical Composer is our way of answering that and many other questions that arise while authoring a case. Only seen by WebMD and Medscape staff, this is back-end authoring tool that allows authors to create and edit everything about the case, from the patient’s information, to guidance on each test and decision, to the logical rules that determine whether a guidance appears or does not, is positive or negative.
It is much larger than MedSims itself, but I’ll focus only on a couple of examples here.
The Rules Composer is by far the most complex part of Clinical Composer. Within, authors can create their own logic for individual guidance pop-ups, with a simple if-then, and-or system for determining that logic. This allows the author to offer guidance and responses based on whether was made in conjunction with something else, which can turn a positive into a negative for a real-world patient.
An example of a rule, in which the user has not ordered a test, even though they have ordered either one of the other two.
Other portions of Clinical Composer, while they look about as standard as you’d expect an authoring tool to look, are just as detailed, allowing the authors to change every aspect about the case they would like.
An example of the Tests page, where authors can determine which tests the user can order.
A screenshot of the Interview page, with a question on-screen. Click to enlarge.
Learnings from Creo
“If you want to create a great product, you have to start by understanding the people who will use it.”
- Don Norman
I feel that it is one of the recurring themes of, and likewise one of the greatest parts of, my career that I am consistently creating products for users that I am not. For use cases that do not apply to me, for people so far removed from what I do, that I cannot even begin to understand the right way to create something.
When I was just starting out in design, that was terrifying. Nowadays, it’s my favorite part.
We worked alongside the people who would use this simulation, and we collaborated everywhere.
I simply cannot overstate the value of being able to communicate and ask questions and get feedback from users directly, and in this case, we leveraged WebMD’s status as, well, WebMD to include medical professionals and students alike in constant feedback sessions, testing early prototypes and gathering data every step of the way.
Sometimes, more detail is exactly what a design needs.
It was infinitely tempting, throughout the design process, to slim it down, simplify, make it elegant and minimal. And boy, did I try. In this specific case, however, that’s not what was needed. I had to learn to adopt a “more is more” approach to the application, and allow for all of the details that physicians and students needed to be on screen to be there, and not hidden away.
These are people who are used to looking at medical charts and graphs and busy screens all day for a living, after all. It only made sense, once I realized it, that they’d want as much as possible at once.
I am incredibly grateful to have worked on MedSims and Clinical Composer.