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

Projects

• Title should replace "The home of Mozilla QA" with "Community Projects"; breadcrumb should be something like "Home > Projects"
• 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:
    • Unconfirmed Bug Triage, Crash Analysis, Litmus Test Cases, Topsite Testing
    • 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 Projects" box
    • List of 5 topics from the Projects section of the forums
• Main Body:
  • Display 4 main focus areas from Homepage (perhaps in 4-square formation), with description of the type of projects in that category (15-20 words), followed by a bullet list of the top 2-3 projects for each, with links to their individual project pages.
  • "Popular Projects" section
    • List that displays project type and title first, followed by a row for the description (15-20 words), followed by a smaller row for info like number of members working on the project, and perhaps a blurb from the latest comment/forum post. (Note: It will be nice to use either the icons or color to differentiate between different project types, like magnifying glass for Test Projects vs bugs/angry heads for Bug Projects)
  • "Ongoing Projects" section
    • Could be the same as "Popular Projects", but perhaps we can do something different, like use boxes in a row to highlight these projects since they will remain on the page for a long time.

Project Detail

• Title should replace "The home of Mozilla QA" with "Community Projects"; breadcrumb should be something like "Home > Projects > [Event Type + Name]"
• 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:
  • "Project Menu"
    • Project Lead box (similar to "QAC of the Month") with pic, name, and focus areas of team/community member leading project
    • Project Info box (list with short description below each item, each section below should be collapsible)
      • Members, description "People working on this project", followed by a list of members of the project (0-20+ items)
    • Tasks link that takes users to the Tasks section of the page, description "What we're doing", followed by list of 2-5 links for major tasks for project (links to various sections of the project page).
    • Discussion link that takes users to the Discussions section of the page, description "Talk about this project", followed by list of 5 topics from THIS Project section of the forums
    • Join button (for users to click to join the project)
• Main Body (need to improve on http://quality.mozilla.org/projects/automation/talos):
  • Project type, title at top
  • Small row for short description and notes (10-25 words)
  • Welcome message in paragraph form (25-50 words); full body width
  • Project details
    • Main section where the project lead describes the project and the various areas of focus and tasks.
      • 2-5 paragraphs (15-20 words) with title for each (eg: 1. Project Details, 2. Tasks, 3. Tools, 4. More info and tips, 5. Members), 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.
    • "Toolbox" will be a checklist with 2-5 things users might find useful to prepare for or learn more about the tools and processes to work on the project.
    • "Stay Connected and Do More!"
      • "Discussion" 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)

Notes

• juanb (2.19.2008): It's more difficult to describe what you want to see in a page starting from written descriptions like the ones you have above. Events and Calendar should be as simple as a short list of items we are working on on a particular day. ...
  • jay (2.20.2008): Juan, I meant to ask that you tell me what you would expect to see on those pages if you came to visit on any given day (without relying too much on my detailed descriptions)... pretend you are designing the pages, share what you feel would be important to make available to our team and community on those pages.