Labs/Site 2.0/Concept Series Tool - Specs

« Site 2.0

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).

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.

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

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'.

Section: Prototype

Comments on the wireframe:

• Important: The current wireframe is not meant to be a correct representation of element positioning on the page

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.