PNI Product Page Improvements

[beccaklam]

Based on user testing conducted at MozFest, @taisdesouzalessa and I have distilled our findings into the following issues need attention on PNI's product pages:

1. Clarify "Minimum Security Standards" section

(Note: "Minimum Security Standards" is hereafter known as "MSS")

• Clarify relationship between MSS badge and the star rating
• Ask content to provide help text for reach category (e.g. one sentence explaining what "Manages vulnerabilities" means)
• Brainstorm ways to further highlight the MSS badge/stars?

2. Our research is too low on the page and users want that information

• Rethink position of the creep-o-meter. Can it be sticky at the bottom of the page? Side of the page?

(Note: changing creep-o-meter position may negate the following ...)

• Can we reduce height of the product image?
• Can we shorten the product blurbs?

3. Users are not hitting the submit button on the creep-o-meter

• Retest in usertesting.com to see if bug is reproducible and not just a result of the busy environment of MozFest
• Should submission be automatic after user has clicked all necessary buttons?

4. Change email interstitial copy and opacity

• Users are stopping at PNI's email interstitial and not clicking through to see results. We're hoping that changing the copy (to allude to the results on the next page) and lowering the opacity of the interstitial background will help fix this problem. Copy from Jen

4. Add labels to Recommended products

• A senior emailed Jen and kindly asked for labels to be added to the Recommended products images as "Seniors (and others ?) may not always connect with a picture as being this or that or A, B, C or D."

cc: @taisdesouzalessa @kristinashu

[beccaklam]

Becca Ricks has provided some context for the MSS categories:

Encryption
Is your data secured with encryption?

Security updates
Does it get regular software/firmware updates?

Strong password
Do you have to create a strong password (for remote access)?

Manages vulnerabilities
Is there a system in place for managing security vulnerabilities?

Privacy policy
Does it have a privacy policy?

cc @caltrider

[beccaklam]

First draft of email interstitial work: https://redpen.io/p/yh131112029e4f1b2e

[beccaklam]

Okay! So I spent way too much time in Invision playing with this but I have prototypes for review! These prototypes include:

• the redesigned product page itself (for a static version, see this redpen)
• new creep-o-meter placement options (including how it would animate in, though that still needs some work I think)
• new email signup interstitial flow

I hope the prototype is intuitive enough for you to use ... If not, just click the page if you're not sure where things are actionable and a blue box(es) should flash. @taisdesouzalessa @kristinashu

Product Page Updates!

Mobile
Option 1
Option 2
Option 3

Desktop
Option 1
Option 2
Option 3

[caltrider]

Because the creepometer is such an important part of how the guide is presented to the world and how the media and companies cover the guide, I feel like the desktop option #1 is by far the best. I'm not sure about the mobile options as they all seem to hide it more than I would like to see it hidden.

As for moving the "what could happen" section up...I'm not sure I love it after all. I think I like the bookends of product info at the top, research in the middle, and summary at the end.

My thoughts @beccaklam

[beccaklam]

Thanks for your thoughts @caltrider! The desktop options correspond to the mobile ones. So Option 1 Mobile is what Option 1 Desktop would look like since we can't have the creep-o-meter sticky next to the content on such a small screen.

[taisdesouzalessa]

@beccaklam first of all, amazing job on including the user testing insights on these proposals. So great to see those prototypes :). I love the solutions you proposed.

My favorite is the Option 2, I think it is a good balance between having the creepometer constantly present in the page + the focus needed for such a content-heavy page. I find that in Option 1 the creepometer competes with the main content of the page.

Now if you want the creepometer expanded in the page I feel option 3 may be a good solution. Because if the user misses the button they will see it at the main page and the voting system seems to be in the right spot (when users would be ready to vote after taking a look at the info we are presenting to them). Very aligned to our research insights.

[caltrider]

My favorite is the Option 2, I think it is a good balance between having the creepometer constantly present in the page + the focus needed for such a content-heavy page. I find that in Option 1 the creepometer competes with the main content of the page.

Fair point here @taisdesouzalessa . I will say that having people interact with the creepometer is a more important goal for us than having people read all the content. Keeping the creepometer front and center feels like a priority for us on these pages.

[kristinashu]

Sweet prototypes! I love the round button on Option 2 desktop. It stands out just the right amount and looks playful and I want to click it to see what will happen. You could even animate through all the faces once and then end and stay on the question mark.

But I also like how Option 3 desktop because it keeps the creep-o-meter on the page, but lower down. And I really like the Option 3 mobile version of this because the scroll down feels much less committal.

I hate to say it do you think they could be Frankenstein-ed together or would that be terrible?!

[kristinashu]

Oh and for the interstitial, I find the transparent overlay makes things really hard to read and too busy looking, any other ideas?

We're talking about showing the email sign up later and less often #3943. Is that enough?

[beccaklam]

So, a lot of updates!
Here's the second draft of designs after getting feedback from the design team.
And here's the feedback I got from Jen about the draft 2 designs.

@taisdesouzalessa @kristinashu

[kristinashu]

Designs are look sweet and user testing is about to start! Once testing is done we will review the results #4013 and decide what to do. I've separated this into three design tickets for next sprint:

PNI product page: finalize creep-o-meter #4015
PNI product page: finalize MMS section #4016
PNI product page: misc updates #4017

Rebecca, could you please double check them and then I think this one is good to close!

[beccaklam]

Those tickets look good to me! Closing this, thanks @kristinashu !