900506 - Update /products page to reflect current Mozilla products

Status: RESOLVED FIXED

(www.mozilla.org :: Information Architecture & UX, defect, P3)

Description

[Holly Habstritt Gaal [:Habber]]

Attachment: 1AUG13_products_taxonomy.pdf

The current /products page does not correctly reflect our current product offerings, changes and progress Mozilla has made over the last year. Updating this page also supports the updates we are making across mozilla.org with an updated homepage design, addition of FirefoxOS and our FxFamily project (which connects all of our Fx products in one experience and allows us to focus on mobile and desktop products equally on Mozilla.org)



This update will do the following:
- Aligns taxonomy with Firefox Funnel project goals by grouping and promoting the Firefox family of products.

- Solves current parent/child redundancy issue with the label “Products”. 

- Updates product terminology (e.g.: B2G > Firefox OS)

- Dispays labels and links in a way that supports the expectation of the user. See: current Tools and Innovation sections. (ie: Pancake is a Labs product, Bugzilla and Firebug are Developer Tools. For this reason I would not display them here at the same level as their parent links.)

Outstanding:
- Content needs sign-off from Webmaker and Labs teams 
- Visual designer needed to create missing product images and added link style
- Copywriter assistance
- I would prefer to have Firefox products only in the top section. However, Persona would then stand alone. We could keep as-is or discuss another solution for categorizing Persona.

Comment 1

[Jennifer Bertsch [:jbertsch]]

Holly - Thanks for filing this bug.  I'll take the next steps:
1. getting sign off from Labs & Webmaker teams
2.  getting design and copy writing support

-Jen

Comment 2

[Holly Habstritt Gaal [:Habber]]

Thanks, Jen. 

Two questions I have is where Persona belongs and if SocialAPI belongs on this page. 

From what I understand, Persona is a Mozilla product, not Firefox. This is why I've titled the top section Firefox and Mozilla, but I'd rather keep Firefox products among themselves. Any thoughts? Perhaps we can have Mozilla section that has Persona and Social API, but SocialAPI is more of a feature then a product, so I hesitated to add it here. 


Design support should be fairly minimal - preparing new product images and the additional link style.

Comment 3

[Jennifer Bertsch [:jbertsch]]

Hi Holly-

David Ascher recommends the following categories/components:

Mozilla:
-Persona
-Webmaker
-Open Badges

new category with title to come (not innovations, please):
-Labs
-WebFWD

Erica and Brett- Are you OK moving forward with these categories?

Matej - could you please suggest a new category name for the "Labs and WebFWD" category?

Christopher:  could you please suggest someone to make a graphic for Open Badges for https://www.mozilla.org/en-US/products/ (or possibly make one for us? :) )

Thanks for your help, everyone,
Jen

Thanks all for your help with this page.

Comment 4

[Brett Gaylor [:brett]]

Yes, that category grouping seems appropriate!

Comment 5

[Holly Habstritt Gaal [:Habber]]

On this page we have an opportunity to show our products and not just a link to the parent site (like Webmaker). Take a look at the PDF in this bug and see what I have proposed. Here is a screenshot: http://cl.ly/image/0W0M3X1l1N1J

My suggestion is to isolate Firefox and Mozilla products (either together or separately) as well as Webmaker and Labs products and give direct links to these product pages. 

What products/tools would Webmaker want to highlight? (there will also be a link to the Webmaker site)


Matej, I'll put a quick meeting on the calendar for next week so we can look at the categories proposed for this page.

Comment 6

[Matej Novak [:matej]]

Hi all, happy to help here.

Just to give me some context, what's the issue with calling the Labs and WebFWD section "Innovations"? I'd like to get a better sense of that I'm solving for. Thanks.

Comment 7

[Jennifer Bertsch [:jbertsch]]

Here are the outstanding things we need before we can start coding:

1.  images for:
-Open Badges (Christopher)
-Camino
-Sea Monkey
-Lightning/Sunbird

2.  text blurbs for:
-Camino
-Sea Monkey
-Lightning/Sunbird (all from Matej)

I'd love to have this ready to code for Sept 16.

Jennifer B:  Could Lee or another designer please help us with the 3 images?

Comment 8

[Jennifer Bertsch [:jbertsch]]

Taxonomy update:

In the Mozilla category we will list the following all together:

-Persona
-Webmaker
-Open Badges
-Labs
-WebFWD

Note to Matej:  if you want to provide another label other than "Mozilla," just let me know.  Thanks!

Comment 9

[John Slater]

Curious - where is the push to add Lightning/Sunbird, SeaMonkey and Camino coming from? We removed them from http://www.mozilla.org/en-US/products/ with the last iteration.

Personally, I think they would work better as the lead products on a page that is devoted to products built on Mozilla technology (but not directly supported by Mozilla).

I don't really think they belong on the same page as equivalents to Firefox, Webmaker, etc. Camino was even discontinued earlier this year.

Comment 10

[Holly Habstritt Gaal [:Habber]]

There is a page devoted to products built on Mozilla tech, but not directly supported by us. That is the page we are linking to from the Community Supported section: http://www.mozilla.org/en-US/about/mozilla-based/

We needed a section for Thunderbird to belong in since we can't remove it from this page completely. However, we are no longer supporting Thunderbird internally, so it doesn't belong in our Mozilla and Firefox feature product sections. As a result we have added a community supported section that highlights products that are known to our community and supported by Mozilla technology. Then we link to the /mozilla-based page to see more.

Comment 11

[John Slater]

Duly noted. But at the very least we need to find something to replace Camino. Even its own website is telling people to use another browser now:

http://caminobrowser.org/

Is there another one we can put there?

Comment 12

[Kohei Yoshino [:kohei]]

Bug 878570 for http://www.mozilla.org/en-US/about/mozilla-based/

Comment 13

[Holly Habstritt Gaal [:Habber]]

Hi John, 
Very good point. I knew support was withdrawn from Camino, but didn't realize they were actually telling users to use another browser. In the old design, Thunderbird was very prominent and treated equal to our Firefox products. I just spoke with Jen and with the new organization we can just group it amongst Mozilla products. This would be better than creating a category that displays Thunderbird by itself and showing unsupported products. 

- we will remove the community supported section, which will remove Sunbird and Camino from this page

- add Thunderbird to Mozilla grouping of projects

- add link to Mozilla supported page after the Mozilla products section

See wireframe for Mozilla section: http://cl.ly/image/2o2C0k3l0a0G

How does this look?

Comment 14

[John Slater]

Thanks Holly. Do you mind sharing the entire (reworked) wireframe?

Comment 15

[Matej Novak [:matej]]

Given how many products we have in that second category now, I think it will be tricky to come up with a name that properly captures them all, especially since we may add others in the future (like Collusion). Mozilla isn't a perfect name for that section (since it makes it feel like Firefox isn't a Mozilla product), but it's probably the best we have.

Also, it looks like we don't need the new blurbs anymore, so this is ready to move forward. I'll continue to think about another section header, but in the meantime, let's stick with Mozilla.

Comment 16

[Jennifer Balaco]

Jen + Holly, 

Can you confirm which images you still need? Also, can you give more detail on what these images are? Is it just the logo for the products or something else? And what size? 

Thanks!

Comment 17

[Chris Appleton]

