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
First Time User Experience - 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 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
User flows for key pages
Final UI designs for some of the core screens
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
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