Mobile + Smartwatch • Health
Concept Development, User Research, Product Design, Frontend Development
SmartBrush in Action
Defining the Strategy
We wanted most of the interactions during brushing to occur when using the watch. After weighing the constraints, pros, and cons of our top three ideas, we selected a dental hygiene app. We thought it held the most potential for designing unique interactions for the watch interface in particular. There were many more ideas that we could implement for solving the problem of poor dental hygiene through gamification, providing facts, and keeping track of progress through a numerical system.
Ideation & Sketches
After discovering the saturation of dental hygiene apps for children in the Play Store and recognizing there is still a need for teens and young adults to correct their poor brushing and flossing habits, we decided to pivot to target 10-20 year olds.
User Journey Map
We based our sketches on the User Journey Map.
Competitive AnalysisTop 3 Competitors:
With the plethora of dental hygiene apps for children, we wanted to differentiate and focus on designing an app for a slightly older user base of young teens to young adults.
Our initial interviews with a dental assistant, mother of two children, and a teenage student allowed us to dive deeper into identifying the user's top needs and primary tasks for our app. The dental assistant emphasized the importance of flossing and finding ways to entertain children so that they would be motivated to brush their teeth. The mother shared with us how influential parents are for teaching their children about dental hygiene. The teenage student revealed his dental hygiene habits and how it is tied with his self-esteem in regards to physical appearance. He also suggested an aspect of gamification to make the experience of brushing teeth and flossing more enjoyable. We took all of these findings into account in our process of building features.
Top 5 User Needs
Our team used Figma as our primary collaborative, prototyping tool (includes a handy Slack integration). We wanted our first wireframe to accomplish the three primary tasks.
3 Primary Tasks
After receiving feedback from TAs, usability testing participants, and fellow students, here are the key changes made for the second version:
|Simplify the view of the Home Screen: remove logo text and recreate circular buttons in order to avoid the fat finger problem.||Remove the Home Screen as a summary, but instead have the users toggle between two tabs to view My Activity and Rankings.|
|Changed from 6 brush screens (15 seconds each) to 4 brush screens (30 seconds each) - as recommended by the dental assistant.||Only keeps track of current streak and longest streak. The overall health score was unclear to the users.||Results Screen includes the latest streak count.||</tr>|
Final PrototypeWe developed the final prototype on Android. Brushing animations (made in After Effects) indicate the progress of brushing your teeth as the teeth turn from yellow to white and the pulsating effect highlight the areas of your teeth to brush. We established a streak system in which a streak is equal to brushing twice in a day and flossing once during the day. The counter resets daily at midnight. After the 15-second timer for the Brushing Screens reaches 0, the watch will vibrate to indicate an automatic transition to the next screen.
Overall, I had a wonderful experience of learning how to develop an app in Android with a team and learning about the UI guidelines for Android and Android Wear. This is also the first project where I designed an experience and programmed for wearables.Here are the valuable lessons I learned along the way: