PRIORITIES FOR DESIGN MOCK-UPS

High

1) PROJECT PAGE
2) FRONT PAGE
3) PROJECT SUBMISSION PAGE
4) EVENTS PAGE

Medium

DONATIONS PAGES
PROJECTS LANDING PAGE

Low
ABOUT PAGE
PROJECT SUBMISSION FORM
"PEOPLE" LANDING PAGE
"PEOPLE" SUBMISSION PAGE
PEOPLE SUBMISSION FORM
BLOG PAGE
RESOURCES PAGE
"TAG / TOPIC" PAGES
"PERSON" PROFILE PAGE

SITE NAVIGATION

Projects / People / Events
About / Blog / Donate / Resources

• (*badges, links, downloadable / sharable resources, ways to promote & stay in touch w. Drumbeat, etc.)

• Divide into primary and secondary navigation?
  • Matt and Ned like the bold simplicity of limiting ourselves to just three items in main nav.
    • Helps communicate the Drumbeat story telegraphically: "Projects, People, Festival"
• Where do local events fit?

• Sign-in / Sign up cpature – In upper right-hand column, include:
  • "Join" with email address / sign-up
  • Include "log-in" link

FOOTER

• RSS and social networking badges
• Mozilla.org link
• "Help edit this page"
• Contact us
• Privacy policy
• Dino head logo
• Copyright:
  • Portions of this content are ©1998–2009 by individual drumbeat.org contributors. Content available under a Creative Commons license.

PROJECT PAGE

Context & Strategy

• The Project Pages are the most important -- and difficult -- pages in the entire site. In some ways, they're the whole reason for building Drumbeat!
• They're also the most important to spec and complete fast. We need to give the back-end guys a clear sense of how they work, what they leverage from Mozillians.org, etc.
• Balancing internal vs. external tools & functionality is key. This is the most important part to get right -- striking a balance between internal Drumbeat infrastructure vs. leveraging external infrastructure and third-party tools & social networks. As a general rule, we want to:
  • Allow people to EMBED or LINK to existing third-party tools & resources where they want to (e.g., a project blog, wiki, discussion forum, etc.)
  • Offer our own Drumbeat-hosted tools and functionality, if those external tools don't exists or if that's what the user prefers.
    • This Drumbeat-hosted functionality should be as "out of the box" as possible for phase one. We want to offer functionality and tools that are included natively in the Drumbeat Groups module.
• Setting the bar at a flexible / adjustable height. We want to provide robust support & content for fleshed out projects -- but not in ways that set the bar too high for community-proposed projects.
• Allow people to build and flesh out their page over time. Make the bar as low as possible to get started -- could be as minimal as a "project stub" that includes a headline, one-sentence to one-paragraph description, and topic tags -- but then encourage people to further flesh out their project page over time.
• Use the "edit in place" approach as much as possible. Try to collapse project page READING & VIEWING with CONTENT CREATION. Instead of one page for VIEWING and another back-end form or page for EDITING and ADDING, make these one and the same. Use design cues to signal this opportunity, and stress the feeling of constant participation / collaboration.

Latest Iteration

As of Dec 7

Iteration 1.0

Features & Collaborative Tools to Consider

• "People working on this project"
  • Move from gallery to most recent action
  • Plus the LAST action they took -- including "just joined"

• Project Blog
  • Include "sticky at top of list"

• Milestones

• Calendar

• Discussion threads / message board / forum
  • Internal

• "Comments"
  • "Ask a question, share an idea, report a problem, give praise"
  • See GetSatisfaction.com example
    • "I have this question, too" / "Me, too"

• • External
    • Twitter feed
    • Other?

• Wiki
  • Internal
  • External

• News articles / press coverage

• Files
  • Internal
  • External

• Links
  • Internal
  • External
    • Delicious
    • Other bookmarking tools?

• Image galleries
  • Internal
  • External

• Video(s)
  • Internal
  • External

• "Blog posts"
  • Internal
  • External
    • RSS / blog aggregator?

• Facebook group

• Messaging
  • Send message to project owner or participant (securely)

• RSS / Twitter feed

• "Free text field"
  • Ability to include free text
  • Ability to embed any HTML-enabled widget, etc. (consider security & legal implications)

• Search?
  • Project-specific search?

• Frequently Asked Questions

• "Project Stats"
  • Collaborators

• Skills needed / seeking?
  • e.g., developer, bloggers, engineers, storytellers, visualization expert, etc.
• Do we include this as the "Project level?" Ability to list specific skills you're seeking?

• GitHub
  • David: How would this work?

FRONT PAGE

• Add tag cloud to front page
  • Project tags & topics
  • Not people tags

• Make feature box fill entire width of page
  • Design objective: really highlight top five featured projects
  • Make it extremely easy to browse / scroll back and forth between those projects

• • Use large left and right triangle arrows on either side of feature box.
  • Use preview thumbnails along bottom for secondary feature box navigation
  • Avoid use of Flash
  • Include participation element at left. Similar to "tcktcktck" example:
  • Placeholder link copy: "Get involved"

• Tweak copy to include link: "Amber Mac is working on the Privacy Icon Design Challenge." (links to the appropriate project page)

• • Add people photos to Project Ideas in main column

• • Change "Nominate" to "Join the Drum Circle"

ABOUT PAGE

Divide into "show" vs. "tell" elements

• Tell = updated elevator pitch & copy
• Show = visual & snapshot elements

"Show" elements:

