back

Archives / PatientEval

PatientEval

Increase usability for medical students to safely train and assess patients.

Boston ID# 02020
Mobile App 5 weeks

UI Designer
Adobe XD
Mock Patient Workflow
Student POV

4m Read

Overview

PatientEval is a clinical assessment app that helps students practice real life doctor-patient situations. It sets out to assist medical students in understanding how to diagnosis an illness, what key questions to ask, and what physical examinations to perform on the patient.

Problem / Solution

Medical students, our future healthcare workers, require various practices and experiences to learn more about patient types, sicknesses, and procedures. Because pre-med and master-of-med students do not have a license to practice, they cannot fully interact with patients and investigate their illnesses.

The solution is to provide authentic scenarios for medical students to familiarize themselves with the process of diagnoses.

It will include a variety of open cases — which are continuously updated by professors — and offer categories / questions the students may select from to practice their inductive reasoning skills and form a diagnosis.

App Info / Users

Since PatientEval is geared towards Boston University’s pre-med undergrads and Masters of Medical Science students, the targeted audience are—at a smaller scale—people who are enrolled only in
those majors at the university.

Roles / Scope / Constraints

Before jumping in on the project, I oversaw this team as the design manager at BU Spark. Since Patient Eval was also missing a product designer in midst a group of developers, I stepped into the role to create the product’s visuals.

This project’s timeline spanned across a school semester—approxiamately 3 months—and I joined in about two weeks before launch day. The main obstacles in my way were to catching up with the team, streamlining the design process, and providing a working prototype at the end of it. The team also made the decision to focus on the student side only for launch day.

Process

I first brainstormed on what the team already acquired in the last few months, and used the initial design as a basepoint. From there, I created three versions of quickframes that resonated with their research, and professorial contacts.

Quickframes

In two versions, I filled in the wireframes to give the team a hi-fi visual and help them decide on PatientEval’s UI. I also expressed to the team that I imagined PatientEval as a central space that students can easily track their progress with each medical cases they started or completed. And taking in the previous versions 1 and 2, I designed the final version which was chosen PaitentEval’s presentation.

Version A: Quickframe

Version A: Hi-fi

Version B: Quickframe

Version B: Hi-fi

Version C: Quickframe

Version C: Hi-fi

Focused Pages

Here are some 3 journeys I focused on:

Landing and Welcoming

Mock Patient Scenario + Completing a Case

Medical Tab / Accoutns Tab

Mock Patient Scenario

A key aspect of PatientEval is the questions section. With the student / patient interaction, this part of the exercise is intentionally set to make the student aware of symptom asking. The team also wanted those interactions to be as real as possible, so I implemented a process that prevents the students from going back to check the answer before checkpoints. Once a question is asked, you can not take it back.

With each question asked, it is also recorded in the following section: your notepad. From there, the student reviews the patients answers, and selects by relevance to make a diagnosis.

The student enters the diagnosis / diagnoses...

...and completes the case.

Here, all the data that were recorded in the case process is shown as a summary. It includes: the score, diagnosis, selected questions (correct, missed and incorrect), and will be added to ‘My Completed Cases” in their hub.

Completing a Case

A sample of content placement and revisions with case study completion. Every case is now grouped by open, completed, and can be filtered through various calsses.

Student Hub: before and after completing a case.

My Open Cases: before and after completing a case.

Viewing summary of a Completed Case

Medical Cases Tab

While adding a trip, a simple animation in transition will provide additional visual understanding for the user, such as selecting a house to stay at.

Cases sorted by categories

Cases sorted by university class

Cases sorted by age

Accounts Tab

This tab includes sub-tabs: my classes, profile, and settings.

Here, the students can add and delete their classes, change their public profile, and alter notifications.

Quick Style Guide

Prototype

End of Project Preview

Oh dang, you’ve hit the end of the project!

But don’t worry, there are many other projects to explore. Feel free to keep browsing.