MozillaWiki

Websites/mozilla.org/about: Difference between revisions

Page Discussion

Websites/mozilla.org/about (view source)

Revision as of 20:26, 23 August 2012

1,369 bytes added ,  23 August 2012
→‎Phase 1
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
== 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. 
<i>The current pages consist of:</i>
* dry catalogue of links
* irrelevant or disorganized content
* disconnect between about / mission page
* links to pages with outdated visual design
<i>What we'd like to do is better showcase:</i>
* our story: history and mission, getting involved/jobs
* the community: personality, culture, global diversity, moz spaces
* modern technology: css animations, parralax, interactivity, etc.
<i>Key considerations:</i>
* 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 ==
== Timeline ==
* Phase 0: where we are now (not good!)
* Phase 0: where we are now (not good!)
Line 7: Line 41:
* Tracking bug: https://bugzilla.mozilla.org/show_bug.cgi?id=781916
* Tracking bug: https://bugzilla.mozilla.org/show_bug.cgi?id=781916


=== Phase 1: ===
== Art Direction ==
* 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: ===
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.
* Milestone reference: Firefox's Birthday
* IA review due by ...
* Final designs due by ...
* Final copy due by ...


Scope:
Design direction and thoughts in detail found here:
** UX/IA review and improvement
https://etherpad.mozilla.org/about-mission-phase1-detail-design
** 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:
Sampling of good about pages, story telling, and content collages/grids:
Line 83: Line 60:
     http://www.estudioel.com/
     http://www.estudioel.com/
     http://www.zero1.org/
     http://www.zero1.org/
Responsive photo collage demo:
     http://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html
     http://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html
More involved parralax samples:
     http://www.culturalsolutions.co.uk/
     http://www.culturalsolutions.co.uk/
     http://www.ok-studios.de/home/
     http://www.ok-studios.de/home/
Line 94: Line 67:
     http://www.nike.com/jumpman23/aj2012/
     http://www.nike.com/jumpman23/aj2012/


Layout:
== Content Direction ==
* 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 ==


<br>
<br>
Line 144: Line 87:


Content audit and direction in detail:
Content audit and direction in detail:
* https://etherpad.mozilla.org/aboutmissionphase1detail
* https://etherpad.mozilla.org/about-mission-phase1-detail-content


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:  
* Initial mockups:  
** about v1: https://bug781911.bugzilla.mozilla.org/attachment.cgi?id=652184
** about v1: https://bug781911.bugzilla.mozilla.org/attachment.cgi?id=652184
Line 151: Line 109:
** mission v1: https://bug781913.bugzilla.mozilla.org/attachment.cgi?id=652187
** mission v1: https://bug781913.bugzilla.mozilla.org/attachment.cgi?id=652187
** mission v2: https://bug781913.bugzilla.mozilla.org/attachment.cgi?id=652188
** mission v2: https://bug781913.bugzilla.mozilla.org/attachment.cgi?id=652188
* CR 1: http://cl.ly/image/0a1m3L3E1o27/o
* 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 ==
== Phase 2 ==


Content audit and direction in detail:
* https://etherpad.mozilla.org/about-mission-phase2-detail-content
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 ==


== Phase 2 ==
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 ==
== WebDev ==


== Localization ==
== 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:
*
Tshahian
720

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/462579...463746"