Asset 6_background.png
Asset 4_4x logo.png

Hail Dental

A healthy smile begins with better dental habits and communication

Asset 7_png.png

Hail Dental

An app that connects with sensor-enabled toothbrushed and delivers timely feedback that empowers patients in their daily oral care routine. It also provides easy communication regarding pain and symptoms between patients and dentists

Project Type:​

​School Project

​Timeline:

3 Months | 2019

Our Team:

Asset 1_4x.png
1564681377435.jpg
1611244957438.jpg

Jingwen Li 
Jessica Cheng 
Natalie Guisinger 

My Role:

Concept Generation, Design Research, User Interview, User Testing, Interface Design

Tools:

Figma
Illustrator

Untitled-1_3x.png
HKGT062_3x.jpg
Asset 8_png.png

Dental Disease is one of the most common chronic diseases in the U.S.

95% of the $108 billion spent annually on dental services in the U.S. is used to treat the consequences of oral diseases. Dental disease is closely linked to poor oral hygiene behaviors (OHBs). Thus, supporting individuals in optimal OHBs will be the best way to prevent dental disease.

Our professor at Umich was involved in research regarding smart toothbrushes and dental care systems, so she gave us the prompt to design an engagement application solution that paired up with sensor-enabled toothbrushes. The goal of the application is to support the dental needs of busy college students and provide long-term oral health interventions that influence students' OHBs at home.

Research

In order to better understand college students' dental needs and problems they faced throughout the daily oral care routine, we decided to use 4 different methods to research the topic.

1

1

Google Survey for 50+ Students

Screen Shot 2022-11-02 at 8.57.26 PM.png

1

3

Interview with 3 U of M Clinicians

mccomas.png

Dr. McComas

Clinical Assistant Professor of Dental Hygiene 

romeshn.png

​Dr. Nalliah

Clinical Professor

stefanac.png

Dr. Stefanac  

Senior Associate Dean for School of Dentistry

“We tried to send out surveys after treatment, but the response rate is only 20%, and we have a hard time receiving patient’s feedback and follow up after the appointment.” 

__ Dr. Stefanac

"Patients usually have a hard time answering when was the last time...question and they have a hard time describing the pain and location. "  __ Dr. Nalliah

1

4

Observe Students' Daily Oral Care Routines

2

Interview with Students on Campus

(15 mins each, 10F, 2M)

Screen Shot 2022-02-05 at 1.31.58 AM.png

Findings With Clinicians:

1) Issues with communication between dentist and patient:

  • Pain and symptom explanation

    • International Student’s language barrier

2) Student’s dental behavior

  • Diet

  • Daily dental routine/quality

  • Good to digitally notify students once in a while (instead of spamming them with dental information)

3) Costs of M-Dentistry

  • Faculty (same price of private practice)

  • Residency/grad students (35% off)

  • Predoctoral students (50% off)

4) Patient Privacy

  • HIPAA

  • Patients can say/input data/information to their dentists (but M-Dentistry cannot give that information out)

5) Modes of Communication between dentist to the patient 

  • Scratch pads (with blank diagrams of sets of teeth)

  • Verbal conversations

  • Booklets of diagrams

Findings With Students:

1) Lack of oral health knowledge & hard to maintain healthy habit

 "I don't really brush my teeth for at least 2 mins every time, and I don't know that we have to floss daily in order to maintain healthy oral health routine." __ Joyce

2) Development of healthy dental behaviors in college

“I think I'm a much better tooth brusher. I use mouthwash now and floss better" __ Margaret

4

Research Findings:

After collecting quantitative and qualitative data from google surveys, interviews, and observations of students' oral care routines, we found that many students are:

  • Having trouble with describing pain/ symptoms

  • Forgetting healthy dental behaviors in college

  • Having difficulties to keep a long-term good dental behavior

  • Rarely keeping track of dental history

  • Delaying dental checkup until problems occurs

  • Failing to follow dental instructions after procedures

Design Statement:

“ We aim to create a mobile health application that promotes healthy dental routines to college students and allows for easy communication regarding pain between patients and dentists. 

​Stakeholder Pain Points Analysis:

In order to help us better understand the whole picture of college students' dental journey, we mapped out a stakeholders map and analyzed pain points that occur during different stage of the journey:

​Check - Up Clinic Website

Website to make appointments and ask questions to M-Dental School

