Add-ons Discovery Pane UX Specs

So I can find useful and trusted add-ons, as a new add-ons user, I want to browse from a small list of curated content.

changelog

July 12 - Added a slight drop shadow behind the extension/theme blocks.

May 25 - Changed app icon background to #ffffff. - Added new screen for 2nd or 3rd visit user prompts (still a wip)

../../_images/disco-pane.png

Intro Video

../../_images/video-thumb.png
  • When a user clicks “Click to play”, the copy to the left of the video thumbnail will fade away and the thumbnail will expand down and to the left.

../../_images/video-expanded.png
  • When a user clicks “close video” below the expanded video, the video will shrink up and to the right back to its original position. The copy to the left will fade back in.

Switch Interaction

../../_images/switch.png
  • When a user turns on the switch, the install process begins: the switch shows download and install progress. When complete, a check mark appears in the switch.

  • When a user turns off the switch, the uninstall process begins: the switch shows uninstall progress. When complete, the switch returns to original off state.

Theme Interaction

../../_images/theme.png
  • When hovering over the theme image, the toolbar will change to show a preview.