top of page

Dental Touch - Mobile App Design

Visual Design for Interactive Contents

Medium

IOS Device, iPhone, Desktop, Animation

Description

Dental Touch is a mobile App that based on a real-life story. It aims to help international individuals addressing tooth ache, understanding the U.S. dental industry, choosing the trust worthy dentists, and overcoming the medical language barriers.

Date

April-June 2022

Tools

Figma, Miro, Draw.io, Illustrator, Photoshop, After Effect

295.png

# Mobile App              # UI/UX                   #Video Walkthrough   
#Animation                #Interactive Webpage         #Prototype

Project Overview

Three main features for international individuals who experience tooth ache. And taking advantage of their dental journey in the U.S.

App Contains

1

Joyride/

On boarding

2

Customized tooth report

3

Pick up

dentists

4

Verify your

dentist 

5

Online

consultation  

6

Medical

Interpreter   

Project Overview

User Journey

User Journey.jpg
User Journey

Scoop of Work

work timeline.png
Scoop of Work
Purpose Statment

Benefits & Purpose Statement

Dental help is a tool for international individuals to get dental consultant and medical translator online and share your thoughts in the community. Featuring over 300 trusted online dentists and specialists consultations, and advanced medical translators. You can find all your concerns and answers here.

 

CUSTOMIZED SUGGESTIONS - Provides you a customized suggestion based on your personal situation at the beginning of your tooth ache, so you can get the idea of what to do next.

 

VERIFY DENTISTS - Search a dentist that you are working with or have been worked with. Get to know this dentist reviews and creditability.

 

TRUSTED ONLINE CONSULTATION - Chat with a live dentists or selected specialist based on your choice to get more suggestions about your tooth treatment plan.

 

TRANSLATOR SUPPORT - Have a video call with a live medical translator when you are in the clinic physically and have difficulty about some medical terms. You can also book an appointment with a selected translator for your next dental clinic visit.

​Pain Points

  • I don't know what to do with my ache tooth.

  • I don't know whether I can trust this dentist or not. How can I know she can do a good job on root canal treatment.

  • I can't understand some medical terms and have difficulties to communicate with dentists when I go to clinic.

Brag Points

  • Customize the best suggestions for your next step.

  • Verify and evaluate credibility of your current dentist.

  • Provide a free online consultation to get more suggestions from other dentists.

  • Support you a free online video call with professional medical translator.

  • Schedule an appointment with a selected translator for your future in-person clinic visit.

Pain Points & Brag Points

User Flow
Pain Points

User Flow

There are 3 flows in total, responding to 3 pain points. This will walk users through the whole journey by clicking and develop the brag points.

Screen

Action/Event

System Action

Wireframes

Wireframes

Sktches

IMG_0481.JPG
IMG_0482.JPG
IMG_0483.JPG
IMG_0484.JPG
IMG_0485.JPG
IMG_0486.JPG
IMG_0487.JPG
IMG_0488.JPG
IMG_0490.JPG
IMG_0489.JPG

Wireframes

Screen Shot 2022-07-18 at 12.43.14 PM.png
Screen Shot 2022-07-18 at 12.43.47 PM.png

Usability Test

Screen Shot 2022-04-28 at 8.04.07 PM.png
Screen Shot 2022-04-29 at 1.48.05 PM.png
Screen Shot 2022-04-29 at 8.29.08 PM.png
Screen Shot 2022-04-30 at 12.14.47 PM.png
IMG_0451.JPG

​Observational Questions:

  1. What do you think you can click on?

  2. Where are you?

  3. What do you think this icon mean?

  4. Look at icons, what do they mean?

Task-based Questions

  1. How do you get the idea/suggestions about your tooth ache?

  2. How do you identify your dentist creditability?

  3. How do you get online consultation from other dentists? How do you chat with a live dentist online?

  4. How do you contact with an online live medical translator when you are in the clinic?

  5. How do you make an appointment with a popular translator for your future clinic visiting?

Usability Test

Findings

Findngs

Color coding:

Red dot: weakness/improvements

Green dot: Strengthens

​

Screen Shot 2022-07-18 at 1.04.53 PM.png
Screen Shot 2022-07-18 at 1.05.00 PM.png
Screen Shot 2022-07-18 at 1.06.01 PM.png
Screen Shot 2022-07-18 at 1.05.45 PM.png
Screen Shot 2022-07-18 at 1.05.55 PM.png
Screen Shot 2022-07-18 at 1.06.07 PM.png

Typography 

Poppins

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890$%!@#&

Aa     Semibold     Main title

Aa     Medium        Headline 1 & Headline 2

Aa     Regular         Sub-headline

Aa     Light               Body copy

​

​

Explore            Main Title               32px

Before you go              Headline 1                                20px

Findings                             Headline 2                                     18px

Dr. Wendy                               Sub-headline                                     16px

Chinese                                         Body copy                                                   14px

Typography

Logo

Logo

Sktches

WechatIMG1318.jpeg
WechatIMG1316.jpeg
WechatIMG1317.jpeg
Screen Shot 2022-08-22 at 1.03.52 PM.png
Screen Shot 2022-08-22 at 1.08.33 PM.png

Logo

Final Version

Primary Logo

Group 440.png
Group 569.png
Group 570.png

Color

#6E71E5

#EF8F9C

R: 110 G: 113 B:229

R: 239 G: 143 B: 156

App Icon

Template - App Icon - P3.png
Template - iMessage App Icon - P3.png

Logo Usage

144.png
Group 571.png
Group 574.png
Group 575.png

UI Kits

UI Kits

Icons

Arrows & Directions

User Interface

Color Palettes

Group 586.png
Group 587.png

#6E71E5

#ECF2FF

#FAF0DB

#FA9056

#6FCF97

#232325

#979797

#C4C4C4

UI Pattern

Group 590.png
Group 670.png
Group 588.png
Group 589.png

Visual System

Group 671.png
Group 672.png
Group 673.png
Group 677.png
Group 674.png
Group 676.png
Group 678.png
Group 680.png
Promotional Video
Prmotonal Webpage

App Screens

Joyride & On boarding

iPhone in Hand Mockup.png
Joyride 1.png
Joyride 2.png
Joyride 3.png
Sign up 2.png
Sign up.png
App Sreens

App Screens

Explore

Group 677.png
Group 678.png
Group 6781.png
Group 679.png
Group 577.png

App Screens

Explore - tooth exam & report

Group 577.png
questions 2.png
questions 14.png
questions 4.png
questions 16.png
questions 17.png
questions 23.png
questions 21.png
questions 22.png
send report.png

App Screens

Dentist 

Group 578.png
pick dentist 11.png
pick dentist 7.png
Validation 5.png
pick dentist 44.png
Group 5781.png
Consultation 0.png
Consultation 6.png
Consultation 16.png
Consultation 21.png

App Screens

Community & Profile

Group 579.png
Translation 1.png
Video call 3.png
message center 1.png
profile.png
A191.jpg
iphone_13_pro_mockups_12.jpg
7.jpg
479.jpg
bottom of page