Issues:

  • Over half of the students slacked in good dental behavior because they were busy

  • When at an examination: difficulty describing symptoms

  • Difficulty understanding dental issue and treatment

  • Only have a vague idea of procedures, don’t understand fully

Issues:

  • Poorly designed

  • Not user friendly

  • Not enough functions

  • Doesn’t give much information about clinic

​Doctors

​Students

Senior Dean for Patient Services

Clinical Assistant Professor of Dentistry

Clinical Professor of Dentistry

Issues:

  • Difficulty communicating with patients at times (especially when describing pain)

  • Want to see more students using school services

Interviewed undergraduate students at the U of M

​M - Dental

Asset 6_4x.png

​Problems & Potential Design Solutions:

With a better understanding of the problems, our team started to ideate potential solutions. The discoveries will inform our product features later on in the process

​Problems

  • Patient has difficulty describing their symptoms to the doctor

​Potential Solutions

  • Teeth diagram to show the location of the pain and the doctor can draw on the diagram to describe the dental problem that the patient has

  • Patient has difficulty describing their pain history

  • Calendar to record patient's pain & diet history

  • Many people do not have a high quality brushing behavior

  • Patient has a hard time understanding the dental problem

  • Many people don't know how their diet affects their oral health

  • Patient rarely receive follow-up after a visit or treatment

  • Doctor does not have access to the patient's diet history & pain history

  • Aftercare reminder message send to the patient every once in a while

  • Engage app interface / design to keep user engage and improve their oral health behavior

  • Video / Chat with doctor talking about dental health behavior

  • Progress report for the patient to view their daily brushing behavior & treatment information

Concept Generation:

Our messy but inspiring & energized ideation board!

Screen Shot 2021-01-14 at 2.43.22 AM.png
Guisinger_Jimmy02_4.jpg
IMG_9690.jpg
IMG_9685.jpg

Features Brainstorming

We used our research insights to inform our product features ideations, then we ran another user testing with our potential users and Umich clinicians to determine whether our idea meets their needs or not. 

IMG_6127_edited.jpg

Personal Map of mouth

Personalized Oral Health Analysis & Suggestions 

Visit / Symptoms History

Personalized Oral Health Reminder 

1

4

2

3

Feature #1: Teeth Diagram

  • Digital scratch pad

  • Personal Map of mouth

    • 3D model of teeth

    • Problem areas, past treatments

Feature #2: Dental Health Analysis

  • Oral health analysis graph helps students to better visualize their oral health condition

  • Personalized suggestions to help students to further improve / maintain oral health

Feature #3: Personalized Reminder

  • Enforce behavior by reminding users of good oral practices

  • Student inputs their diet into app 3 weeks prior to teeth cleaning

  • Student receives personalized reminders from dentist post-teeth cleaning

​Final Design Concept

Design Goal

  • Bridge the communication gap between patients and dentists

  • Shape good dental behavior among users through personalized feed with users’ data, as well as tips

Product User Flow

Asset 14_4x.png

The patient feels pain

Asset 15_4x.png

Locate painpoint using the smart toothbrush

Asset 16_4x.png

Fill out pain and medication record

Asset 17_4x.png

Easily describe the situation during the next clinical visit

Pre-Treatment / Post Treatment

Patient

  • Feels pain

  • Is able to use sensor in toothbrush to mark location of pain

  • Marks and describes on app interface to show dentist

Dentist

  • After treatment, dentist is able to update the map with the crown

  • Marks date, as well as description of issue + treatment for that tooth

​User Testing & Receive Feedback From Clinicians

After finalizing the product features, we draw out our final design concept as low fidelity prototype. Then we introduced our prototype to more than 20 college students to test out the user flow, interface, and the overall user experiences. 

Asset 18_4x.png
IMG_4260_edited.jpg
IMG_4257_edited.jpg
IMG_4256_edited.jpg
IMG_4258_edited.jpg
IMG_4027_edited.jpg

Think Aloud - Design Issues We Found During Our Usability Testing:

IMG_4256_edited.jpg
IMG_4256_edited_edited.jpg
IMG_4260_edited.jpg

✅ Pros:

Dental Health Analysis:

  • ​Users like how they can visualize their improvement overtime 

Tips & Reminder:

  • Easy to access

  • Obvious

Pain Recording:

  • Easy layout

  • Draggable pain scale is very handy

❌ Cons:

Personalized Feed and Tips:

  • Tips should have been on another page

Diet Input:

  • Remove feature, too much going on

  • ​Users don't want to input extra diet data

