Our team of four developed SmartBrush, a dental hygiene app for Android mobile and smartwatch that motivates teens and young adults to develop proper dental hygiene habits through social competition. View the full detailed report here.

Role

  • Project Manager and Lead Designer
  • Ensured team of engineers met deadlines and contributed to design process
  • Designed visual assets, animations and overall UX Design
  • Sketched concepts, developed user journey map and intereviewed users
  • Implemented GifViews in Android

  • SmartBrush in Action


    Defining the Strategy

    Brainstorming

    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

    Sketches

    We based our sketches on the User Journey Map.


    Initial Research

    Competitive Analysis

    Top 3 Competitors:
  • Chomper Chums
  • Quickbrush
  • Aquafresh Brush Time
  • 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.

    User Interviews

    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

  • Have a fun and entertaining experience so brushing teeth won’t feel like a hassle.
  • Receiving feedback and tracking progress for techniques.
  • Learn proper brushing habits and techniques.
  • Not slowing down the brushing/flossing process.
  • Motivation to maintain good oral health and prevent dental disorders.

  • Iteration

    Wireframing

    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

  • Brushing
  • Flossing
  • Checking Progress and Rankings
  • Version 1.0

    Version 2.0

    After receiving feedback from TAs, usability testing participants, and fellow students, here are the key changes made for the second version:

    </tr>
    Watch Phone
    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.

    </section>


    Final Prototype

    We 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.

    Final Flow

    Animations

    </section>

    Execution

    Technical Challenges

  • Running the Gif Views: our flossing animation was unable to play on physical watch because it ran out of memory, but it played normally on the emulator.
  • Storing and updating the streak count on the phone and watch after brushing: We needed to figure out a system of updating the streaks. We set a timestamp at midnight to reset the count of brushing and flossing. The data for streak counts are stored on the phone, but the watch retries this information to update the streak count and send the data back to the phone.

  • Takeaways

    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:
  • Know the Android Wear UI Patterns front and back before diving into sketching, wireframing, and creating visual design elements.
  • Technical constraints, such as the physical handware running out of memory for playing animations, can influence the final design implementation and may require an alternative solution.

  • Credit

  • Contextual Inquiries: Rachel Lin, Nithish Arunkumar, Mukund Chillikanti
  • Visual Design, Animations, and UI Design: Rachel Lin
  • Backend (Android): Mukund Chillikanti
  • Rankings Screen (Android): Nithish Arunkumar
  • My Activity Screen (Android): Tait Gu
  • Gif Views (Android): Rachel Lin