Interactive Study Outline

Lead Product Designer - Jan 2020 - Mar 2020


Sole designer leading end-to-end process


1 PM, 2 Engineers, 3 Doctors (Education)


Expand core offerings for medical students

To compartmentalize and outline study material in our videos, I created a feature that made it easier for students to review internal medicine.

  • Led user research and interviews to pinpoint user pains and needs
  • Closely collaborated with Education to define learning objectives and study material
  • Frequently met with Engineering to test Data and review front-end output


Majority of medical students don't attend in-person classes

After speaking with medical students in my network who were in their first 2 years of medical school, I found a pattern in their behavior. They were skipping in-person classes and opting for online lectures. My conversations with medical students led me to dig a little deeper.


1. Medical students are watching more online videos for medical education information

For the past several years, medical students in the U.S. have been skipping in-person pre-clerkship classes. The Association for American Medical Colleges has reported increasing evidence that students are turning towards online content for their learning needs.

2. Our video lengths and content are overwhelming users

Following the launch of SketchyIM, I distributed a survey to analyze video satisfaction. The feedback we received on our internal medicine videos showed that they were overwhelmed.




Too long



3. Medical students have limited time and energy

I asked 6 of our in-house doctor what a typical schedule for a medical student in their internal medicine rotation would look like. I found that most internal medicine rotations across different medical schools would last about 2 months, averaging 65-70/hr work weeks.

4. They need the most important stuff immediately

Because students have such tight schedules, they want more engaging ways to learn and access to resources that are on-demand, flexible, and high-yield. Due to limited time, students use curated notes and study material so that they don't have to create their own.


Working with Education

First, I asked our doctors what material was crucial for clinical rotations. It turned out that there are two mental models all medical students should know by heart. One is the differential diagnosis, DDx, and the other is S.O.A.P., or a patient's clinical chart.

"DDx" and "S.O.A.P." are crucial mental models of clinical knowledge students learn during their clinical rotations.

I worked with our doctors to understand how internal medicine videos were structured. Our videos included taxonomies common in a student's internal medicine rotation, shown below.

Working with Data

I worked with Data & Engineering to understand the data itself. Using information design, I mapped relationships we would make between clinical knowledge and our content.

I also introduced Airtable to the team so that we could create more specific groupings of data and make it easier for Engineering, Product, and Education to sync on taxonomies.


Initial drawings

Initial drawings of the sidebar outline used drafts of data sets, which were being developed while I iterated on designs. The outline first started off with 2 components, Differential Diagnosis and Assessment, before Subjective, Objective, and Plan were integrated.

Mid-fidelity iterations

Because I was showing mockups to doctors who were unfamiliar with UX principles, I prototyped a number of iterations to explain a variety of UI patterns. Even if it was obvious to me which designs did and didn't work, I presented all possible iterations to explain why and how some were potential solutions. This helped my team understand that each of my design choices were user-centered and rooted in psychology.

→ Here are a few iterations of the types of notes that a user would find on an outline.

Iteration 1

Header categories as radio buttons.

Iteration 2

Header categories as toggle buttons.

Iteration 3

Dropdown to view sub-diseases.

Iteration 4

Sub-disease as labels for notes.


Interaction design

To visualize how the outline would interact with the image and its symbols, I used Principle to prototype UI changes and animations.

Main Headers (Subjective, Objective, DDx, Assessment, and Plan) reveal notes. When toggled on, a Main Header will reveal relevant notes in their respective categories.

Another layer of information exists beyond a note. Each bullet has a 1:1 relationship with a symbol on the artwork, but we show that bullets are grouped with keywords.

Because subjects overlap in the SketchyMedical universe, we provided users with a way to reference other artwork. The image keyword has similar functionality to DDx.

User Testing

I tested iteration (3) with a group of 5 participants using an Axure prototype. They found it difficult to study sub-disease notes and access key information. Iteration (4) addressed this confusion by flattening the hierarchy between a main disease and its sub-disease, and creating a new "Overview" button to make crucial notes accessible at all times.

  • Organization — label sub-diseases instead of having a dropdown
  • Visual design —make active components more salient more contrast and color
  • Interaction — remove toggle controls for main diseases


Simplified interactions, powerful data

I used my observations and findings from user-testing to simplify patterns on the sidebar outline. My goal was to maintain important associations between data points and minimize the number of visual changes made as the user interacted with the outline.

View Figma prototype here


Positive feedback and praise

⭐️ 4.35

Overall look and feel

⭐️ 4.25

Ease of navigation

⭐️ 4.25

Necessary information

"It's very interactive and intuitive. It's great as a quick reference during downtime. — Christopher J. (David Geffen, Class of 2021)
  • Excitement and praise from medical community
  • High promoter score, along with pleasant and aesthetic experience
  • Increased user engagement with internal medicine content


Product and Engineering collaboration clarifies roadmap

I met with our Doctors to gain an understanding of the study material and thus, gave me the ability to better approach designing the sidebar outline. I communicated my understanding of Data and Design to the Product Manager so that we could align on product requirements and goals for our users. This allowed us to create a realistic roadmap and manage the project in digestible pieces.

Coordinate more with Marketing and Customer Service

Through this project, I learned that user engagement would increase when Product coordinated with Marketing and Customer Service for the release of new features. For future launches, Product would work more closely with Marketing and Customer Service to publicize the feature, report bugs, answer questions, and troubleshoot any problems users were facing.

Tight-knit teams move fast

Every few days, I met with the front-end engineer to test data accuracy and interactions of the sidebar. Our conversations helped him identify feasible solutions, code pixel perfect designs and improved our output speed. We continue to have frequent meetings to review designs.