Pain Recording:

  • Using number to indicate pain level is unclear​

Design Specification (Version 1.0)

Patient's Interface:

Profile Page

Asset 2_4x.png

Teeth Diagram

Asset 3_4x.png

Pain Record

Asset 20_4x.png

Calendar

Asset 21_4x.png

Tips

Asset 22_4x.png

Clinician's Interface

Dashboard – 3.png
Dashboard.png

​User Scenario

Screen Shot 2022-01-30 at 3.45.02 PM.png

With HailDental, a user with mouth pain can use their high-tech toothbrush to locate their pain point

1

Screen Shot 2022-01-30 at 3.45.18 PM.png

The toothbrush would communicate with the app and HailDental visualizes the specific location of the pain

2

Screen Shot 2022-01-30 at 3.46.02 PM.png

In addition, the user can specify what type of pain they are experiencing and other factors

3

Screen Shot 2022-01-30 at 3.46.19 PM.png

The pain summary is updated and the Doctor has access to their profile

4

Screen Shot 2022-01-30 at 3.46.30 PM.png

Once they go into the dentist's office, they are treated

5

Screen Shot 2022-01-30 at 3.46.59 PM.png

The dentist explains that they had to get a crown because their filling fell out

6

Screen Shot 2022-01-30 at 3.47.22 PM.png

The patient is able to track the history of their pain, symptoms, and treatment through the calendar

7

Screen Shot 2022-01-30 at 4.13.53 PM.png

12 hours after the visit, the user is reminded to avoid eating sticky foods for the next day

8

Screen Shot 2022-01-30 at 4.14.28 PM.png

The app also reminds the patient to practice healthy dental behaviors and there are also dental tips for user to read

9

​Video Sketch of Experience

Version 2.0 Iteration

Version 1.0 was created during my undergraduate, and recently I went back to this project and found out there are still space for improvement. I believe the design process for a successful product is always a circular process, and being able to criticize and learn from the past work is essential. So I decided to went through this project again, to redesign and further improve the user interface and experience. 

Screen Shot 2022-09-02 at 12.20.33 AM.png
Asset 8_png.png

Testing & Analysis Version 1.0 's Pros & Cons

Before I went directly to Figma to create new interfaces, there were many things I needed to do :

First of all, I went through my research documentation, this helped me to learn about the problems that I was trying to solve and find out if there were any missing research components from the previous process. 

Secondly, I contacted some of the interviewees from the previous design research and conducted 5+ usability testing for version 1.0. 

Then, I analyzed feedback I received from the interviews and generated pain points insights. These pain points insights helped me to define new opportunities and develop new product criteria for version 2.0. 

Version 1.0 VS Version 2.0

Version 1.0 was created during my undergraduate, and recently I went back to this project and found out there are still space for improvement. I believe the design process for a successful product is always a circular process, and being able to criticize and learn from the past work is essential. So I decided to went through this project again, to redesign and further improve the user interface and experience. 

User Home Page

Screen Shot 2022-08-31 at 11.09.25 PM.png
Screen Shot 2022-09-01 at 11.19.16 AM.png

Version 1.0

Before:

Oral Health Diagram:

  • Icons don't help much, they disturb the clean layout of the diagram

Health Summary & Suggested Tips:

  • Not obvious enough for users

Reminders:

  • Requires extra click from users

  • Users prefer to see it immediately otherwise, against the whole purpose of reminding people

Dental Files:

  • No need to create easy access through the home page since users won't need it very often

Quick Check-In:

  • Not obvious enough to remind users

Screen Shot 2022-08-31 at 11.08.04 PM.png
Screen Shot 2022-09-01 at 11.03.47 AM.png

Version 2.0

✅ After:

Oral Health Diagram:

  • Clean & Easy to read

  • Allows users to visualize improvement

Health Summary & Suggested Tips:

  • Stands out for users​

  • Easy to read

Reminders:

  • Does not require users to click through

  • Helps to prioritize the information

Dental Files:

  • Removes it from the user home page, and place it under the slide menu

Quick Check-In:

  • Pop up overlay reminds users effectively

Teeth Diagram Page - Connect to the Toothbrush 

Screen Shot 2022-09-01 at 12.02.55 AM.png

Version 1.0

Before:

Instruction:

  • Unclear instruction

  • Users don't know when to start

View Dental History:

  • Unable to view past history​

