Websites/mozilla.org/about

Timeline

• Phase 0: where we are now (not good!)
• Phase 1: live before mozcamp / state of mozilla --> Sept. 6th
• Phase 2: live mid Q3, Firefox's birthday --> Nov. 9th
• Phase 3: live Q1, Mozilla 15th anniversary --> February.

• Tracking bug: https://bugzilla.mozilla.org/show_bug.cgi?id=781916

Phase 1:

• Milestone reference: Moz Camp / State of Mozilla
• Final designs due by Aug. 23rd.
• Final copy due by Aug. 29th

Scope overview:

• visual storytelling
• new header graphic
• light copy update
• light content audit
• theme update/consistency for supporting pages
• light interactivity
• no localization - begin conversation.

Phase 2:

• Milestone reference: Firefox's Birthday
• IA review due by ...
• Final designs due by ...
• Final copy due by ...

Scope:

• • UX/IA review and improvement
  • maintain focus on visual storytelling
  • expand /about to fully tell our story
    • include a history section with timeline / key milestones
    • include key stats / infographic style representation
    • incorporate interactive elements / parallax scroll into the narrative
  • expand and edit /mission
    • recommend removing video and presenting key information in other format
    • clearly articulate the mission, incorporating supporting visuals
    • remove side nav - fold supporting pages and narrative into a single page
    • incorporate interactive elements / parallax scroll into the narrative
  • Begin localization process

Phase 3:

• Milestone reference: Mozilla's 15th Year
• Final design edits due by ...
• Final copy edits due by ...

Scope:

• • Update copy and graphics to capture the Mozilla 15th year anniversary
  • Ensure responsive or mobile friendly designs
  • Localization in priority markets:
    • US
    • UK
    • Brazil
    • Germany
    • France
    • Poland
    • Italy
    • Indonesia
    • China
    • India
    • Japan
    • Russia
    • Mexico
    • Philippines
    • Spain
    • Argentina

Art Direction

• Explore new formats for visual storytelling: grids and collages of content combining photos, brand colors, and text. Longer scroll pages with layers of content and engaging/creative flows between them and/or: collapsing lots of information into grids/collages with interactive states that are informative and fun.

Sampling of good about pages, story telling, and content collages/grids:

   http://www.wolffolins.com/inside-wo
   http://doberman.se/about
   http://www.flickr.com/photos/musingt/6847327013/in/set-72157625182329697
   http://www.guidedcreative.co.uk/index.php?pg=aboutus
   http://www.pokelondon.com/about/
   http://www.hamptonbays.be/en/about-us/history/
   http://www.kiva.org/about
   http://bestaboutpages.com/2011/10/10/burton/
   http://www.tablethotels.com/en/tunes
   http://www.estudioel.com/
   http://www.zero1.org/

Responsive photo collage demo:

   http://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html

More involved parralax samples:

   http://www.culturalsolutions.co.uk/
   http://www.ok-studios.de/home/
   http://lostworldsfairs.com/atlantis/
   http://slaveryfootprint.org/#whats_under_your_roof
   http://www.nike.com/jumpman23/aj2012/

Layout:

• slices / tiers of content.
• http://bestaboutpages.com/2012/05/24/guided/

Navigation:

• scroll down
• anchor links with smooth motion
• parralax effect with layers of content
• elements "compose" themselves as you scroll
• http://www.reverenddanger.com/

Interactivity:

• modules with hover states that reveal content
  • accessibility issue?
• select elements respond to hover or click
• http://www.estudioel.com/
• https://developer.mozilla.org

Community:

• Capturing: global distribution, faces of the community, collage/grid of faces, speech bubbles in different languages, culture, personality, diversity, infographic style presentation
• http://www.wolffolins.com/inside-wo
• http://doberman.se/about
• http://www.flickr.com/photos/musingt/6847327013/in/set-72157625182329697

Timeline / story:

• http://bestaboutpages.com/2012/02/24/hampton-bays/
• http://bestaboutpages.com/2012/01/27/wolff-olins/
• http://bestaboutpages.com/2012/02/14/riser/
• http://www.pokelondon.com/about/

Content Audit / Direction

Purpose and goal of "about" page is to focus on storytelling:

• Provide a mozilla "boiler" and visual feast.
• Showcase the mozilla story through timeline / history.
• Showcase the global community through photo collage, key stats.
• Point to supporting content

Purpose and goal of "mission" page is to focus on the mozilla mission:

• Detailed overview of the mission and what it means
• The mozilla manifesto
• How we are governed
• How to contribute / donate

Phase 1

Content audit and direction in detail:

• https://etherpad.mozilla.org/aboutmissionphase1detail

• Initial mockups:
  • about v1: https://bug781911.bugzilla.mozilla.org/attachment.cgi?id=652184
  • about v2: https://bug781911.bugzilla.mozilla.org/attachment.cgi?id=652185
  • mission v1: https://bug781913.bugzilla.mozilla.org/attachment.cgi?id=652187
  • mission v2: https://bug781913.bugzilla.mozilla.org/attachment.cgi?id=652188
• CR 1: http://cl.ly/image/0a1m3L3E1o27/o