Philips Mask Choice is an online marketplace for CPAP masks. The site offers a quick 7-step questionnaire that takes comfort preferences, translates them into CPAP masks features, then suggests mask models that fit those criteria. Visitors can also browse, compare, preview the masks on their own face by uploading a photo, and even receive a rebate using the site. 

My Role

As Design Lead on a marketing-led project, I worked directly with the Product Owner, PM, SW dev, Marketing Lead, and Summa, a local consultancy.

• Defined - Site definition with marketing and business lead
  
• Designed - Use cases, user flow, and experience drivers for the site
  
• Communicated - Single touchpoint between Philips and Suma
  
• Feedback - Provided feedback and guidance for deliverables
  
• Research - Organized research activity with SMEs to create a quiz
• Tested -  Oversaw A/B testing protocol

Challenge

How might we give CPAP therapy users an online quiz that gives CPAP mask suggestions that are trustworthy enough for users to try them?

Awareness - Information - Personalization - Action - Followup

A Defined Target Audience

With PAP therapy being a prescription based medical therapy, the target demographic was set

• Age range - Ages between 50 and 65
  
• Medical Condition - Has sleep apnea and has been using PAP therapy for 1+ years
  
• Tech-savviness - Enough to set up autopayments or make frequent online purchases

Considering the age of our audience we decided it was necessary to design for the edges.

1. Were they comfortable with technology? 
2. How much ownership did they take of their CPAP therapy?

Research Doc Findings: User Archetypes 

From previous research, we discovered different archetypes - different attitudes and approaches - towards ownership of personal health and knowledge.

1. "I don't care" - No ownership | No knowledge - Values price-performance
2. "I don't know" - Ownership | No knowledge - Values guidance
3. "I know" - Ownership | Knowledge - Values experience & being in control

How to Build Trust Online 

The main issue for our older demographic was that they seldom trusted non-tangible resources. From previous research, we uncovered what they expected in order to consider trusting a source.

Be Transparent

Site Purpose

Show You Listened

Quiz Results 

Give Me Control

Site Flow

Workshop: Defining Experience Drivers

With 4 Philips designers, 2 Field Marketers, and 1 Channel Marketer, we held an ideation workshop to create a shared vision, core experience, content & tone of voice.

Core Experience - "Instill Confidence"

• Instilling confidence consists of choice and control
• Control: Be upfront and explicit about the site experience - Pagination & Avoid overload
• Choice: Help visitors make informed decisions - Be explicit about how quiz input is utilized  

The result of our workshop shows different touch points and their purpose, content, tone of communication

Creating a User Flow 

We took the experience drivers and created multiple user flow models. For the 1st & 2nd archetypes, this flow "led" users by making the quiz the most prominent feature.

A. Control focus - Users would be led; take the questionnaire first, then view mask options

For the 3rd archetype who wanted control, we created a user flow that started with a mask catalog for fast and easy browsing. The quiz was a secondary button.

B.  Choice focus - User led; show all browsable options from the beginning

When A/B tested with wireframes. "A - leading with the mask choice quiz" was the clear favorite.

Taking the questionnaire first, helped me understand what features are important to me when looking for a mask.

- An "I don't know," guidance-seeking user

Research And Workshop: Creating a Quiz

Now that we had a system, we needed reliable questions. We started by interviewing SMEs to find out "how do you currently recommend masks to patients?"  

• Respiratory Therapists with extensive mask matching experience for key mask metrics
• Marketing Executives with customer-facing experience to create suitable questions

Matrix showing preference to mask features (NDA)

Questions and mask point distribution based on answers

Research Results

We created a mask matrix and accumulated a list of 16 questions. We ended up condensing the questions down to 7 questions that went from general to personal. We carefully reworded the questions to be non-stigmatizing, specific, and non-medical.

Deliverables & Feedback

Based on our experience drivers, Summa delivered site structures and flows for us to review. This included 2 out of 3 paths based on our archetypes.

Initial high level site structure diagram provided by Summa

• Guidance: I need help picking masks - Start with the questionnaire
  
• Control: I know which mask features fit me best- Start by browsing masks 

Feedback

There were many groups involved and multiple layers of feedback. I gathered consolidated and communicated our feedback back to Summa

• Flow - Is this how rebate should work? 
• Design - Does this site follow brand guidelines? 
• Execution - Is this page achieving its purpose?
   

Example of feedback on Wireframes

Testing

To determine if the quiz should be the primary or secondary experience.  we partnered with Campos Consulting and did A/B testing with wireframes. Key takeaways were...

Behind the scenes at Campos facilities

• Quiz questions:  were users able to comprehend the wording and intent of questions?
  
• Quiz summary: was the way we showed the summary, match the user's expectations and help build confidence?
• User flow: to browse or take the quiz first, which sequence did users prefer? 
  

Updates & Revision

Based on our flow and wireframe level feedback, the final map delivered included the last archetype who just wanted a rebate.

Finalized user flow diagram & wireframes delivered by Summa

1. I just want a rebate - Start by navigating to rebate information. Not about finding a new mask
   
2. I need help picking masks - Start with the questionnaire to uncover personal preferences
   
3. I know which mask features fit me best- Start by browsing masks 

Final: Features & Visual Designs

Home Page
Clearly communicates what the site offers in 4 steps and leads to "Take the quiz"

Quiz
The quiz asks 7 questions that help users identify CPAP mask features are most important to them

Quiz Results - Summary
Shows user answers mapped to mask features. Shows how we "listened to their input"

Quiz Results - Filtered Mask Results 
Highlights the 2 most relevant masks suggested for each user based on their quiz results

Additional Feature - Mask Comparison
Allows users to select multiple masks while browsing to quickly compare feature level details 

Product Detail Page - Product Info
Shows specific product info and shows a 360 degree view of the mask

Product Detail Page - Virtual Try-On
Allows users to see a virtual version of the mask on their face by uploading a photo of themselves

Saveable PDF 
Creates a Saveable / Printable 2-page printout. One page showing the mask of choice along with product details. The second page containing rebate information (if eligible) 

Learnings

This project taught me a lot about cross-discipline working. Progress most often came when I helped the marketing manager do what he wanted to do, but better (human-centered). 

The project had many groups with their hand in the cookie jar (PO, PM, Marketing, Technology group, Marcom, Design, SW dev, Summa) but lacked definition and clarity. To drive progress, I helped identify facts from assumptions, and constantly suggested testing as the tie-breaker to help de-escalate disputes and move us forward. 

© Made by Mark 2020