Canvas Interface Redesign
2018
Jingwen Li
Canvas Interface Redesign
2018
Jingwen Li
Canvas Interface Redesign is an interface design group project that helps to improve the user experience of Canvas. The current layout of Canvas’s Homepage has much information that is not useful to students and is not conducive to assignment completion. Base on the experience of the recent Canvas homepage, our team listed out some major issues and we design our interview questions. Since almost every student uses the canvas, we decided to interview both lower level and upper-level students from different schools and college. After we did the observation interviews and researchers, we decided to redesign the Canvas into a customized homepage that would fulfill different needs for different students.
Canvas Interface Redesign is an interface design group project that helps to improve the user experience of Canvas. The current layout of Canvas’s Homepage has much information that is not useful to students and is not conducive to assignment completion. Base on the experience of the recent Canvas homepage, our team listed out some major issues and we design our interview questions. Since almost every student uses the canvas, we decided to interview both lower level and upper-level students from different schools and college. After we did the observation interviews and researchers, we decided to redesign the Canvas into a customized homepage that would fulfill different needs for different students.
Hail Dental
A healthy smile begins with better dental habits and communication.
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:
Jingwen Li
Jessica Cheng
Natalie Guisinger
My Role:
Concept Generation, Design Research, User Interview, User Testing, Interface Design
Tools:
Figma
Illustrator
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
2
Interview with Students on Campus
(15 mins each, 10F, 2M)
1
3
Interview with 3 U of M Clinicians
Dr. McComas
Clinical Assistant Professor of Dental Hygiene
Dr. Nalliah
Clinical Professor
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
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
1
4
Observe Students' Daily Oral Care Routines
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
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!
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.
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
The patient feels pain
Locate painpoint using the smart toothbrush
Fill out pain and medication record
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.
Think Aloud - Design Issues We Found During Our Usability Testing:
✅ 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
Teeth Diagram
Pain Record
Calendar
Tips
Clinician's Interface
User Scenario
With HailDental, a user with mouth pain can use their high-tech toothbrush to locate their pain point
1
The toothbrush would communicate with the app and HailDental visualizes the specific location of the pain
2
In addition, the user can specify what type of pain they are experiencing and other factors
3
The pain summary is updated and the Doctor has access to their profile
4
Once they go into the dentist's office, they are treated
5
The dentist explains that they had to get a crown because their filling fell out
6
The patient is able to track the history of their pain, symptoms, and treatment through the calendar
7
12 hours after the visit, the user is reminded to avoid eating sticky foods for the next day
8
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.
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
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
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
Version 1.0
❌ Before：
Instruction:
-
Unclear instruction
-
Users don't know when to start
View Dental History:
-
Unable to view past history
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
❓❓❓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
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
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
Version 1.0
❌ Before：
Calendar:
-
Inconsistent layout
-
Information hierarchy error
Treatment Summary:
-
Too small to read
-
Hard to read
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
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
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
❓❓❓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
