PNI product page: updates to MMS section

[kristinashu]

Based on user testing, we have come up with an easier to understand Minimum Security Standards section.

List of updates

• Add background background Gray 05 ($gray-05) #f2f2f2
• Add mini-badge next to title
• Add title Overall Security Rating
• Hide all the stars
• Add a number value to star rating (example: ★★★☆☆ will now be ⅗ ★)
• Update Yes = ✓, No = X, and keep n/a = N/A Minimum-Security-Assets.zip

Comp for desktop

Comp for mobile

🗒 Design -> Dev Handoff Checklist

• Design has been finalized
• Link to original design ticket - PNI product page: finalize MMS section #4016
• Link to Redpen - https://redpen.io/p/mn3629c03f84209e3b update once PNI: clean up Sketch file #4040 is done
• Design changes been merged into the master Sketch file PNI: clean up Sketch file #4040
• Desktop and mobile mockups are included
• Assets are included: Minimum-Security-Assets.zip
• Hover state for elements are designed - N/A
• Other states for elements are designed (e.g., error state for form) - N/A

cc @beccaklam

[beccaklam]

@mmmavis All the designs are in! This is ready to start on :)

[mmmavis]

@beccaklam what symbol should represent "Unknown"? Should it stay as "Unknown"?

e.g., https://foundation.mozilla.org/en/privacynotincluded/products/ring-indoor-cam/

[beccaklam]

Ah, the question mark! I updated the sketch file but not the redpen, will do that now. The question mark asset is included in the zip file above.

@beccaklam what symbol should represent "Unknown"? Should it stay as "Unknown"?

e.g., https://foundation.mozilla.org/en/privacynotincluded/products/ring-indoor-cam/