View source for Labs/Site 2.0/Concept Series Tool - Specs

<small>&laquo; [[Labs/Site 2.0|Site 2.0]]</small>

= Concept Series Tool - Specs =

== High-Level Process Flow ==
The tool should follow our funnel idea - from (many) ideas to (some) mockups to (a few) prototypes and finally products (usually by way of graduating through Mozilla Labs).

[[Image:Concept_series-highlevel.png|Concept Series - Highlevel Overview]]

== Homepage Elements ==
The homepage needs to inform, inspire, explain and activate people. Therefore we need a bunch of promotional elements on the page (browse ideas/mockups/prototypes, explore/discover, planet-style aggregation from the wider web, editorial content) - plus functional elements (search, register/login, contact).

Note: Once we graduated projects into Labs we should add another promotional section to the homepage.

[[Image:Concept_series-homepage.png|Concept Series - Homepage Details]]

== Section: Idea ==
The idea section is in most cases the starting point of a project.

Comments on the wireframe:
* '''Important''': The current wireframe is not meant to be a correct representation of element positioning on the page
* Element ''Mockups/Prototypes'': Only shows when associated mockups or prototypes exist. This element will tie ideas together with mockups/prototypes
* Element ''Related Ideas'': This section should be autopopulated using semantic analysis of the title and short summary elements

[[Image:Concept_series-idea.png|Concept Series - Wireframe Idea]]

== Section: Mockup ==
Comments on the wireframe:
* '''Important''': The current wireframe is not meant to be a correct representation of element positioning on the page
* '''Important''': We can expect that a good chunk of contributions will start at this stage (effectively skipping the idea stage), thus this page must work on it's own without an associated idea
* Element ''Based on Idea XYZ'': Only shows if this mockup is based on an idea in our system
* Element ''Prototypes'': Only shows when associated prototypes exist. This element will tie mockups together with prototypes
* Element ''Related Mockups'': This section should be autopopulated using semantic analysis of the title and short summary elements
* Element ''img'': Allow for flickr-/Facebook-style image annotation feature, i.e. you can mark a square area in the mockup and relate your comment/suggestion to this specific area. You then can hover over the mockup, see the marked areas and effectively filter responses which just relate to this area.

* Note: Contributors should be able to respond not only with a suggestion/comment but also another mockup (which can also be a mockup of a single element - see information on element 'img'). These submissions need to be closely tied to the original mockup (both ways) - see element 'Based on Idea XYZ'.

[[Image:Concept_series-mockup.png|Concept Series - Wireframe Mockup]]

== Section: Prototype ==
Comments on the wireframe:
* '''Important''': The current wireframe is not meant to be a correct representation of element positioning on the page

[[Image:Concept_series-prototype.png|Concept Series - Wireframe Prototype]]

== Additional Information/Thoughts ==
* When an idea/mockup/prototype 'graduates' into Labs it should show so very clearly on the individual page (e.g. a little crown or graduation hat)
* Thought: Automatically generated grouping of ideas/mockups is fine; a rather loose connection allows further exploration and stimulation (Eric von Hippel)
* Thought: We don't need the ability of 'forking' for the first/initial release, it seems like a good idea but is somewhat confusing and complex to understand
* Thought: Would be interesting to see if there is a way to graphically represent related ideas (a graphical version of a tag cloud with closeness and size as approximators)

Information/Learning Center:
* Stencils for quick UI mockups (PSD, PNG, EPS, etc)
* Video-Tutorials on how to produce mockups, prototypes
* Recorded webinars from Design Challenge tutoring sessions
* User actions (documented through screen capture) that illustrate design flaws and user workarounds

== Feedback (Maureen Hanratty) ==
General:
* Submissions can act as portfolio pieces for students

Additional Features:
* Allow visitors to formally "sign up" for ideas, creating a group around an idea (or ideas) that the group can collaborate on. These groups, communities within the larger community, will allow users to make stronger, more personal bonds with community members.
* [Potential Feature] Add the ability to "fork" a mockup and then draw directly into the mockup (plus comments in text form) to explain ideas and suggestions.