Dem Dx

visualizing symptoms pathways and onboarding pages

for U.K. based medical startup Dem Dx.

Dem Dx

  • Tools
  • Illustrator
  • Photoshop
  • Figma
  • After Effects
  • Size
  • web 1920 x 1080 px
  • Medium
  • Interface
  • Date
  • 2019.12 -
  • Research Publication
  • HCI International 2020
  • : Late Breaking Posters


To maintain and improve a certain level of diagnosis, it is important that medical students and professionals continuously use clinical reasoning skills and practice diagnosis. The existing app aims for medical students, nurses, and junior doctors to improve their clinical diagnostic-reasoning skills. However, clinical reasoning is challenging to teach and learn because it is complex, implied experience, and effectively invisible for students. With this in mind, this case study proposes a visualized diagnosis service to support young medical professionals to train efficiently. This case study only focuses on redesigning the previous diagnosis app by providing a new visualized experience.


The previous service has one feature that helps users to experience the diagnosis. It provides texts and simple icons that users can start from the system. Then users can narrow down to specific categories of symptoms. Since the users are mostly students who have little experience in real diagnosis, they had a hard time selecting specialties and symptoms from the first page. Also, some doctors who are familiar with their specific field had a hard time looking up the other specialized area. This makes doctors hard to choose the options from the first step. This is because the existing service only provides text-oriented information which includes the plain text of the systems and icons. This can be tricky for the users who are unfamiliar with each different type of field and get confuse what kind of different symptoms belongs to each area.

Ideation & Solution

To overcome this existing problem, a Body Map Pathway is designed to ease the selection from the first page. The Body Map Pathway is a visual guide that shows the body figure from head to toe. It provides different patient types of body figures including woman, man, and child. It helps users spontaneously choose the part of the body from the first screen.

Case Study


Due to the COVID-19 pandemic, all user tests were conducted by remote using Google Forms and Participant 1 is a GP and participant 2 is a medical doctor. Both of them worked more than 5 years in the UK and participated in the case study to test the usability and feasibility.

This case study intended to test the effectiveness of a new service which is a guidance of symptom diagnose by using intuitive visualization of the human body.

The results of the case study showed that the Body Map Pathway service supported the users to practice diagnosis by recalling the memory that they have learned before. They experienced the Body Map Pathway itself was intuitive enough to choose symptoms quickly that match body parts. Based on these findings, the use of the Body Map Pathway has potential benefits in practicing the symptom diagnosis and eases the choice of specialties and symptoms by showing visual guidelines. The result also indicates that the visual images used in the Body Map Pathway are accurate and the visual design matches the current brand image.

Opportunities to Improve

Opportunities to Improve 1

1. Both participants 1 and 2 showed no problem with finding the General Symptom Button. But both participants did not aware of Dropdown Button and could not change the gender of the human body.

2. Providing text as well as image buttons at the same time makes the participant confusing because these buttons do not feel like a coherent interface.

3. From the medical professional's point of view, general symptoms, demagogical condition (skin), and the Body Map Pathway should be the same level of choice.

4. Both participants had no difficulty clicking the body parts. However, the interaction of showing the symptom list might not be intuitive. Since the list of symptoms is positioned below the Body Map Pathway and hidden from the screen, participants have to scroll down to check the symptoms. It means scrolling down to see the list is less practical for the users.

Further Development

Subsequent study was conducted to offer more advanced services to reduce the inconvenience of the text information-oriented diagnosis practice at the first stage. And further improved the hierarchy of information to match the expectation of the medical professionals' point of view.

Onboarding Page

The previous onboarding page explains 3 key functions of the service before users start to use the app. However, this onboarding page is less attractive to motivate potential users to download the app and less helpful to give adequate information about the key functions. So, redesigned onboarding page gives a clear graphic that is relevant to the service identity and motion to appeal to the users.

Previous Onboarding Page
Onboarding Page Animation3
Onboarding Page Animation 2
Onboarding Page Animation 3

Are you interested in my project and want to know more?
Contact me!