Closed Bug 683807 Opened 13 years ago Closed 13 years ago

[State of Mozilla] Design website template

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Platform:
x86
macOS
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: christine.brodigan, Assigned: ltom)

References

Details

Attachments

(3 files)

Wireframes for landing page and sub-page
281.76 KB, application/x-zip-compressed
Details
DRAFT State of Moz Content
166.30 KB, application/vnd.openxmlformats-officedocument.wordprocessingml.document
Details
2010 Audited Financial Statement
69.99 KB, application/pdf
Details 
Hey Tara,

This is the bug for the website component of this year's State of Mozilla. As a design-direction Melissa and Shannon would love to go with a simple landing page design in the style of http://webfwd.org with a bit more traditional usability.

Content for the full site will be ready for string freeze around 9.15.2011, in preparing for front-end coding (no backend needed - all static content), but the sections identified in the navigation are locked down.

Wireframes with notes are attached for the landing page and section page (so, two designs).

Should follow the main elements of mozilla.org/firefox (pinstripe background, font classes etc. - nothing too different, so we provide a pretty seamless experience).

I'll let Melissa and Shannon take it from here and please ping with questions.

I know you're busy with all sorts of Q3 crazed projects, so if you need any recommendations for an external designer who could easily work within the mozilla.org/firefox template please let me know, I'm happy to connect you with a few awesome people!

