[PNI Website] Design product page

[kristinashu]

Related tickets

• Based on [PNI Website] exploratory sketches for key features #7182
• Related to [PNI Website] Design content component on product page #7265

Requirements

Improve product detail page scannability

• Adjust type hierarchy
• Consider adding icon/symbol to highlight good things (opposite of ding)
• Add thicker dividing lines
• Add tabs (or something similar)
• Include News as a tab
• Create a prototype to test it
• Add category tags
• Reframe “Related news” / “Updates” section

Intro data

• Remove price and add Company Website & icon
• Update date format
• Add Mozilla research time (maybe add a link to learn about our methodology)
• Add people’s rating with faces

Misc

• Remove company contact info
• Updates to AI criteria/wording (doc)
• Add ding
• Add editorial content to product page [PNI Website] Design content component on product page [PNI Website] Design content component on product page #7265

Steps to complete

• Explore hi-fidelity comps
• Don’t forget mobile
• Prototype tabs
• Create presentation
• Askes devs questions along the way
• Get feedback from Jen and devs on Tues, get final sign off on Thurs
• Clean up Figma file
• Exports assets
• Work with devs to open dev tickets