Hey all,
Just catching up on this now (my gmail account had been cc'd and I missed it there).
Happy to put together an image for Open Badges.

Will share soon!

Comment 18

[Holly Habstritt Gaal [:Habber]]

Attachment: 06SEPT13_products_taxonomy.pdf

Wireframes are updated to reflect comments. 

Outstanding images:
- Open Badges (Chris is on it)
- Firefox APIs (who is available to create one for this?)
- New link style also needed (See wires for explanation)

In response to Matej - Yes, let's just move forward with the Mozilla category. Once we need to add things like SocialAPI or Collusion we can address if another category is necessary.

Comment 19

[John Slater]

I agree with Matej that "Mozilla" isn't the perfect name for that category, but otherwise it looks good. +1 for moving forward.

Comment 20

[Jennifer Balaco]

It would be nice to have Ty continue to work on this, but he's working on finishing up another big project. Is it possible to push the image due date out a little bit further to say the 25th?

Thanks, 
Jennifer

Comment 21

[Jennifer Bertsch [:jbertsch]]

Hi Jennifer B-

Yes, we can push the due date for images out to Sept 25.  

Thanks for your help!

-Jen B

Comment 22

[Jennifer Balaco]

Since this isn't a design bug, I didn't want to assign it over to Ty. I've added him to the cc list. 

Would it be possible to add a bit more information on what you need from him. I'm not sure what either of these are:
- Firefox APIs (who is available to create one for this?) - Is this just an image representing the APIs? 
- New link style also needed (See wires for explanation) 

I hope I'm not asking an obvious question, but I just want to make sure I understand what is expected. 

Thanks!

Comment 23

[hhabstritt]

Hi Jennifer,

We just need an image to represent Firefox APIs in the same format as the rest of the images on this page. We also need an image for Open Badges.

There is a new link style represented in the wireframes that are attached to this bug. These are basically links that have collections of products or relevant info that we don't necessarily want to feature on /products. You will see what I mean on pages 5 and 6 of the wireframes. (ie: links aligned right, under featured products in this screenshot - http://cl.ly/image/2f2W0B0s3D08)

Please let me know if you have any more questions.

Comment 24

[Jennifer Bertsch [:jbertsch]]

Hi Jennifer B-

Just wanted to check in on the status of this?  Would it help if we reach out directly to Ty about what is needed?

Thx,
Jen

Comment 25

[Jennifer Balaco]

This is on Ty's radar. He just had some Summit work that he's finishing up first.

Comment 26

[Jennifer Bertsch [:jbertsch]]

Hi Jennifer B-

Do you have an update on when these images might be ready?  Could Ty also please make the image for Open Badges since Chris Appleton is gone?

Thx,
Jen B

Comment 27

[Ty Flanagan]

Hi all,

I'll work on this tomorrow and share something as soon as possible. Apologies for the delay :)

Comment 28

[John Slater]

Thanks Ty!

Comment 29

[Jennifer Bertsch [:jbertsch]]

Hi Ty and Jennifer B-

Just wanted to check in on this one and see when you think images will be ready.

Thanks so much,
Jen

Comment 30

[Ty Flanagan]

Attachment: FFxAPI_1.png

I have two options ready with a 3rd that im working on atm

Comment 31

[Ty Flanagan]

Attachment: FFxAPI_2.png

2nd option

Comment 32

[Ty Flanagan]

Attachment: FFxAPI_3.png

Comment 33

[Ty Flanagan]

Attachment: OpenBadge_FirefoxAPI.png

Here are the Open Badge designs for Firefox API

Comment 34

[John Slater]

Thanks Ty. I like the overall direction from option 1, but am not sure we should have the word Firefox in any of these. Adding it in there starts to create a new visual identity, and I don't think that's a road we want to go down at this point. Let's keep it simpler for now and avoid creating new brands.

Comment 35

[Erica Sackin]

Hey Ty and John -- we already have an Open Badge logo & art, that could just be tweaked for this purpose---especially since it's a Foundation product it'd be good to have it matching that branding, not creating a new Firefox brand. 

I've added in Sunny and Meg from the badges team who can also help, but is there a reason why we didn't use existing art, found here: http://openbadges.org/assets/?

Comment 36

[Ty Flanagan]

Maybe I misunderstood what was requested here. I thought an Open Badge for Firefox API was needed? Its not a replacement for Open Badges or a new Firefox brand.

Comment 37

[Erica Sackin]

Ah gotcha Ty -- I have no idea. We definitely need artwork for Open Badges, which is going on the product page. If you're working on something different, then that's my fault for misunderstanding. 

Does that art work for the Open Badges section of /products?

Comment 38

[Erica Sackin]

Hey Ty -- I think you are supposed to be working on art for Open Badges (https://bugzilla.mozilla.org/show_bug.cgi?id=900506#c26), the Foundation product, because our designer Chris Appleton left before he could finish working on it. 

Is that already on your radar/something you're working on, and/or does that help explain the confusion? 

Thanks!

Comment 39

[Ty Flanagan]

Attachment: OpenBadges.png

Ah ok, that makes more sense. Here is an image on the products page which could be used

Comment 40

[Ty Flanagan]

Attachment: FFxAPI_4.png

John, here is an updated FFx API image. I removed the firefox logo as requested

Comment 41

[Erica Sackin]

Looks good to me -- Meg/Sunny?

Comment 42

[John Slater]

(In reply to Ty Flanagan from comment #40)
> Created attachment 825396 [details]
> FFxAPI_4.png
> 
> John, here is an updated FFx API image. I removed the firefox logo as
> requested

Looks good. Thanks!

Comment 43

[Megan]

Open Badges image looks good. Thanks!

Comment 44

[Jennifer Bertsch [:jbertsch]]

Thanks, All!  It looks like we are super close here.

We have the Firefox API and Open Badges image.

Ty - I'm going to set up 15 minutes to talk with you about the recommendation for a link style that we still need.

Also, Ty, could you please make one image for Lightbeam too (w/out any Firefox mention).

Comment 45

[Ty Flanagan]

Attachment: Lightbeam.png

Comment 46

[Jennifer Bertsch [:jbertsch]]

LOVE IT!  Thanks Ty.

Comment 47

[Jonathan Petto [:jpetto]]

Making good progress here, but need a few things to complete:

*Android

- image
- URL confirmation - https://play.google.com/store/apps/details?id=org.mozilla.firefox or http://www.mozilla.org/firefox/mobile/features/
- blurb

*Lightbeam

- blurb

*Open Badges

- blurb

*Firefox APIs

- URL (https://developer.mozilla.org/en-US/Apps/Reference ?)
- blurb

Comment 48

[Matej Novak [:matej]]

Looks like we'll actually need a new desktop blurb as well since it currently mentions Android. The only one I wasn't clear on was Firefox APIs. Please let me know if these look good to everyone:


[DESKTOP]

The free, non-profit browser for your desktop.


[ANDROID]

The fast, smart, safe choice for Android browsing.


[LIGHTBEAM]

See who’s watching your browsing activity.


[OPEN BADGES]

A new standard to recognize and verify learning.


[FIREFOX APIs]

The foundations for building a Firefox OS app.


As for links, I wonder if the Android one should go here: http://www.mozilla.org/en-US/firefox/fx/#mobile

Comment 49

[David Ascher (:davida)]

I'm surprised to see Lightbeam in this list -- who'se decision was it to promote it so heavily?  Context: we're not really sure what the future of Lightbeam is.

Comment 51

[Kohei Yoshino [:kohei]]

Bug 792996 requested to add Jetpack.

Comment 52

[Jonathan Petto [:jpetto]]

Thanks matej!

All we need now are:

[Android]
- image
- URL confirmation

[Firefox APIs]
- URL confirmation

[Jetpack]
- Should we include this? If so, we'll need placement, URL confirmation (probably https://developer.mozilla.org/en-US/docs/Jetpack ?), and an image.

Habber and/or jbertsch: Can you comment on the URLs and on the inclusion of Jetpack?

Ty: Any chance you can put together an image for Android?

Thanks!

Comment 53

[Matej Novak [:matej]]

Flagging Ty to make sure he sees this.

Comment 54

[Ty Flanagan]

Im curious why were reverting back to having separate FFx for Desktop and FFx for Android product links?

The page we link to for Mobile only has a small section dedicated to Android. There's no tour or expanded section on its features as we have for desktop. I know a lot of this will be sorted out once the new family pages are created, but for now im not sure were doing the user much justice by linking to a page which is basically and odd interim page to downloading from the Google Play store. 

There are also several new features within Firefox for Android which are not highlighted on the mobile features page either. There might be a strong disconnect here for a new user too if they dont have the latest information available to them

Comment 55

[Matej Novak [:matej]]

For Android, we could also link to http://www.mozilla.org/en-US/firefox/mobile/features/

That would probably make more sense.

Comment 56

[Jennifer Bertsch [:jbertsch]]

Hi David-

Regarding Lightbeam, we'd like to include it for now while it is being promoted in the press.  We can re-evaluate and remove it in a couple of months as appropriate.  Is that OK?

Thx,
Jen

Comment 57

[Holly Habstritt Gaal [:Habber]]

Definitely agree about /mobile. It doesn't focus on Android, so in the interim until we have a new Android products page as part of the FxFamily experience, we will need to give them a different link. Matej's suggestion is pretty good. Jen, what do you think?

I think that since we are also calling out FirefoxOS specifically, we should give the same attention to Android. This also reflects the same positioning we will give to each product in the Firefox Family experience. 

 
(In reply to Ty Flanagan from comment #54)
> Im curious why were reverting back to having separate FFx for Desktop and
> FFx for Android product links?
> 
> The page we link to for Mobile only has a small section dedicated to
> Android. There's no tour or expanded section on its features as we have for
> desktop. I know a lot of this will be sorted out once the new family pages
> are created, but for now im not sure were doing the user much justice by
> linking to a page which is basically and odd interim page to downloading
> from the Google Play store. 
> 
> There are also several new features within Firefox for Android which are not
> highlighted on the mobile features page either. There might be a strong
> disconnect here for a new user too if they dont have the latest information
> available to them

Comment 58

[David Ascher (:davida)]

Ok re: Lightbeam for a short term thing.

Comment 59

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(In reply to Jon Petto [:jpetto] from comment #52)
...
> [Jetpack]
> - Should we include this? If so, we'll need placement, URL confirmation
> (probably https://developer.mozilla.org/en-US/docs/Jetpack ?), and an image.
> 
> Habber and/or jbertsch: Can you comment on the URLs and on the inclusion of
> Jetpack?

Hi, 

The Add-on SDK ( aka Jetpack ) docs are here:

https://addons.mozilla.org/en-US/developers/docs/sdk/latest/

In the near-ish future ( months, not weeks ) we will move the docs over to MDN.

I'll attach an image we've used for a logo recently.

I'll attach a

Comment 60

[Jeff Griffiths (:canuckistani) (:⚡︎)]

Attachment: jetpack.png

Comment 61

[Jennifer Bertsch [:jbertsch]]

Hi Jeff and David-

We've re-evaluated and I think we'll remove both Jetpack and Lightbeam from the page, as there is a consensus emerging that add-ons don't belong on the Products page.

Thx,
Jen

Comment 62

[Megan]

(In reply to Matej Novak [:matej] from comment #48)
> Looks like we'll actually need a new desktop blurb as well since it
> currently mentions Android. The only one I wasn't clear on was Firefox APIs.
> Please let me know if these look good to everyone:
> 
> 
> [DESKTOP]
> 
> The free, non-profit browser for your desktop.
> 
> 
> [ANDROID]
> 
> The fast, smart, safe choice for Android browsing.
> 
> 
> [LIGHTBEAM]
> 
> See who’s watching your browsing activity.
> 
> 
> [OPEN BADGES]
> 
> A new standard to recognize and verify learning.
> 
> 
> [FIREFOX APIs]
> 
> The foundations for building a Firefox OS app.
> 
> 
> As for links, I wonder if the Android one should go here:
> http://www.mozilla.org/en-US/firefox/fx/#mobile

I'm good with Open Badges copy to accompany the main image. Many thanks!

Comment 63

[Ty Flanagan]

Attachment: FFxAndroid_1.png

Comment 64

[Ty Flanagan]

Attachment: FFxAndroid_2.png

Comment 65

[Jennifer Bertsch [:jbertsch]]

(In reply to Ty Flanagan from comment #63)
> Created attachment 831610 [details]
> FFxAndroid_1.png

I like this one because the robot really says "Android" - let's use it.

Thanks Ty!

Comment 66

[Jonathan Petto [:jpetto]]

Okay, I think we've got all decisions made, save for the new link style. Attaching a couple options - let me know what you think.

Comment 67

[Jonathan Petto [:jpetto]]

Attachment: new-link-style-A.png

Comment 68

[Jonathan Petto [:jpetto]]

Attachment: new-link-style-B.png

Comment 69

[Jennifer Bertsch [:jbertsch]]

Hi Ty and John S-

Could you please take a look at the two suggested link styles in Comments 67 and 68 and share any feedback?

Thx,
Jen

Comment 70

[John Slater]

I prefer the lighter colored buttons, as they leave more focus on the products themselves. The blue ones pop too much for this particular usage.

Comment 71

[Jennifer Bertsch [:jbertsch]]

Thanks, John Slater.

Jon Petto - let's move forward with the lighter color button link style per comment 70.

Comment 72

[Jonathan Petto [:jpetto]]

The lighter style it is.

Should we try to get this on a demo server for one final look, or go straight to a PR? I think the only thing left unseen is the sticky navigation, but that's probably pretty easy to envision. I'll attach a screenshot.

Comment 73

[Jonathan Petto [:jpetto]]

Attachment: sticky-nav.png

Comment 74

[Jonathan Petto [:jpetto]]

Okay, final decision point time. sgarrity made the suggestion to reduce the size of the product images to keep all Firefox products on one line.

Ty & Holly - what do you think?

Comment 75

[Jonathan Petto [:jpetto]]

Attachment: 3-per-row.png

Comment 76

[Jonathan Petto [:jpetto]]

Attachment: 4-per-row.png

Comment 77

[Jonathan Petto [:jpetto]]

Attachment: 4-per-row-developers.png

Comment 78

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/938f465b26e46c9e60604db472ef6c1877892642
Update content/products on /products page. Bug 900506.

https://github.com/mozilla/bedrock/commit/b5ca429176310a6b32408ea05e75555eb764a0e6
Merge pull request #1418 from jpetto/bug-900506-update-products-page

Update content/products on /products page. Bug 900506.

Comment 79

[Pascal Chevrel:pascalc (PTO until April 26)]

Hi,

Note that this page is largely localized (49 translations on production). When you have updates to localized pages, it's good to CC Francesco and me to the bugs and to leave at least a week to localizers to update their copy so as to avoid having a mixed copy on production for a while. Also, if you could move these bugs to the "Pages & content" component when you get to the implementation, that would help as we follow the Pages&Content and L10n components for mozilla.org, Thanks!

Comment 80

[Pascal Chevrel:pascalc (PTO until April 26)]

Attachment: Pointer to Github pull request: https://github.com/mozilla/bedrock/pull/1440

Pointer to Github pull-request

Comment 81

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/2131c60f4d4828e24038eba12a6b6607f8daa697
Bug 900506: fix a few strings in products page for l10n

https://github.com/mozilla/bedrock/commit/491e3f51943c35d2c3708e45a69eff05c6e595f1
Merge pull request #1440 from pascalchevrel/Bug-900506-l10n-fixes-product-page

Bug 900506: fix a few strings in products page for l10n