QA/Community/QMO Design/Airbag

« QA/Community/QMO Design

Template Design

After reviewing v2 of the mockup from Airbag, I am providing them with template descriptions for the following child pages for the site:

Events & Calendar

• Title should replace "The home of Mozilla QA" with "Community Events"; breadcrumb should be something like "Home > Events > Calendar"
• Left Column:
  • Same as other pages, should include main navigation menu, "Quick Links", and "Need Help?" boxs (Note: We might add something there later, but for now I think those 3 will do)
• Right Column:
  • "Learn more about..." box with collapsable list including:
    • Bug Days, Test Days, Crash Offs, QA Huddles
    • Each item in the list will have a description below it (25-50 words), with links to a dedicated page that has more details.
  • "Partner Events" box with list of partners including:
    • ClubMoz @ Seneca, Sun China, Songbird
    • Each partner will have a short description (20-25 words) with links to their respective partner page.
  • "Recent Forum Topics for Events" box
    • List of 5 topics from the Events section of the forums
• Main Body:
  • "Community Calender" title with month and year, followed by a monthly calendar that spans the width of the center column. (Note: Drupal will allow users to change the calendar view to weekly, daily, or list, but all of that should fit fine if we make the center column flexible)
  • "Upcoming Events" section
    • List that uses 3 columns, first being the date, followed by time, and ending with the event type, title and description (14-20 words). (Note: It will be nice to use either the icons or color to differentiate between different event types, like magnifying glass for Test Day vs bugs/angry heads for Bug Day)
  • "Past Events" section
    • Same as "Upcoming Events", but with a small row below each item with room for event notes and results in smaller text (10-15 words), eg "Over 100 testcases ran; 10 participants"

Events Detail

• Title should replace "The home of Mozilla QA" with "Community Events"; breadcrumb should be something like "Home > Events > [Event Type + Description]"
• Left Column:
  • Same as other pages, should include main navigation menu, "Quick Links", and "Need Help?" boxs (Note: We might add something there later, but for now I think those 3 will do)
• Right Column:
  • "Learn more about..." box with collapsable list including:
    • Bug Days, Test Days, Crash Offs, QA Huddles
    • Each item in the list will have a description below it (25-50 words), with links to a dedicated page that has more details.
  • "Upcoming Events" box with list like on Homepage
    • Each event will have a date, type and title with links to the event details pages.
  • "Recent Forum Topics for Events" box
    • List of 5 topics from the Events section of the forums
• Main Body (need to make a lot better than http://quality.mozilla.org/en/node/1339):
  • Event type, title at top
  • Small row for short description and notes (10-25 words)
  • Date and time info
  • Welcome message in paragraph form (25-50 words); full body width
  • Event details
    • "How do I get ready?." box or section will be a checklist with 2-5 things for users to do to prepare for the event (eg: 1. Download nightly build, 2. Backup profile, 3. Login to IRC, 4. Press "Checkin" button). Note: We plan to add functionality to QMO that will allow users to click a button to tell us there are participating in any given event, so this button should go in this box. It will be nice to stylize it to fit the theme and make it stand out.
    • "This is what we're doing..."
      • 2-5 paragraphs (15-20 words) with title for each (eg: 1. What we're testing, 2. We're here to help, 3. If you find something..., 4. More info and tips), with the occasional bullet list (5-10 items) thrown in to highlight major areas for testing, display bug lists, or steps to follow throughout the event.
    • "Stay Connected and Do More!"
      • "Feedback" message (15-20 words) with feedback form (to be submitted as comments or sent to either forums or email alias)
        • Form fields: Subject, Details, Name, Email and Website (similar to comment form for blog page)
        • Link to email alias (eg. testday@mozilla.org) below form for those that want to email
      • "Do More!" message (25-50 words) with links to Events, Projects, and other relevant links.
      • "QA Companion" promotion (15-20 words) to encourage downloading and using the QA extension. Note: We used the QMO logo to brand the extension, so we should probably use it here if possible.
    • "Thank You" message: "Thanks for being a active member of the Mozilla QA community! - The Mozilla QA Team."
    • "Discussion"
      • List of feedback/comments (similar to comments section of blog page)