MozillaWiki

MDN/Projects/Completed/Redesign: Difference between revisions

< MDN‎ | Projects‎ | Completed
(Created page with "Now that we've got kuma launched, it's time to start thinking about the next steps for improving MDN. We'll be kicking off a project to redesign the site and achieve some high-le...")
 
(mdn-drivers is being deprecated)
 
(74 intermediate revisions by 7 users not shown)
Line 1: Line 1:
Now that we've got kuma launched, it's time to start thinking about the next steps for improving MDN. We'll be kicking off a project to redesign the site and achieve some high-level goals.  
The MDN Redesign launched on December 9, 2013.  


== Redesign Goals ==
[[File:Mdn_redesign.png]]
*Improve performance
== High-Level Redesign Goals ==  
*Unified experience for developers - across MDN docs, Mozilla tools and products
*Improve user experience & usability
*Better site structure, navigation & ability to quickly find key content
*Better site structure, navigation & ability to quickly find key content
*Clearer separation of product and Open Web Content
*Update the design to something dynamic, modern, & more consistent with the brand
*Update the design to something dynamic, modern, & more consistent with the brand
*Improve user experience & usability
*More flexibility in content sources and presentation (wiki, github, read the docs, offline, on mobile devices)
*Improve SEO
 
*More flexibility in how content is presented (especially the home page & landing pages)
== Redesign Roadmap ==
*<b>Full Site Redesign/Rebranding</b> - further refine global nav & homepage, new site design, restructure information architecture, new landing pages, new features
**Architecture proposal completed and shared for feedback - 27 June
**Community feedback of proposals via IRC - 17:00:00 GMT 28 July
**Wireframes completed and handed off to design team - 2 July
**Design phase -  2 August - 10 September
**Beta Testing: starting 1 October
**Implementation roll out - December 9, 2013
 
