Websites/mozilla.org/about
Contents
Goal
Quite simple:
- Redesign the about, mission, and supporting pages to better showcase our story, who we are and why we're different. wohoo!
Background
We have a rich and compelling story that we've never been able to articulate in a crisp, clear and consistent fashion. Mozilla.org was redesigned in part to help showcase who we are, and yet the "about" and "mission" pages fell short of this as they were hacked together rather quickly. It's time to change that.
The current pages consist of:
- dry catalogue of links
- irrelevant or disorganized content
- disconnect between about / mission page
- links to pages with outdated visual design
What we'd like to do is better showcase:
- our story: history and mission, getting involved/jobs
- the community: personality, culture, global diversity, moz spaces
- modern technology: css animations, parralax, interactivity, etc.
Key considerations:
- visual storytelling - photographs, infographics, interactivity.
- UI/IA organization. cleaning up main nav, flow, etc.
- localization - this is definitely part of the roadmap
- mobile - responsive design
Roles
Need to get in touch with someone on this project? Hope this helps:
- Proj owner: Tara
- Design/Copy: Ty, Matej, Tara
- Webdev: MikeA
- IA/UX: Holly
- Localization: Pascal
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
Art Direction
Lets 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.
Design direction and thoughts in detail found here: https://etherpad.mozilla.org/about-mission-phase1-detail-design
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/ http://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html 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/
Content 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:
Deadlines:
- 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.
Design:
- Initial mockups:
- Photo pool: http://bit.ly/Nd8K2V
- Creative Rounds:
- /about CR1: http://cl.ly/image/0a1m3L3E1o27/o
- /about CR2: http://cl.ly/image/2w3W2w3V1R1w
- /about CR3: https://bug781911.bugzilla.mozilla.org/attachment.cgi?id=654095
Phase 2
Content audit and direction in detail:
Deadlines:
- Milestone reference: Firefox's Birthday
- IA review due by ...
- Final designs due by ...
- Final copy due by ...
Scope overview:
- UX/IA review and improvement
- expand the narrative via visual/copy
- /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
Deadlines:
- Milestone reference: Mozilla's 15th Year
- Final design edits due by ...
- Final copy edits due by ...
Scope overview:
- 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
IA/UX
Considerations, areas to review:
- Moz.org main nav: mission, about, products, get involved. Is this right?
- Keep "about" and "mission" as separate links in main nav, cross-promote within each.
- consolidate/organize content when possible
- delete or update obsolete links
- updating themes /style consistency
- what to do with the old mission page: http://www.mozilla.org/about/mission.html
- how is this currently being used?
- what will we break by removing it?
WebDev
Localization
Locales based on: Retention, Acquisition, and PR priority markets.
- US
- UK
- Brazil
- Germany
- France
- Poland
- Italy
- Indonesia
- China
- India
- Japan
- Russia
- Mexico
- Philippines
- Spain
- Argentina
Localization request form:
Localization tracking bug:
