[NativeUI GA] update mozilla.org/projects page to reflect mobile work

RESOLVED FIXED

Status

RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: jslater, Assigned: tyronflanagan)

Tracking

Details

(URL)

Attachments

(3 attachments)

(Reporter)

Description

6 years ago
The http://www.mozilla.org/en-US/projects/ page contains a lot of outdated content and doesn't reflect Mozilla's move toward mobile at all.

So, as part of the mobile launch activities we'd like to give this page a refresh. Will post content direction here soon.
(Reporter)

Updated

6 years ago
Blocks: 763665
(Reporter)

Comment 1

6 years ago
Ty had created this mockup as a starting point...all the content is totally placeholder, but it at least shows how this stuff might be displayed.

http://cl.ly/120E2q3f3e1E0K2D2C3a/o

Next step: I'm going to put together a draft of how the content should be organized and we can go from there.
(Reporter)

Comment 2

6 years ago
This is a first pass at organizing this info, and I'm 100% certain something (or a lot of things) will need to change before it's finalized, but it's a worthwhile starting point. 

Products:
- Firefox
- Boot to Gecko
- Marketplace
- Identity
- Thunderbird

Innovations:
- WebFWD
- Mozilla Labs
- Webmaker 

Tools:
- Bugzilla
- Firebug
- (other?)

Platform:
- Gecko
- XUL Runner

Matej, do you see this page having much copy? Or just links out to sub-pages?

Comment 3

6 years ago
I think if the category names are clear, as they are in comment 2, this page won't need a ton of copy. I'd love it if we could handle it all with a headline and a short lead-in paragraph of two or three sentences (which would also give the instruction to click on each for more info).

I think comment 2 is a good starting point, but I have a few questions:

• I love that there's only one Firefox link, rather than separating it out between desktop and mobile, but where could we link to that gives both platforms equal prominence?

• Should we add Beta, Aurora and Nightly separately under Products?

• Should we add things like Pancake under Innovations?

• How about the new Web Developer tools built in to Firefox?
(Reporter)

Comment 4