<br>Track progress through the [https://bugzilla.mozilla.org/show_bug.cgi?id=878403 Redesign Tracking bug] in Bugzilla
 
=How you can be involved=
 
==Input into tasks & planning==
 
Much of the planning goes on in the [https://wiki.mozilla.org/MDN/Development/drivers mdn] mailing list; you should join if you want to help prioritize the development work that happens on MDN, including the redesign.
 
== Testing & Feedback ==
 
Please see our [[/Testing|Testing]] page for details on the beta testing program, which includes archives of feedback and results.
 
'''Before anything else, please [http://mzl.la/mdn-redesign-feedback file one bug for each piece of feedback you want to share]. We would love to hear from you on IRC and through our mailing lists, but if you have not already filed a bug we will politely ask you to do so. Remember to always use this form, as it will group feedback appropriately and ensure that the team sees it.'''
 
A couple times each week, we'll send out the list of bugs that are new and need to be categorized (blocks launch or does not) to the [https://lists.mozilla.org/listinfo/mdn mdn@lists.mozilla.org] mailing list (which is used to prioritize work on MDN and is open for anyone to participate). Bugs will be discussed there and the team can, collectively,  decide what needs to be fixed before the redesign launches to the general public. We also will have a weekly, open meeting to make calls on anything that is stalled. Meetings are held every Tuesday at 17:00 UTC (10am PST) on IRC in #devmo.
 
*[https://bugzilla.mozilla.org/showdependencytree.cgi?id=925144&hide_resolved=1 Launch blocking bugs]
*[https://bugzilla.mozilla.org/showdependencytree.cgi?id=910513&hide_resolved=1 New/to be processed bugs]
*Bugs that can be [https://bugzilla.mozilla.org/showdependencytree.cgi?id=925145&hide_resolved=1 addressed after launch]
 
==Help with new site content==
We have some lovely new templates for landing pages, and we need help creating these pages! -
if you'd like to own a section of the site - making sure the pages are thoroughly tested, provide input and advive on how to apply or improve the design ,etc, please email Ali (aspivak@mozilla.com).
Pages need to be tagged for the new search functionality  - the guide to doing this will be published shortly
Pages need to have Quicklinks added (see the page design for examples of quicklinks)  - the guide to doing this will be published shortly
 
= Redesign Documentation =
 
== News and Status Updates ==
 
Sheppy's blog has frequent posts on changes to Kuma, and is a good place to get an overview of what's happening:
 
* [https://www.bitstampede.com/tag/kuma/ Bit Stampede: Kuma posts]
 
== User Experience & Design ==
*[https://wiki.mozilla.org/MDN/Development/Redesign/Whitespace Requests/suggestions for reducing/removing whitespace]
*[https://wiki.mozilla.org/images/c/cd/7NOV13_MDNstyletips.pdf Tips for how to style landing pages]
*[http://hollyhabstritt.com/blog/2013/11/5/command-query-a-better-filter-and-search-for-developers-on-mdn Command & Query proposal for new filtering and search UI ]
*[https://developer.mozilla.org/en-US/docs/User:teoli/In_content In-Content style summary page] - a collection of styles used in article pages
*[http://cl.ly/image/2r2P342g0c2F/o First Draft of new homepage design] & page for info & feedback
*[https://etherpad.mozilla.org/MDN-homepage-feedback Feedback on homepage wireframe]
*[http://f.cl.ly/items/0A3X0L1d2g0K2K2m3W0M/21AUG13_MDN_wireframes.pdf Homepage & Landing Page Wireframes (full set)]
*[https://wiki.mozilla.org/MDN/Development/Redesign/NewDesignV1 Proposed page design v1] - pdf of design mockups plus wiki page for feedback on the design
*[http://f.cl.ly/items/463H2U3E0k0Q0C2G1P3J/09AUG13_AppsLanding_MDN.pdf Landing Page wireframe]
*[https://wiki.mozilla.org/images/e/e8/NewMDNInfoArch_June2013.pdf Proposed Site Architecture] (high level)
*[http://cl.ly/3T18323e2g2e Wireframes for Page Types, Article Level Template, Search] (in progress)
*[https://wiki.mozilla.org/MDN/Development/Redesign/UserResearch User Research]


== Redesign Ideas ==
== PRD's and Planning ==
This is just a rough collection of things that we might want to consider when we start the MDN redesign. This is by no means a final list, and by no means well organized. Just a collection of ideas.
Current:
*[https://etherpad.mozilla.org/redesign-tasks Redesign Tasks]
*[https://etherpad.mozilla.org/mdn-20homepage-20content Home Page Content] - brainstorming what goes on the new MDN homepag
*[https://etherpad.mozilla.org/mdn-community-content MDN Community content] - what info we should provide about the MDN community
*[https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing/Page_types Proposed Page Layouts]
*[https://docs.google.com/document/d/1BcPSF4mpSGSYCB86j_e1PfclS7VJdBF9xJ_XXLDhENo/edit?usp=sharing Redesign PRD]
*[https://docs.google.com/a/mozilla.com/document/d/1qdeGCDei2kYltPLxeaA8yiHevUJj5_1jm45mpA2GX38/edit?usp=sharing Redesign Goals]


*Clean up CSS, JS, and templates
May 2013 Release:
*JavaScript framework update (possibly move to something modular).  
*[https://docs.google.com/a/mozilla.com/document/d/11bs4dqQqqL1p-gpxUDZilo9fvr_-BJmrcMIV5LrE1zg/edit PRD] for Content Zones/DevHub integration
*Provide a property list, improved compatibility tables (by browser as well as by element) – similar to W3Schools concept
*[https://etherpad.mozilla.org/mdn-homepage-May2013 Home Page content for May 2013 Release]
*Enable mobile/responsive design & printable pages
*[https://docs.google.com/a/mozilla.com/file/d/0B9B4DXCweXv2aEc4QzFBdi00b1k/edit DevHub Integration Strategy]
*Easier to find profiles/listings/ general information
*[https://docs.google.com/spreadsheet/ccc?key=0ApY0XuSv-jEbdE9HRHQ4cG1ZMElsb0dJdTJNZjYxZVE#gid=0 Devhub Requirements] (aka MDN Curation)
*Better/clearer language selectors & navigation through translated pages
*[https://etherpad.mozilla.org/MDN-redesign-kickoff Kickoff meeting notes]
*Refresh demo section & integrate better with rest of content
*Sidebars in given parts of the site: if you're in the CSS reference, you have a sidebar of links to all the CSS properties; if you're in the HTML reference, a sidebar listing the elements.
*Remove discussions from the menu
*Ability to build high level structure & page order natively (w/o resorting to templates)
*Homepage should have a big search box in the middle
*Links to popular topics or a popular doc panel
*Autocomplete will show "canvas" and "css" at the top instead of just autocomplete), so it will still be easy to get to those popular pages from the search box.
*Better navigation within topics and subtopics. Provide clear navigation; if you hit almost any CSS page, for example, you get information about the given topic but it's not always clear where to go next.  Or what pages would be related. 
*Something like XBreadcrumbs (http://www.ajaxblender.com/script-sources/xbreadcrumbs/demo/index.html)
*Add  "favorites". If a user is logged in, we can allow them to "favorite" documents within MDN (not bookmark in the browser) & access via a secondary computer or a mobile device.
*More guided documentation
*Refreshed & more flexible home page; able accommodate new products & technologies
*We might want to take a look at what editors are trying to accomplish with templates, and look at supporting those things natively. Firefox sometimes does the same thing, pulling in features that started out as extensions and gained popularity (bookmark sync, highlighting the domain in the address bar, etc.).
* When a user reaches a page that hasn't been translated yet, they get a message explaining the situation and asking them to help with localization. But this message itself needs to be localized, defeating the purpose [https://developer.mozilla.org/ca/docs/HTML/HTML5 in some cases].
* Localizers should be warned (or better yet, prevented) from localizing variable names. Doing so can cause an internal server error.
* The link between the Demo Studio and the Dev Derby is not especially obvious. Some people (even some people in Engagement) don't realize that they are complementary sister sites.
* It would be great to keep the long contest descriptions around even after the contest has ended. I spend a lot of time on these, and they usually provide pretty good guidance in getting started with the technology.
* have a "Help" link on the MDN, with a few options: I want to report an issue with documentation, I want to report an issue with the underlying software, I want to report an issue with Firefox. In the latter case, we could just bump people over to SUMO, saving us frustration and helping those users get the help they need more quickly.


== Some features that could use thoughts from the user experience team ==
__NOTOC__
* https://bugzilla.mozilla.org/show_bug.cgi?id=773054
* https://bugzilla.mozilla.org/show_bug.cgi?id=770965#c3
* https://bugzilla.mozilla.org/show_bug.cgi?id=773502
* https://bugzilla.mozilla.org/show_bug.cgi?id=780224
* https://bugzilla.mozilla.org/show_bug.cgi?id=770739
* https://bugzilla.mozilla.org/show_bug.cgi?id=784564
* https://bugzilla.mozilla.org/show_bug.cgi?id=784719
* https://bugzilla.mozilla.org/show_bug.cgi?id=784758
* https://bugzilla.mozilla.org/show_bug.cgi?id=791842

Latest revision as of 21:09, 4 February 2015

The MDN Redesign launched on December 9, 2013.

Mdn redesign.png

High-Level Redesign Goals

  • Unified experience for developers - across MDN docs, Mozilla tools and products
  • Improve user experience & usability
  • Better site structure, navigation & ability to quickly find key content
  • Update the design to something dynamic, modern, & more consistent with the brand
  • More flexibility in content sources and presentation (wiki, github, read the docs, offline, on mobile devices)

Redesign Roadmap

  • Full Site Redesign/Rebranding - further refine global nav & homepage, new site design, restructure information architecture, new landing pages, new features
    • Architecture proposal completed and shared for feedback - 27 June
    • Community feedback of proposals via IRC - 17:00:00 GMT 28 July
    • Wireframes completed and handed off to design team - 2 July
    • Design phase - 2 August - 10 September
    • Beta Testing: starting 1 October
    • Implementation roll out - December 9, 2013


Track progress through the Redesign Tracking bug in Bugzilla

How you can be involved

Input into tasks & planning

Much of the planning goes on in the mdn mailing list; you should join if you want to help prioritize the development work that happens on MDN, including the redesign.

Testing & Feedback

Please see our Testing page for details on the beta testing program, which includes archives of feedback and results.

Before anything else, please file one bug for each piece of feedback you want to share. We would love to hear from you on IRC and through our mailing lists, but if you have not already filed a bug we will politely ask you to do so. Remember to always use this form, as it will group feedback appropriately and ensure that the team sees it.

A couple times each week, we'll send out the list of bugs that are new and need to be categorized (blocks launch or does not) to the mdn@lists.mozilla.org mailing list (which is used to prioritize work on MDN and is open for anyone to participate). Bugs will be discussed there and the team can, collectively, decide what needs to be fixed before the redesign launches to the general public. We also will have a weekly, open meeting to make calls on anything that is stalled. Meetings are held every Tuesday at 17:00 UTC (10am PST) on IRC in #devmo.

Help with new site content

We have some lovely new templates for landing pages, and we need help creating these pages! - if you'd like to own a section of the site - making sure the pages are thoroughly tested, provide input and advive on how to apply or improve the design ,etc, please email Ali (aspivak@mozilla.com). Pages need to be tagged for the new search functionality - the guide to doing this will be published shortly Pages need to have Quicklinks added (see the page design for examples of quicklinks) - the guide to doing this will be published shortly

Redesign Documentation

News and Status Updates

Sheppy's blog has frequent posts on changes to Kuma, and is a good place to get an overview of what's happening:

User Experience & Design

PRD's and Planning

Current:

May 2013 Release:


Retrieved from "https://wiki.mozilla.org/index.php?title=MDN/Projects/Completed/Redesign&oldid=1053738"