3M Treatment Tracking App
Before the redesign this app was hard to use and in need of a brand refresh. The design team collaborated with stakeholders to identify project requirements and aligned these to user needs. Some of my work included interaction design, data visualizations, prototyping, usability testing and UI design. The new improvements have helped to drive user behavior while improving motivation factors and the overall user experience.
The 3M Treatment Tracking app helps patients monitor aligner wear time, take progress photos and see their stats and earned badges.
My Role
• Competitive Analysis
• Interaction Design
• Prototyping
• Usability Testing
• Data Visualizations
• UI Design
• Competitive Analysis
• Interaction Design
• Prototyping
• Usability Testing
• Data Visualizations
• UI Design
Process & Methods
Evaluate the Current Design & UX
Identify any current usability issues. Improve the overall user experience using current trends and appropriate design patterns
Identify any current usability issues. Improve the overall user experience using current trends and appropriate design patterns
Methods:
Heuristic Evaluation & FTUE Evaluation
Heuristic Evaluation & FTUE Evaluation
Existing Experience - High level user flow
Competitive Analysis
Evaluate similar apps and experiences. Finding the best ways to display data and stats, drive user behavior and provide appropriate user feedback. Look for new patterns and motivation factors.
Evaluate similar apps and experiences. Finding the best ways to display data and stats, drive user behavior and provide appropriate user feedback. Look for new patterns and motivation factors.
Methods
• Analyze Health Care Apps - Health, Fitness & Other
• Competitor Feature Comparison
• Analyze Health Care Apps - Health, Fitness & Other
• Competitor Feature Comparison
Opportunities
• Improve Data Visualization
• Update notifications
• Improve ease of use
• Increase usage
• Simplify navigation
• Update gamification
• Improve sign in
• Improve Data Visualization
• Update notifications
• Improve ease of use
• Increase usage
• Simplify navigation
• Update gamification
• Improve sign in
Benchmarking Competitor Apps
Competitor Feature Comparisons
UX Strategy & Design
Created a feature matrix to help identify project scope, effort and value. Designed wireframes and user flows to document the UX improvements.
Created a feature matrix to help identify project scope, effort and value. Designed wireframes and user flows to document the UX improvements.
Methods & Design
• Feature Matrix
• Wireframes
• Feature Matrix
• Wireframes
Feature Matrix - MVP
Wireframes with Annotations
Art Direction & Ideation
Visual redesign with an emphasis on the 3M brand. Utilizing the latest data visualization trends and app design patterns.
Visual redesign with an emphasis on the 3M brand. Utilizing the latest data visualization trends and app design patterns.
Methods & Design
• Collected data visualization examples to inspire better data models
• Created mood boards that capture recent design trends to fuel my design exploration
• Collected data visualization examples to inspire better data models
• Created mood boards that capture recent design trends to fuel my design exploration
Compare Data Visualization Models
UI Designs
Updated the UI screens to be more sophisticated and engaging while aligning to the latest 3M Brand Guidelines.
Updated the UI screens to be more sophisticated and engaging while aligning to the latest 3M Brand Guidelines.
Methods & Design
• Leveraged the 3M Oral Care brand guidelines and design system
• Designed user flows for new features
• Created the final UI designs for all pages within the app
• Leveraged the 3M Oral Care brand guidelines and design system
• Designed user flows for new features
• Created the final UI designs for all pages within the app
Brand Guidelines & Design System
Final UI designs for some of the core screens
User flows for key pages
Usabilty Testing
With a limited budget and timeline we conducted usability testing with 6 people.
With a limited budget and timeline we conducted usability testing with 6 people.
Methods & Results
• Moderated sessions using card sort, physical model, and digital prototypes
• Issues were prioritized and findings documented – Optimal Workshop
• This resulted in several minor design updates
• Moderated sessions using card sort, physical model, and digital prototypes
• Issues were prioritized and findings documented – Optimal Workshop
• This resulted in several minor design updates
Interactive Prototype
Paper Overlay Simulation
Results - App Redesign
The redesign of the Treatment Tracking App has greatly improved the usability, session rates, brand integrity and overall enjoyment of the app.
New Features & Results
• Updated the design with the new 3M Clarity design system and branding
• Utilized the latest data visualization trends to improve the UI experience
• Improved feedback messaging content and stats designs helped increase patients' motivational factors
• Reimagined the interaction design and functionality improving the overall user experience
The redesign of the Treatment Tracking App has greatly improved the usability, session rates, brand integrity and overall enjoyment of the app.
New Features & Results
• Updated the design with the new 3M Clarity design system and branding
• Utilized the latest data visualization trends to improve the UI experience
• Improved feedback messaging content and stats designs helped increase patients' motivational factors
• Reimagined the interaction design and functionality improving the overall user experience
Teledentistry Updates
Covid 19 completely shutdown orthodontists' in-patient office visits from 2020-2022. I created new features in the app that helped bridge the connection between the 3M Oral Care Portal and Treatment Tracking App. This connection allowed doctors to monitor patients virtually using progress videos and still images. We also developed messaging that provided real time 2-way communication between doctors and patients.
3M Oral Care Portal - Monitoring patients virtually and 2 way communication
Sharing records and messages with your doctor using the 3M Treatment Tracker app
Messaging - 2-way communication between the orthodontist and patient
Results - Teledentistry Updates
The new design features allowed doctors to monitor patients virtually using progress videos and images to track patients' progress compared to the prescribed treatment plan. The new messaging feature allows doctors and patients to communicate in real-time without an office visit or phone call.
• Patient sharing feature to upload progress videos, photos and stats
• Helping orthodontists reduce office visits due to COVID 19 protocols
• Allowing doctors to monitor their patients progress during the COVID 19 shut down
• Orthodontist feature for sharing 3D treatment videos and records with their patients
• 2-way messaging for real-time communication between the orthodontist and patient
• Patient sharing feature to upload progress videos, photos and stats
• Helping orthodontists reduce office visits due to COVID 19 protocols
• Allowing doctors to monitor their patients progress during the COVID 19 shut down
• Orthodontist feature for sharing 3D treatment videos and records with their patients
• 2-way messaging for real-time communication between the orthodontist and patient