~cb
What's the URL of this site going to be again?
(In reply to John Slater from comment #1)
> What's the URL of this site going to be again?

Should probably follow the convention of previous years: 

last year, http://www.mozilla.org/foundation/annualreport/2009/

this year, http://www.mozilla.org/foundation/annualreport/2010/ 

next year, http://www.mozilla.org/foundation/annualreport/2011/

Thoughts?

~cb
looks good. i believe dbos set it up that way so we'd be able to do precisely what you show - just slot in the next report year over year...
Adding Steven - hey Steven this one will be coming your way mid-September or do for an end of month delivery (all static stuff).
Hi Tara - What are the next steps here? I would love to work with the site designer about the possibility of photos, videos and what will look good given the layout of the page. 

Thanks!
Shannon
Assignee: tshahian → ltom
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Some quick mockups based on existing styles, sub-navigation etc to get us started:

Landing
http://cl.ly/3G0U0z0z0g441J05233v

Section
http://cl.ly/3I0D320k011p3n3v0r0T
Hi Lee - For page 1 below is the *FINAL* content for the State of Mozilla landing page. Will  upload the *not final* video shortly. 

Mozilla’s mission is to ensure that the the Internet remains open, interoperable and respects user sovereignty. We do this by building software that puts people in control of their digital lives,  like Firefox. We do this by empowering a global community of people who volunteer to champion these efforts.

Internet life is changing. We are connecting through more devices. We are living in apps as well as browsers. We are interacting with friends and followers and acquaintances.  We can experience the Web through a highly personal, highly customized lens.

The challenges ahead of us are very real.  Mobile platforms are more closed and more centralized than we have seen in decades. As individuals, we are losing the ability to act on the Web without permission from large, centralized gatekeepers. We are all being tracked, logged, cataloged, monetized and turned into products to be sold.  We're seeing the universal platform of the Web fragmenting back into multiple different worlds.

As the Internet experience is changing, Mozilla, too, is changing. The products and tools that we use to advance our mission are expanding and evolving. A browser is necessary but not sufficient. Equally important is expanding the number of people who understand our values and identify as Mozillians.  Mozilla has both the challenge and the opportunity to expand our reach dramatically.  We have the ability to bring our values to life in new ways.  Embracing these opportunities means embracing change, embracing hope and embracing determination.  This is how we will continue to give people  ultimate authority over their digital lives.

I am pleased to share with you this year’s annual State of Mozilla report.  It details our opportunities, our community and our expanding set of initiatives. I invite you to learn more about the Mozilla Project and join us in our our ongoing efforts to build a better Internet.
Thanks Shannon.  It might be easier to just attache all the copy content as a word doc, organized by section.  Is that possible?
Also, Lee:  could you please do a mockup of the "projects" page and maybe insert some FPO blocks for where the visualization would go?  Trying to get a sense of size and orientation to give to the designer.  Obvious options include:

* Horizontal
* Horizontal but full span of the page.
* Vertical (pushes the copy further down though)

I think I prefer horizontal myself, but vertical might be better for blogs and so forth.  If you can give me some aspect ratios based on what you think would look best on the page, I can pass that on to the designer, it would really help me. And for reference, the design bug for that is here: Bug #681149
Hi all - Here is the link to the video (too big to upload to the bug). 

http://www.sendspace.com/file/we10sq 

Also, Melissa is sending feedback on the current content today so will update the bug with the full word doc as soon as I have closer-to-final content today.
Here are the photos: https://docs.google.com/spreadsheet/ccc?key=0Ar7YDtcPGFfVdHREWTBJYTVXV0dlY1JhUTFqNENqQVE&hl=en_US#gid=0 

We are going to take the full high-res versions and put them into a Flickr pool tomorrow. We also have these Flick photos: http://www.flickr.com/groups/1787005@N22/
Re: comment #6, I'm a little confused. Don't we want this in a more neutral style than the Firefox blue? Or, am I just reading too much into early stage mockups?
Good question, which reminds me:

* I'm a little confused too about where this will go.  I guess the URL is mozilla.org/foundation/report or something to that affect... so, it's mozilla related vs. firefox.  This is mocked up as the product page (product specific header and footer)  we should change that and discussed it in the meeting, but I wasn't sure what had been discussed before and how much to nudge the design theme itself in a different direction.

John, that was actually a question I wanted to ask you.  Thoughts?
Going from the URL direction in comment #2 (and the designs in past years) this should be a Mozilla-looking site rather than a Firefox one. The tricky part, of course, is that we haven't redesigned the root mozilla.org site so it's hard to say exactly what that will mean.

My suggestion would be to not worry overly much about how the redesign will turn out, and instead focus on evolving the Firefox site look into something similar, but also more neutral with its own graphic elements that relate to the content (adding any little details that reflect on or pull from the work-in-progress infographic could be cool).

For inspiration, I'd suggest checking out some of the work Ty has done lately with various blogs - the User Research one comes to mind (http://blog.mozilla.com/userresearch/), but I believe there are others.
Tara and Lee - Attached is draft content to give you an idea of how the pages could layout. The first page is final and the rest still needs to be approved by Melissa and Mitchell but I think it is a solid start. 

Thanks!
Shannon
Hi all,
In attempt to make this less Firefox centric, I took borrowed styles based on Ty's work on the Mozilla User Research blog that John referred to in Comment 14.  I think it has a clean, neutral and warm Mozilla.org style, but nods to our latest conventions in UI etc. One major thing you'll notice is that the navigation is now at the top of the page. For long pages with tons of content, we can provide "Return to top" links as show in this mockup:

http://cl.ly/0K3q1h0d2v36233q0U1F

Let me know your thoughts.
Lee - this is gorgeous.  Big thanks for the incredible turnaround here.  I love this.
(In reply to Melissa Shapiro [:shappy] from comment #17)
> Lee - this is gorgeous.  Big thanks for the incredible turnaround here.  I
> love this.

Melissa,

The only thing I might take away are # of views, in case the video doesn't become an instant YouTube sensation.

~cb
(In reply to Melissa Shapiro [:shappy] from comment #17)
> Lee - this is gorgeous.  Big thanks for the incredible turnaround here.  I
> love this.

oh, and if you want to add "Next:...." to the bottom for pagination, since it's a report style content product. It might encourage more clickthroughs than a user who has to go back to top to drill down into the next section.
I'm glad you like how this is progressing. Some good ideas there...
I'll take out the video views ticker, and try to integrate the pagination for the next round of mockups. Stay tuned...
you Rock, Lee.
(In reply to Tara from comment #9)

Tara, let's give the designer these proportions to work with:

> * Horizontal - 640 x 480 (horiz squarish)
> * Horizontal but full span of the page - 640 x 360 (horiz rectangle)
> * Vertical - 340 x 450 (portrait orientation)

Any of these three proportions will work with our pages, and hopefully translate well to other devices, as well.
Hi all - Not sure if this fits in here but some videos we were thinking about including (wherever they may fit) include: 
The contribute video: http://www.mozilla.org/contribute/ 
(maybe on the community page) 

(Maybe the brand video?) 
http://www.mozilla.org/en-US/firefox/video/?video=brand (Maybe on the conclusion page?) 

We also thought the why i love the web video might be good as well. 

Just some thoughts.
Also here is an updated version of the video with better intro card: http://www.sendspace.com/file/804km4
Hi all - Quick update here. Melissa and I are meeting with Mitchell tomorrow to go over content and the rest of the report. We should have *very near* final content tomorrow EOD. 

What are the next steps here for us in order to move this project to the next stage? 

Thanks!
(In reply to Shannon Prior from comment #25)
> Hi all - Quick update here. Melissa and I are meeting with Mitchell tomorrow
> to go over content and the rest of the report. We should have *very near*
> final content tomorrow EOD. 
> 
> What are the next steps here for us in order to move this project to the
> next stage? 
> 
> Thanks!

Shannon, can you gather up all design-related feedback and put into the bug for Lee Tom to address in his next iteration? I previously mentioned taking out the # of views and adding in pagination to the bottom.

Once, you all agree on a final design, Lee Tom can start passing to Steven for frontend work.

Thanks!
Blocks: 687178
Blocks: 687180
When should we expect the first designs to be handed off for implementation? Thanks.
No longer blocks: 687180
(In reply to Steven Garrity from comment #27)
> When should we expect the first designs to be handed off for implementation?
> Thanks.

Lee Tom, do you have an ETA for Steven. I've asked Shannon and Melissa to provide a list of final changes by Monday, Sept 19. Steven will need Tues-Fri to code and Raymond to QA for the release the following week.

Let us know!
Hey guys,
I'll shoot to have the 5 mockups/states of the page posted by EOD tomorrow. 
Steven, I picked up the basic template and styles from the User Research blog:  
http://blog.mozilla.com/userresearch/ with a few alterations that I will point out when I post the mockups (most likely type styles and background image.) I don't think it will look too different from that blog though. Thanks!
http://intothefuzz.com/leetom/PR/110919_stateofmozilla.zip

Hi all,
Here are the latest mockups (4 states sans Financials section.) 

- You may notice several places where I'm using placeholder text that either be flowed in, updated or omitted - let me know. 

- There are a couple pages that are very scarce with content, others that might have too much? 

- Mozilla Community infographic is still a work in progress - I've FPO'd the white version for reference and further discussion

- Steven G, I mentioned the background and font changes (departure from User Research blog.) Let me know if you need any files before content is solidified.
Hi Lee - Thanks, this looks awesome! 

For page 1: 
I would remove the "previous" at the bottom since it is the first page. 
I can write up a subheader to go under the heading tomorrow AM. 

Page 2: 
The second paragraph under the Do Not Track and Privacy heading can be removed. 
I think we can add some photos and/or a video here. I will take a look at ones I think may fit here in the AM and input them into the bug. 

Page 3: 
This page looks AWESOME. 
We have decided not to move forward with the infographic so please remove. 
Now that I see the way the paragraphs are laid out on the page, I think it may make sense to move the "vibrant new regional communities" section down to right above the "community in focus" sections. 

Other than that, I think the current video/photo assets are quite splendid ;) 

Page 4: 
Love the video here. Content waiting on feedback from Mitchell. 

Thanks again for all your help here. *Really* appreciate it. 

Re: The financial pages: 
I am getting the PDF documents from the financial team hopefully tomorrow and will input them into the bug.
(In reply to Shannon Prior from comment #31)
> Hi Lee - Thanks, this looks awesome! 
> 
> For page 1: 
> I would remove the "previous" at the bottom since it is the first page. 
> I can write up a subheader to go under the heading tomorrow AM. 
> 
> Page 2: 
> The second paragraph under the Do Not Track and Privacy heading can be
> removed. 
> I think we can add some photos and/or a video here. I will take a look at
> ones I think may fit here in the AM and input them into the bug. 
> 
> Page 3: 
> This page looks AWESOME. 
> We have decided not to move forward with the infographic so please remove. 
> Now that I see the way the paragraphs are laid out on the page, I think it
> may make sense to move the "vibrant new regional communities" section down
> to right above the "community in focus" sections. 
> 
> Other than that, I think the current video/photo assets are quite splendid
> ;) 
> 
> Page 4: 
> Love the video here. Content waiting on feedback from Mitchell. 
> 
> Thanks again for all your help here. *Really* appreciate it. 
> 
> Re: The financial pages: 
> I am getting the PDF documents from the financial team hopefully tomorrow
> and will input them into the bug.

Lee Tom - instead of "return to top" it might be a great experience to do what Yammer does https://skitch.com/chrissiebrodigan/f4j7t/screen-shot-2011-09-19-at-11.17.00-pm  - the little arrow and top are persistent throughout the experience, so for long posts the reader can jump back up without scrolling all the way to the bottom.

Just a thought!
All! 

We received a re-written version of the content from Mitchell. It is not *final, final* (perhaps a few sentence additions, copy edit, etc.) but this feels very close to being almost there. The new copy can be found here: http://etherpad.mozilla.org:9000/state-of-mozilla-2011-content

Also, Mitchell changed the headings on the Projects and community pages to: 
Opportunities and challenges
People

The new navigation will look like: 
Introduction 
Opportunities and challenges
People
Conclusion
Financials

NOTE: Steven and Lee: Page 1 is FINAL FINAL (Rainer is making one small edit to the video and then we will have that go to with. 

Thank you all for your help here - I know we are pushing against deadlines.
Let me know when there's an implementation bug for this, and I'll commit a change to get the page served up from the mozilla.com codebase.
thanks Shannon, I'm happy to try some of the photos you're pointing to in Comment 34. 
One concern that's jumping out at me is "Opportunities and Challenges" as a link in the main nav bar. I'm sure that will display well on the page as a section header, but it's going to be huuge in the main top navigation, even if we break it up to 2 lines. Is there an alternative to "Opportunities and Challenges?"

maybe.... "Opps/Challs"  (just kidding, of course)
(In reply to Lee Tom from comment #36)
> One concern that's jumping out at me is "Opportunities and Challenges" as a
> link in the main nav bar. I'm sure that will display well on the page as a
> section header, but it's going to be huuge in the main top navigation, even
> if we break it up to 2 lines. Is there an alternative to "Opportunities and
> Challenges?"
> maybe.... "Opps/Challs"  (just kidding, of course)

Perhaps we could just us "Opportunities" in the top nav, and use the full title on the actual page.

Or "o10s/c10s/", or "Opportunages". I could go on...
+1 to opps and challs :) 

JK 

Let's go with "opportunities" will that fit?
ha - "o10s/c10s/" gets my vote! 

I think "OPPORTUNITIES" will work for us, thanks. 
Steven, regarding Chrissie's suggestion around a alternative to "Return to Top" anchor tabs, do you know/have you implemented a different approach to these long scrolling pages? I asked around for a suggestion in the UX and Fistbump channels, but no one replied...
Hi Lee - Here is the 2010 Audited Financial Statement for the "Financials" section of the site. This will need to be a downloadable PDF. 

Still waiting on the PDF form 990. 

The content of the page will just be the FAQ. You can find the draft FAQ here: http://etherpad.mozilla.org:9000/state-of-mozilla-2011-draftfaq
(In reply to Lee Tom from comment #39)
> Steven, regarding Chrissie's suggestion around a alternative to "Return to
> Top" anchor tabs, do you know/have you implemented a different approach to
> these long scrolling pages? I asked around for a suggestion in the UX and
> Fistbump channels, but no one replied...

I wonder if we need any "Return to Top" links at all - there are only 5 pages (right?) - we've already got next/prev links at the bottom - I think that might be enough.

Another option would be to keep the header nav fixed to the top of the viewport (something like this: http://twitter.github.com/bootstrap/). This would work for the type of content we have here, but it would require some design adjustments (the tabs would need to have a background to remain readable when content scrolls up underneath). It would also be a break in the way the header works on any of the other mozilla sites. Might not be workable this late in the schedule.

Given the nature of the content and the schedule, I'd say keep it simple and drop the "top" links.
(In reply to Steven Garrity from comment #41)
> (In reply to Lee Tom from comment #39)
> > Steven, regarding Chrissie's suggestion around a alternative to "Return to
> > Top" anchor tabs, do you know/have you implemented a different approach to
> > these long scrolling pages? I asked around for a suggestion in the UX and
> > Fistbump channels, but no one replied...
> 
> I wonder if we need any "Return to Top" links at all - there are only 5
> pages (right?) - we've already got next/prev links at the bottom - I think
> that might be enough.
> 
> Another option would be to keep the header nav fixed to the top of the
> viewport (something like this: http://twitter.github.com/bootstrap/). This
> would work for the type of content we have here, but it would require some
> design adjustments (the tabs would need to have a background to remain
> readable when content scrolls up underneath). It would also be a break in
> the way the header works on any of the other mozilla sites. Might not be
> workable this late in the schedule.
> 
> Given the nature of the content and the schedule, I'd say keep it simple and
> drop the "top" links.

Steven,

Quick note... the use case for *return to top.* 

Most users will scan a page and bounce while a few will hopefully click to another section (most likely from the main L1 nav). If a user makes it to the bottom and clicks next or previous that's excellent, but if a user fatigues and we can provide them with a shortcut to top (since they won't know or except that there's a navigation element at the bottom) this is a sure-fire way to draw a bit more of a visit out of them, encouraging ease of use from anywhere on the page. 

Also, the content here is at times quite dense, which is why I planned for this element.

If a "return to top" is a blocker to launching on time, defn lose it (no question), but otherwise, it's meant to be a useful nav item for several use cases around traditionally challenging-to-navigate content that I think we can both provide and learn from. Keep it simple though - if I've added complication, lose it! Mahalo!
Hi all,
Here are the latest mockups using content from the etherpads. I'm using "top" links on the longer pages and/or when there's a suitable page break in the content. I've also updated the main nav to reflect Mitchell's requests, as well as flowed in new community pictures that seemed relevant to certain sections.

1. Introduction
http://cl.ly/3z0D3m2w3w3g0C0n3A2z

2. Opportunities
http://cl.ly/240Q223N3f0p462K1x0O

3. People
http://cl.ly/3y0F3H1M1i093e0D0A3y

4. Conclusion
http://cl.ly/3s2s451f3v1f2t1M1J1i

5. Financials
http://cl.ly/123q0S0G2q0p3o3w0k2r
Looking really good! Personally, the vertical lines in the background still look pretty faint to me, but that not necessarily a dealbreaker if it's not bugging anyone else.

Are the photos final? For the billboard pic on 2 & 5, we have many better ones to use...I'd suggest something from either of these albums:
http://www.flickr.com/photos/intothefuzz/sets/72157626401344080/
http://www.flickr.com/photos/intothefuzz/sets/72157626491288702/
oops! good catch slater. I didn't mean to use 2 of the same images there (I think I had a layer turned off). 

I actually pumped up the contrast on those vertical lines, but things look diff on every monitor. I'll look into it.
(In reply to Lee Tom from comment #45)
> oops! good catch slater. I didn't mean to use 2 of the same images there (I
> think I had a layer turned off). 

Cool. Also, to be clear, I'd rather not use that picture in either place. If we're showing off people it's probably fine, but since the intent seems to be showing off the board itself we have many better ones.
    Lee - These look FANTASTIC!!! I am sooo happy with the way everything is turning out and thank you all to all the hard work you have put in here. 

    A couple thoughts: 
    - Do you think we can remove the subheads on each page? There currently isn't content there and I am not sure what we would put there. 

    Page 1: 
    For the video caption maybe we say something like: 
    Mitchell Baker, Chair discusses the State of Mozilla. 


    Page 2: 
    The privacy and DNT para are cut off. Not sure if this is on purpose. 

    Page 5: I really like the idea of some sort of photo on page 5. 

    So, what are next steps once we have all the content final? (Working through that right now) 

    Thanks!
Happy you like how these are coming along, Shannon. I made more changes like:

- removed page subheads
- good catch on the DNT paragraph - that was just my goof
- revised pics that Slater pointed out - they're much better now, me thinks
- pagination links: how about using the page/section titles vs. "previous" and "next"? Since the user will likely not see the main header, they won't exactly know what pages they're navigating to. 

1. Introduction
http://cl.ly/1Y1W0t1I1O0r3e3E373U

2. Opportunities
http://cl.ly/3i2E233e3d3r1z0j3s1I

3. People
http://cl.ly/1E3I3e1z1a2K302k3R3X

4. Conclusion
http://cl.ly/3I2q27383G252W052D03

5. Financials
http://cl.ly/0W2N222z3R0n1E2m200y


Shannon, if there are no major graphical changes, I can pass PSDs over to Steven. I'm assuming it will be fairly easy to make small copy revisions in the implementation stage.
Blocks: 688750
Thanks, Lee! I think they look good to go. Melissa, please take a look when you have a moment. 

Thanks!
Hi all - Here are the three versions for the Mitchell intro video. Should I file a bug to get it hosted on videos.mozilla.org or how do we make sure they are hosted in the right place so they can be downloaded from the website? 

files.me.com/rainercv/x8ga90.mov
files.me.com/rainercv/c0c49v
files.me.com/rainercv/5ghtep
Lee, can you post the PSDs when you get chance? We'd like to work on there early on Monday if possible - we can always make adjustments changes roll in. Thanks.
You bet, Steven. Here they are:
http://intothefuzz.com/leetom/Mozilla%20Annual%20Report/
Would it be possible to put the "return to top" navigation *under* the "next section" navigation? Right now the arrow points up and then there's an arrow underneath pointing to the right.  Feels like those should be inverted. 

Otherwise, the pages look amazing.  Can't wait to see it go live this year!
PS - I should note that I'm not a designer (i draw stick figures) so if what I'm asking doesn't make sense from a design or navigation perspective, just let me know.  Thanks!
Hi Melissa, I think that the order of the navigation makes sense this way since the Top links will bring you to the top of the page the user is on (prioritizing staying on the current page) before moving forward or backward. I could also be wrong, but it feels correct to me. 

That said, I DO think it might be a little bit arrow (>>) heavy, so I propose taking the arrows pointing up next to the Top links out, and leaving the forward/backward arrows alone.
sounds good. thanks, lee!
Here is the video hosting bug for Mitchell's video: Bug 689317
All - Just met with Mitchell and have a quick update to share. Just met with Mitchell and Chris and we are *not* launching this week but would like the site ready to be launched early next week. 

We have a number of design related edits and feedback. 

Chrissie/Lee - can you meet early tomorrow morning to go over the updates and feedback? I will put a meeting on your cal and in the meantime stay tuned. 

One quick edit - we are going to use "FAQ" instead of Financials for the top-level nav?
Hey Shannon

Would be good to know what our next (firm) deadline is for design handoff.  having this ready to launch next week can mean a number of different things :) and it also depends on how much changes we're talking about.  So, definitely something we'll need to figure out at our meeting tomorrow before moving forward.
Feedback from Mitchell and Chris was that we should be ready to go as early as Tuesday AM (Oct 4).
Thanks Melissa.  I guess someone here will have to help translate that into a design handoff deadline for me as I'm not sure how much time is needed between handoff and implementation for these.
OK - is that Steven? Chrissie? ???
(In reply to Melissa Shapiro [:shappy] from comment #60)
> Feedback from Mitchell and Chris was that we should be ready to go as early
> as Tuesday AM (Oct 4).

Does this mean the design/content will be finalized on Tuesday AM, or that everything should be ready to go onto the live website on Tuesday?

It's difficult for us to comment on what's involved given that we don't know the extent of the changes. Shannon & Melissa, when should we expect to get the updated design and final text? Thanks.
Blocks: 689650
Blocks: 689652
Blocks: 689653
Blocks: 689655
Blocks: 689656
WOHOO !
Status: ASSIGNED → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: