ux spec doc

doc plus images!
mozilla · May 19, 2016 · 298c0ba · 298c0ba
1 parent ffc56b4
commit 298c0ba
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 0 deletions.
diff --git a/docs/images/disco-pane.png b/docs/images/disco-pane.png
diff --git a/docs/images/more-button.png b/docs/images/more-button.png
diff --git a/docs/images/switch.png b/docs/images/switch.png
diff --git a/docs/images/theme.png b/docs/images/theme.png
diff --git a/docs/images/video-expanded.png b/docs/images/video-expanded.png
diff --git a/docs/images/video-thumb.png b/docs/images/video-thumb.png
diff --git a/docs/ux/ux-spec.rst b/docs/ux/ux-spec.rst
@@ -0,0 +1,29 @@
+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.
+
+  .. image:: ../images/disco-pane.png
+
+Intro Video
+-----------
+  .. image:: ../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.
+  .. image:: ../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
+------------------
+  .. image:: ../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
+-----------------
+  .. image:: ../images/theme.png
+* When hovering over the theme image, the toolbar will change to show a preview.
+
+AMO Link
+--------
+  .. image:: ../images/more-button.png
+* A button at the bottom of the discovery pane encourages users to visit AMO if they want to explore add-ons and themes further.