Screen Shot 2022-09-01 at 12.11.40 AM.png
Screen Shot 2022-09-01 at 12.11.56 AM.png
Screen Shot 2022-09-01 at 12.12.11 AM.png

Version 2.0

✅ After:

Instruction:

  • Detailed step-by-step instruction, both verbal and visual

  • The Bluetooth button allows users to decide when to connect and start brushing

View Dental History:

  • Allows users to click and view dental history

Add on Feature - Brushing Timer 

Screen Shot 2022-09-20 at 6.15.25 PM.png

❓❓❓Why adding this feature?

​Because research indicates that Brushing teeth for two minutes twice a day, says the American Dental Association (ADA), will keep the teeth in top form and prevent oral diseases. Our interviews research also indicated that most college students either don't know about this or always forget to brush for enough time. Embedding this brushing timer as part of the user flow could provide real-time feedback and encouragement to the user. As a result, it helps college students to maintain a healthy oral health routine and keep their teeth in good condition. 

Version 2.0

Teeth Diagram Page - Locate Pain Point

Screen Shot 2022-09-01 at 12.31.12 AM.png
Screen Shot 2022-09-01 at 12.32.41 AM.png

Version 1.0

Before:

​Locate Pain Point:

  • If users want to locate multiple pain points or relocate pain points, the pop-up confirmation with dark background requires too many clicks from users

Paint Point Questionnaire:

  • Number does not communicate pain level very well

  • The "Next Page" button makes users think the questionnaire is too long and there's no progress indication

Screen Shot 2022-09-01 at 12.31.29 AM.png
Screen Shot 2022-09-01 at 12.32.28 AM.png

Version 2.0

✅ After:

Locate Pain Point:

  • Allows users to easily relocate / add multiple painpoints

Pain Point Questionnaire:

  • Removes the number scale and further highlight the color scale 

  • Single page questionnaire

Calendar & Treatment Summary

Screen Shot 2022-09-01 at 12.58.37 AM.png
Screen Shot 2022-09-01 at 12.59.15 AM.png

Version 1.0

Before:

Calendar:

  • Inconsistent layout

  • Information hierarchy error

Treatment Summary:

  • Too small to read

  • Hard to read

Screen Shot 2022-09-01 at 12.58.53 AM.png
Screen Shot 2022-09-01 at 12.59.01 AM.png

Version 2.0

✅ After:

Calendar:

  • Consistent layout and color-coded

  • Clear information hierarchy

Treatment Summary:

  • Uses the entire new page to show all the necessary information

  • Provides option to download PDF 

Dental Tips

Screen Shot 2022-09-01 at 1.21.16 AM.png
Screen Shot 2022-09-01 at 1.21.28 AM.png

Version 1.0

Before:

Video Recommendation:

  • No easy filter

Article:

  • The long text seems overwhelmed

  • The "save" button is inconvenient because users need to scroll back to the top in order to save the article

Screen Shot 2022-09-01 at 1.20.53 AM.png
Screen Shot 2022-09-01 at 1.21.01 AM.png

Version 2.0

✅ After:

Video Recommendation:

  • Easy filter on the top

  • The scrolling interaction improved the overall experience

Article:

  • Clear information hierarchy

  • The "Read More" button provides breathing space

  • The "Save" button float on top of the page, allowing users to save the article anytime without scrolling back to the top

​Add on Feature -- Direct Chat With Dentist 

Screen Shot 2022-09-01 at 1.55.51 AM.png
Screen Shot 2022-09-01 at 1.55.58 AM.png
Screen Shot 2022-09-01 at 1.56.06 AM.png

❓❓❓Why adding this feature?

​Because many interviewees mentioned how their school health portal allows students to message their doctor directly. They can ask questions relating to their symptoms, request medication refills, and receive medical tips after procedures. Most interviewees think this feature is extremely helpful and reduces the communication cost between patient, hospital, and doctor. So I decided to add this feature to enhance the overall user experience. 

​On Boarding

Screen Shot 2022-09-01 at 2.27.26 AM.png
Screen Shot 2022-09-01 at 2.27.35 AM.png
Screen Shot 2022-09-08 at 6.36.13 PM.png
Screen Shot 2022-09-01 at 2.27.53 AM.png
Screen Shot 2022-09-01 at 2.28.01 AM.png
Screen Shot 2022-09-01 at 2.28.10 AM.png
Screen Shot 2022-09-01 at 2.28.18 AM.png