• Two illustrations:
  • A) "Bird's eye" diagram. The bare bones visual elevator pitch. A 10,000 feet up snapshot of Drumbeat's overall logic and story.
    • Probably some version of: INSPIRING PEOPLE + INSPIRING IDEAS & PROJECTS + DRUMBEAT = A BETTER WEB
  • What are the next steps here?
  • De-prioritize this illustration work. Include placeholder in wireframes & .PSD files -- deliver final version post Dec 1.

• • B) Framework diagram. The more programmatic elements. An updated version of the existing framework diagram:

• Tag cloud. A nice-looking Wordle-type tag cloud that shows the kinds of themes and topics Drumbeat is tackling.
• "People" cloud. Show the KINDS of people in the Drumbeat circle. Designers, developers, authors, teachers, students, etc.

• • These elements can be re-used across multiple assets (slides, videos, etc.)

"PROJECTS" LANDING PAGE

• The page you land on when you click "Projects" in the main nav
• Different from the "PROJECT SUBMISSION" page

Primary elements:

1) Examples of Drumbeat's featured projects

• Featured projects carousel

2) Easy ability to browse through projects, in multiple ways:

• • Tag cloud
  • Most recent
  • Most active

3) Prominent participation box. Encouraging people to

• • a) submit their own project (links to PROJECT SUBMISSION page)
  • b) get involved in participating in other people's projects

4) Short text box / copy explaining the kinds of Projects Drumbeat works on.
(Linking to ABOUT and/or PROJECT SUBMISSION page for more.)

SUBMIT YOUR PROJECT PAGE

Context & Strategy

• This is NOT just a "form." It's the FIRST page in the project submission workflow.
• It's main job is to:
  • Give a simple explanation of the kinds of project ideas Drumbeat is looking for -- with crystal clear critera.
  • Include a simple VISUAL explanation, probably an iconic flowchart, that shows what we mean. Following the life-cycle of a project idea through the Drumbeat process to the festival and a completed solution.
  • Provide a design-y splash page that welcomes people into the process in a simple, friendly way

Examples & Inspiration

Mozilla.com "Get Involved" page "Spread Firefox" Campus Reps Guide

What do we like about it:

• Warm, human element
• Design-y elements across the top
• Badge or crest. "Mozilla Drumbeat Fellow" idea.
• Too much text, though.

QUESTIONS

• Should projects be sortable by geography? by number of participants?

PROJECT SUBMISSION FORM

• Create draft list of fields, intake (Matt / David)
• Get mix of required vs. optional fields right.
• Use design elements to make it feel warmer, less like a form
• Big stress on usability & eliminating barriers to entry
• Review "Groups" submission / intake process at Mozillians
• Understand CiviCRM requirements

To discuss:

• Why: One sentence on why you care about this project (include?)
• Member Request: What is the ‘ask’ being made? (e.g. help me scope this idea out, come to this website, etc...)

"PEOPLE" LANDING PAGE

• From clicking "PEOPLE" in the main nav
• Different from the "NOMINATION" page -- like the front page or overview page for Drumbeat's community of people
• Should feel like a party, swimming pool, or drum circle of smart, friendly web-makers and innovation ninjas you want to hang out with.

Primary elements: 1) Examples of Drumbeat's most inspiring & recent people in the drum circle

2) Prominent participation box to NOMINATE yourself or someone else (links to NOMINATION page)

3) "Magnetic attractors / Festival headliners," to help draw people to the Festival.

4) Connect people to projects. Show what they're working on.

More work needed here. What's important? What's missing?

5) Highlight those earning the most "karma points."

• Champion the ost active members of the drum circle
• See this page as example:

http://railrankings.com

PEOPLE SUBMISSION FORM

• Create draft list of fields, intake (Matt / David)
• Get mix of required vs. optional fields right.
• Use design elements to make it feel warmer, less like a form
• Big stress on usability & eliminating barriers to entry
• Review "PEOPLE" submission / intake process at Mozillians
• Understand CiviCRM requirements

For consideration:

• link in with OpenID?

• "tag" yourself by:
  • geography
  • skills
  • specific topics they're most interested in? (e.g., mobile, open video)

• Display "karma points?"
  • What do we call these? "Drumbeat Karma Points?" Just "karma points?"

EVENTS PAGE

Primary Elements:

• Learn about the Drumbeat Festival
• Ads for upcoming local events

Secondary Elements:

• Photos from recent events
• Presentations / videos of talks from recent events
• Submit your event

Third-level Elements

• Calendar?
• Affiliate event streams?
  • BarCamp, Ignite, other?

• Should we tie events in a more direct way to the Drumbeat presentation challenge?

BLOG PAGE

• Not necessarily a priority for launch. But a "nice to have." Even if it only has one or two entries in it.
• Can pull from existing blog posts on Drumbeat to help show the generation of the idea and thinking behind it.

RESOURCES PAGE

• Include badges / banners that make it easy to promote Drumbeat, the festival, and your own Drumbeat project

"TAG / TOPIC" PAGES

• Surface all projects & people by category or tag
• Not so much new "pages" -- more like conventions or repeatable template
• Use "index card / baseball card" approach to easily sort, mix and match all content in an easy, logical way

"PERSON" PROFILE PAGE

• e.g., "Drumbeat/Max_Weinstein"
• e.g., "Drumbeat/Amber_Mac"
• Make it easy to update & manage your personal profile & project

• Include list of all most recent participation
  • "Asked a question on this project."
  • "Initiated this other project."

DONATIONS PAGES

• Re-theme existing Trellon-produced Mozilla donations page using Drumbeat theme
• Include dynamic text box that makes it clear the user is donating to that one particular project (e.g., "FairMobile Index, Privacy Icon challenge, etc.)