6 years ago
(In reply to Matej Novak [:matej] from comment #3)
> I think if the category names are clear, as they are in comment 2, this page
> won't need a ton of copy. I'd love it if we could handle it all with a
> headline and a short lead-in paragraph of two or three sentences (which
> would also give the instruction to click on each for more info).

Works for me!
 
> • I love that there's only one Firefox link, rather than separating it out
> between desktop and mobile, but where could we link to that gives both
> platforms equal prominence?

https://www.mozilla.org/en-US/firefox/fx/ will have tabs for both mobile & desktop once Lee is finished redesigning it (bug 724083)
 
> • Should we add Beta, Aurora and Nightly separately under Products?

Yes! I can't believe I forgot those - thanks for the catch.
 
> • Should we add things like Pancake under Innovations?

I considered that but am not sure. I guess probably so.
 
> • How about the new Web Developer tools built in to Firefox?

I think so. Let me check.
(Reporter)

Comment 5

6 years ago
Talked to Kevin from the DevTools team, and he confirmed that "Firefox Developer Tools" would be good to add to this. Specifically he wrote:

"You could refer to them as the "Firefox Developer Tools", and I think it's useful to think of that collection as a project given that those tools will expand over time to help developers on Firefox, B2G, Fennec and WebRT (with the current plan to have Firefox provide the UI for all of that)."

It can link to https://developer.mozilla.org/en/Tools.

Comment 6

6 years ago
Here's an updated version of the list from comment 2 [with a few questions and comments in brackets]. Ty, does that give you enough to get started on a layout? I can work on the intro copy while you're doing that. Sounds like we want this done before the end of the quarter (John, is that just design, or implementation as well?).

Products:
- Firefox
- Firefox Beta
- Firefox Aurora
- Firefox Nightly
- Boot to Gecko [sounds like this might have a name soon]
- Marketplace
- Identity [should we call this Persona here?]
- Thunderbird

Innovations:
- WebFWD
- Mozilla Labs
- Webmaker [should Thimble be separate, or does it fall under Webmaker?]
- Pancake [does this even have a page we can link to?]

[should any of Limi's stuff fall under here, or is that much earlier stage thinking?]

Tools:
- Firefox Developer Tools
- Bugzilla
- Firebug [do the Developer Tools replace this?]

Platform:
- Gecko
- XUL Runner
(Reporter)

Comment 7

6 years ago
Thanks Matej. I've added a few comments inline. Ty, let us know where you are with all this.

(In reply to Matej Novak [:matej] from comment #6)
> Here's an updated version of the list from comment 2 [with a few questions
> and comments in brackets]. Ty, does that give you enough to get started on a
> layout? I can work on the intro copy while you're doing that. Sounds like we
> want this done before the end of the quarter (John, is that just design, or
> implementation as well?).

Should be live if at all possible.
 
> Products:
> - Firefox
> - Firefox Beta
> - Firefox Aurora
> - Firefox Nightly
> - Boot to Gecko [sounds like this might have a name soon]
yes, but we can keep calling it Boot to Gecko for now...the issue of the visual for it is a little more complicated, since we don't have a logo yet
> - Marketplace
> - Identity [should we call this Persona here?]
yes!
> - Thunderbird
> 
> Innovations:
> - WebFWD
> - Mozilla Labs
> - Webmaker [should Thimble be separate, or does it fall under Webmaker?]
not sure...let's start out with just Webmaker and we can expand as needed later
> - Pancake [does this even have a page we can link to?]
might just be a wiki or something
> 
> [should any of Limi's stuff fall under here, or is that much earlier stage
> thinking?]
much earlier...not ready for this page just yet
> 
> Tools:
> - Firefox Developer Tools
> - Bugzilla
> - Firebug [do the Developer Tools replace this?]
not sure, I'll ask Kevin
> 
> Platform:
> - Gecko
> - XUL Runner

Thanks!
(Reporter)

Comment 8

6 years ago
Confirmed with Kevin that Firebug should remain.

Comment 9

6 years ago
OK, here's the updated list:

Products:
- Firefox
- Firefox Beta
- Firefox Aurora
- Firefox Nightly
- Boot to Gecko
- Marketplace
- Persona
- Thunderbird

Innovations:
- WebFWD
- Mozilla Labs
- Webmaker
- Pancake

Tools:
- Firefox Developer Tools
- Bugzilla
- Firebug

Platform:
- Gecko
- XUL Runner
How's this for intro copy?


Built by us, for the Web.

Our dedication to driving the Web forward and keeping it open to everyone extends through everything we do at Mozilla. Here's a look at the products, innovations and tools that come from and help us achieve those goals. Click on each one to learn more.
(Reporter)

Comment 11

6 years ago
Like the message, but it feels a little long. We could try it in the layout and then revise, but I'd like to shorten it.

To that end, I think we could lose the last sentence altogether. A radical approach would just be to use the first sentence. I think this content will be pretty self-explanatory, so we don't need too much of an intro.
How about one of these (the last two are only slightly different)?


Built by us, for the Web.

Our dedication to driving the Web forward and keeping it open to everyone extends through everything we do at Mozilla.


Built by us, for the Web.

Here's an overview of the products, innovations and tools that help us drive the Web forward and keep it open to everyone.


Built by us, for the Web.

Here's an overview of the products, innovations and tools that come from our dedication to driving the Web forward and keeping it open to everyone.
(Reporter)

Comment 13

6 years ago
I actually like the first one. What do you think?
I like it too. I might even shorten it to this:


Built by us, for the Web.

Our dedication to driving the Web forward and keeping it open to everyone extends through everything we do.
(Reporter)

Comment 15

6 years ago
Sounds good to me. Over to you, Ty.
Assignee: Mnovak → tyronflanagan
(Assignee)

Comment 16

6 years ago
w00t!
(Assignee)

Comment 17

6 years ago
Created attachment 636820 [details]
Moz.org Redesign - Projects Page
Hawt!
(Reporter)

Comment 19

6 years ago
LOVE IT!

That said, some suggested tweaks:
- for the headline, what about just "Built for the Web"? That way we would avoid any confusion/angst around the word "us" and what it implies for employees vs volunteers.
- I showed this to Pete and he made a convincing case that we really only need one Firefox on here...having it show up 4 times (and not even include mobile) feels a bit like gaming the system. So, how about just having a single Firefox tile which can then point to the nifty channels page Ty designed.
- love the gecko illustration, but it's not an official logo (nor is it an official name) so I'd really like to not use it here. That makes the question of what to use a little harder, I know. Perhaps something like the main image on http://www.mozilla.org/b2g? 
- let's move Webmaker up to the Products section
- love the "reserved for future awesomeness" line, but let's remove the Firefox silhouette from there. For one, Chris really dislikes that image and also future awesomeness might not necessarily be branded as Firefox.

Also, let's figure out a way to add descriptive text here. One option would be that when you roll over an image it flips around to reveal a sentence or two about what the product is, but I know that's not very mobile friendly. Any other ideas for functionality that achieves the same basic goal? Matej, can you be collecting the copy for each section while we figure that out? (I say "collecting" b/c hopefully this is more a matter of pulling existing lines from the various pages rather than writing a bunch of new stuff from scratch.)

Thanks!
(In reply to John Slater from comment #19)

Sounds good, John. Here are a few thoughts and questions from me based on your comments:

> - for the headline, what about just "Built for the Web"? That way we would
> avoid any confusion/angst around the word "us" and what it implies for
> employees vs volunteers.

I'm good with that. I can also come up with some other options, if you like. I was working under the impression that was a line we wanted to keep (I'm not really sure where it came from).

> - I showed this to Pete and he made a convincing case that we really only
> need one Firefox on here...having it show up 4 times (and not even include
> mobile) feels a bit like gaming the system. So, how about just having a
> single Firefox tile which can then point to the nifty channels page Ty
> designed.

Channels page makes sense, but that doesn't include Nightly. Should we keep Nightly as a separate entry and have Firefox link to the Channels page?

> - love the gecko illustration, but it's not an official logo (nor is it an
> official name) so I'd really like to not use it here. That makes the
> question of what to use a little harder, I know. Perhaps something like the
> main image on http://www.mozilla.org/b2g?

If the name isn't official, should we be calling it something else here? Or is it just the image that needs to change?

> - let's move Webmaker up to the Products section

I still wonder if Thimble, X-Ray Goggles and Popcorn should be called out separately on this page. I seem to recall that Popcorn was on here before. Did we lose it because it now falls under the broader Webmaker initiative?

I get the thinking behind putting Webmaker in the Products section, but at the same time it feels more analogous to WebFWD, while Thimble, X-Ray Goggles and Popcorn are more Products or, really, Tools. But I'm good either way. Just offering another opinion.

> Also, let's figure out a way to add descriptive text here. One option would
> be that when you roll over an image it flips around to reveal a sentence or
> two about what the product is, but I know that's not very mobile friendly.
> Any other ideas for functionality that achieves the same basic goal? Matej,
> can you be collecting the copy for each section while we figure that out? (I
> say "collecting" b/c hopefully this is more a matter of pulling existing
> lines from the various pages rather than writing a bunch of new stuff from
> scratch.)

On it. I'll try to keep these to a couple of lines each — or less, if I can.
One other thing. Because this is a Mozilla page and these are all Mozilla products, innovations, etc., we don't have Mozilla in front of everything (i.e. Mozilla Firefox, Mozilla Marketplace, Mozilla Webmaker). Can we do the same with Labs and just call it Labs? (We'd still keep the image/wordmark as is; I'm just talking about the name under the image.)
OK, here are the one-liners for this page. I didn't do one for Nightly, but if we want to separate that out, I can whip that up easily.


Firefox
The fast, free browser for desktop and mobile.

Boot to Gecko
An open operating system for mobile devices.

Marketplace
A creation and distribution platform for apps.

Persona
A better way to sign in to websites.

Thunderbird
Safe, fast and easy email.

Webmaker
Make something amazing with the Web.

WebFWD
Our community-driven innovation accelerator.

Labs
New ways to explore, experiment and innovate.

Pancake
An experimental browser for the iPad.

Firefox Developer Tools
A collection of tools built in to Firefox.

Bugzilla
A bug tracking system to help manage software development.

Firebug
Inspect, debug, analyze and more inside your browser.

Gecko
The layout engine that drives Firefox.

XUL Runner
An environment for XUL-based applications.

Comment 23

6 years ago
cc'ing Wilson

Pancake is part of Mozilla Labs so I don't think have it's own product page here
(Reporter)

Comment 24

6 years ago
Matej, thanks for the careful responses. Further comments inline!

(In reply to Matej Novak [:matej] from comment #20)
> > - for the headline, what about just "Built for the Web"? That way we would
> > avoid any confusion/angst around the word "us" and what it implies for
> > employees vs volunteers.
> 
> I'm good with that. I can also come up with some other options, if you like.
> I was working under the impression that was a line we wanted to keep (I'm
> not really sure where it came from).

I'm not sure either, but feel free to revise as much as you think is needed.
 
> > - I showed this to Pete and he made a convincing case that we really only
> > need one Firefox on here...having it show up 4 times (and not even include
> > mobile) feels a bit like gaming the system. So, how about just having a
> > single Firefox tile which can then point to the nifty channels page Ty
> > designed.
> 
> Channels page makes sense, but that doesn't include Nightly. Should we keep
> Nightly as a separate entry and have Firefox link to the Channels page?

Generally speaking we try to downplay Nightly to anything resembling a wide audience...to get it, you have to seek it out. So, it's ok to leave it off here.

> > - love the gecko illustration, but it's not an official logo (nor is it an
> > official name) so I'd really like to not use it here. That makes the
> > question of what to use a little harder, I know. Perhaps something like the
> > main image on http://www.mozilla.org/b2g?
> 
> If the name isn't official, should we be calling it something else here? Or
> is it just the image that needs to change?

Good question...I should know more on this soon.
 
> > - let's move Webmaker up to the Products section
> 
> I still wonder if Thimble, X-Ray Goggles and Popcorn should be called out
> separately on this page. I seem to recall that Popcorn was on here before.
> Did we lose it because it now falls under the broader Webmaker initiative?
> 
> I get the thinking behind putting Webmaker in the Products section, but at
> the same time it feels more analogous to WebFWD, while Thimble, X-Ray
> Goggles and Popcorn are more Products or, really, Tools. But I'm good either
> way. Just offering another opinion.

I think we'll definitely continue to iterate on this page after it goes live, so whatever we decide on here isn't really "final". But, let's leave it as it currently is for now.

> One other thing. Because this is a Mozilla page and these are all Mozilla
> products, innovations, etc., we don't have Mozilla in front of everything
> (i.e. Mozilla Firefox, Mozilla Marketplace, Mozilla Webmaker). Can we do the
> same with Labs and just call it Labs? (We'd still keep the image/wordmark as
> is; I'm just talking about the name under the image.)

Works for me!
(Reporter)

Comment 25

6 years ago
Thanks Matej - the descriptions in comment #22 look good to me. The only thing that stands out is the Firefox one...I like the way you worked in desktop & mobile but otherwise the emphasis on 'fast' feels a lot like what Chrome would say. How can we differentiate ourselves more?

Re: comment #23, given that Pancake is launching soon I'd like to keep it in here for now (plus we don't have anything else for iOS on the page). Wilson, how does that sound?
(In reply to John Slater from comment #25)
> Thanks Matej - the descriptions in comment #22 look good to me. The only
> thing that stands out is the Firefox one...I like the way you worked in
> desktop & mobile but otherwise the emphasis on 'fast' feels a lot like what
> Chrome would say. How can we differentiate ourselves more?

Good point. How about we keep free but also reinforce the non-profit aspect?

Firefox
The free, non-profit browser for desktop and mobile.
(Reporter)

Comment 27

6 years ago
Good change, thanks.

Ty, when can we see the next round?

Comment 28

6 years ago
Hey,
One thing I would change from comment 22 would be the following:


Pancake
An experimental browser for the iPad.

to 

Pancake
An experimental mobile browser. 


Besides that everything looks good!
(Assignee)

Comment 29

6 years ago
Created attachment 637580 [details]
Moz.org Redesign - Projects Page - Revised
(Reporter)

Comment 30

6 years ago
LOVE IT.

The only thing I'd say is that I think we should just show the Firefox logo in that section (like you had in v1) rather than stuffing the channels in there.

After that, please post the PSD. Exciting!
(Assignee)

Comment 31

6 years ago
Created attachment 637582 [details]
Moz.org Redesign - Projects Page - Revised

Added in the descriptive line under the title

I meant to mention this is the previous comment - I introduced an overlay with CTA when the user has their mouse cursor over an image. Its an option versus having the copy below the project title. Helps to conserve scrolling, but makes it challenge for the mobile layouts.
(Reporter)

Comment 32

6 years ago
Thanks Ty. Let's talk through the implementation details with the web team when we get the PSD.
(In reply to Wilson Guaraca from comment #28)
> Hey,
> One thing I would change from comment 22 would be the following:
> 
> 
> Pancake
> An experimental browser for the iPad.
> 
> to 
> 
> Pancake
> An experimental mobile browser. 

Hey Wilson, just curious why we don't want to call out iPad here. I feel like it broadens our offerings and shows people we're also thinking about iOS.

If we definitely can't say iPad or iOS, how about the following (just a small change from what you had):

Pancake
A mobile browsing experiment.
Is this ready for implementation yet?
(Reporter)

Comment 35

6 years ago
(In reply to Steven Garrity from comment #34)
> Is this ready for implementation yet?

Yep, just waiting on the PSD from Ty.
(Reporter)

Comment 37

6 years ago
Thanks Ty!
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.