Closed Bug 659796 Opened 13 years ago Closed 13 years ago

Create Promo box for WN page (fx 5 launch)

Categories

(Marketing :: Design, task)

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

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: lmesa, Assigned: ltom)

References

(
URL
)

Details

Attachments

(2 files)

WN MockUp Desktop fx 5
71.39 KB, image/png
Details
Switch to Tab
96.05 KB, image/png
Details
Attached image WN MockUp Desktop fx 5 — 
I'd like to create a promo box for the WN page.

The promo for fx5 centers around tabs and how awesome they are. 
I'd like to do the big box in a way that there are smaller boxes inside, with each box showing one of the tab features we have. 

Tab features are App Tabs, Switch to Tab and Panorama (see attachment--copy on the mockup is not finished--we need help with that too!).
Each box just has a super cool screenshot of the feature, with the name. 

There will also be a learn more button that then leads to the feature page section on Tabs(http://www.mozilla.com/en-US/firefox/features/#madeeasy).  (I know there isn't an Anchor Tab for that section, but can we build one for this promo?).  If not, we can also send people to the "meet your browser" page on http://www.mozilla.com/en-US/firefox/central/.
Thanks Laura. Can you also file a website bug to get this built? That way we can make sure it's tagged in the appropriate site release (which I think is 2.9, but LoFo will know for sure).

Also, just to call it out since it's a little buried in comment #0, Matej, we'll need copy for this too (but we can keep everything in this bug).
Blocks: 659847
Few quick questions / comments:

* Did you want a visual for each of the tab-features? I feel like that will look somewhat cluttered, unless we do a 3-column layout or something to fit it all in.  I think it might be better to have one general graphic referencing "tabs", and then design the text in a way that's easy to read for each feature. 

* I don't think having boxes within the large box is a good design solution.

* Just a thought, "Tabulous" reminds me of existing services, mainly "Tapulous" which is a company that makes iphone applications.  

Assigning to Lee.  Since he did a previous promo banner for tabs, he should be able to help create something compelling for this.
Assignee: tshahian → ltom
LoMo,  what is our design deadline for this?
(In reply to comment #2)
> Few quick questions / comments:
> 
> * Did you want a visual for each of the tab-features? I feel like that will
> look somewhat cluttered, unless we do a 3-column layout or something to fit
> it all in.  I think it might be better to have one general graphic
> referencing "tabs", and then design the text in a way that's easy to read
> for each feature. 

I'm willing to try that, but the point I'm trying to make it that there a bunch of tab solutions available in Fx, and to me, seeing all of those options is what makes it compelling. If can text can do that, then great, but I don't want the box to be text heavy either.
> 
> * I don't think having boxes within the large box is a good design solution.
I defer to you and lee on that. I was just trying to show the kind of thing I was thinking about/imagining. 
> 
> * Just a thought, "Tabulous" reminds me of existing services, mainly
> "Tapulous" which is a company that makes iphone applications.  

That's true.  I'm willing to find another word Tabtastic? FanTabulous?. mattej--any ideas?
> 
> Assigning to Lee.  Since he did a previous promo banner for tabs, he should
> be able to help create something compelling for this.

Because this is for Fx 5, scheduled for June 21st, and we'd like to try and get this localized if we can, it would be great to have something no later than the 7th? Then we can iterate and hopefully get it implemented by beginning of the follwoing week so l10n has some time?
(In reply to comment #4)
> 
> I'm willing to try that, but the point I'm trying to make it that there a
> bunch of tab solutions available in Fx, and to me, seeing all of those
> options is what makes it compelling. If can text can do that, then great,
> but I don't want the box to be text heavy either.

Sounds good.  Will defer to Lee to play with it and see what works best.



We'll shoot for the 7th.  I think that's doable.
OS: Mac OS X → All
Hardware: x86 → All
Looking at this mockup of a page where we only talk about one of the tab features (http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_06.jpg) I think it's going to be hard to get into a lot of detail about these features without the page getting seriously copy heavy. 

I think we can give a quick line about each that either says what it does or teaches people how to use it (I've provided an option for each), but probably not both.

Apart from that here are also some headline and blurb options:


HEADLINES:

Smarter Tabs, Better Browsing

Know Your Browser: Tabs

Keep Tabs on Productivity

Fabulous Tabs!

Fantastic Tabs!

Use the Tabs Fantastic

Spectacular Tabs

Tabs Evolved

Put Tabs to Work

In the Spotlight: Tabs

Spotlight on Tabs

Tabbed Potential

Do More With Tabs

The Best of Tabs


BLURBS:

Firefox features awesome tab solutions to make browsing easier and more efficient.

Firefox is filled with awesome ways to make browsing easier and more efficient using tabs.

Browse quicker, easier and more efficiently with the awesome tab features in Firefox.


DESCRIPTIONS: 

App Tabs
Make a permanent home for the sites you visit most.

Panorama
Organize your open tabs into groups.

Switch to Tab
Find already open tabs using the Awesome Bar.


App Tabs
Right-click on any open tab and select Pin as App Tab.

Panorama
Click on the Group Your Tabs icon to the right of your tabs.

Switch to Tab
Start typing in the Awesome Bar and select Switch to Tab.
OS: All → Mac OS X
Hardware: All → x86
(In reply to comment #6)

> HEADLINES:
> Know Your Browser: Tabs
> Fabulous Tabs!
> Do More With Tabs

The above 3 get my vote. Having said that, I do need to acknowledge that this one made me LOL a bit:

> Use the Tabs Fantastic

Well done sir.

> BLURBS:
> Browse quicker, easier and more efficiently with the awesome tab features in
> Firefox.

+1 
Thought: what about saying "Browse quickly, easily and more efficiently..."?

> DESCRIPTIONS: 
> 
> App Tabs
> Make a permanent home for the sites you visit most.
> 
> Panorama
> Organize your open tabs into groups.
> 
> Switch to Tab
> Find already open tabs using the Awesome Bar.

I think I like this promotional approach vs the more informative option. Laura, what do you think? Is there a way we can do this and link to SUMO features for each that would have the info on how to use them? That'd be the best of both worlds if so.
(In reply to comment #7)
> The above 3 get my vote. Having said that, I do need to acknowledge that
> this one made me LOL a bit:
> 
> > Use the Tabs Fantastic
> 
> Well done sir.

I live to give.

> > BLURBS:
> > Browse quicker, easier and more efficiently with the awesome tab features in
> > Firefox.
> 
> +1 
> Thought: what about saying "Browse quickly, easily and more efficiently..."?

I'm fine with that, but does it make it sound like it wasn't quick and easy before? (Maybe I'm just over thinking it, though.) The only change I'd make is to take the "more" off the line. I think it reads cleaner as "Browse quickly, easily and efficiently..."
Good call on removing the 'more'.
(In reply to comment #7)
> (In reply to comment #6)
> 
> > HEADLINES:
> > Know Your Browser: Tabs
> > Fabulous Tabs!
> > Do More With Tabs
> 
> The above 3 get my vote. Having said that, I do need to acknowledge that
> this one made me LOL a bit:
> 
> > Use the Tabs Fantastic


Fabulous Tabs! is my favorite.

> 
> Well done sir.
> 
> > BLURBS:
> > Browse quicker, easier and more efficiently with the awesome tab features in
> > Firefox.
> 
> +1 
> Thought: what about saying "Browse quickly, easily and more efficiently..."?
+ 1, and I also like removing the "more".
> 
> > DESCRIPTIONS: 
> > 
> > App Tabs
> > Make a permanent home for the sites you visit most.
> > 
> > Panorama
> > Organize your open tabs into groups.
> > 
> > Switch to Tab
> > Find already open tabs using the Awesome Bar.
> 
> I think I like this promotional approach vs the more informative option.
> Laura, what do you think? 


Agreed.

Is there a way we can do this and link to SUMO
> features for each that would have the info on how to use them? That'd be the
> best of both worlds if so.

I also like that idea--let me find the links. 

In the meantime, there is a new tab feature in Fx 5 that I forgot to mention--its hard to illustrate, but if we can find a way to do so, we should. 

It also doesn't have an official name, but basically what we've done is that the automatic tab resize feature when you're closing tabs no longer happens automatically. The automatic resizing makes you have to move your mouse to close tabs. Because they don't resize, you can keep your mouse in one place, making it easier to close a bunch of tabs without having to move your mouse. 

We could call it something like "easier tab close" but again, this is a feature that is very hard to illustrate, much less describe in one sentence.  Do you think its worth adding to the promo box?
App tabs: http://support.mozilla.com/en-US/kb/what-are-app-tabs
Panorama: http://support.mozilla.com/en-US/kb/what-are-tab-groups?s=panorama&as=s

Cheng, can we rename the "tab groups" article?
Also, there isn't a SUMO article for switch to tabs. Is there one and I just can't find it?
Copying Stas & Pascal so they can weigh in on l10n issues...ideally we'd bring the localized WN page into parity with en-US for this release, but this particular promo concept has some l10n challenges (lots of content packed in + a  screenshot).
Hi all,
Here's a first pass at the promo for WN:
http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_tabs_01.jpg

I wanted to get all the copy onto the page, and see what your thoughts are regarding the screenshots and call-outs. I included "Learn more >>" links for the blurbs, and also wanted to see how much room we would have for l10n, once we did the graphic call-outs next to them. The images are FPO now, but if there are recommendations for better images we should be using, please let me know.
(In reply to comment #10)
> 
> We could call it something like "easier tab close" but again, this is a
> feature that is very hard to illustrate, much less describe in one sentence.
> Do you think its worth adding to the promo box?

I agree that it's hard to illustrate and I think it's already getting pretty crowed, but if we wanted to add it, maybe something like:

Easy Close
Close several tabs in a row without having to move your mouse.
Looks good to me. I'd be hesitant to add more here, though - I think this is already getting really crowded for l10n.
(In reply to comment #13)
> Hi all,
> Here's a first pass at the promo for WN:
> http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_tabs_01.jpg

Lee, this is looking great. I really like the visual solution of one image with different callouts. The only thing I'd suggest is reversing the order of Panorama and Switch to Tab. Seems more logical to me. Anyone else feel that?

Also, in the subhead, please change "quicker, easier" to "quickly, easily." Thanks!
Good points Matej - thanks!
Updating the mockup now to stay curren:
http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_tabs_01.jpg
Looks good--some thoughts:

1) The headline is missing "using" in You are now using..."
2) Love the dotted line call out of App Tabs
3) Agree with Mattej that we should switch the order of Switch to Tab and Panorama.
4) Switch to Tab call out doesn't really show what's happening--just a close up of switch to tab copy in the URL bar. Can we do something to show the "switch to tab" in the URL bar? See attachment. 
5) + 1 to mattej's copy update

6) I don't think we need to add a special illustration for Easy close, but would be cool if we could add the blurb (maybe below app tabs?)  If its too difficult, then we'll skip it, but its one new feature in this release we can actually talk about ;)
Attached image Switch to Tab — 

    
    

    
  
My 2 cents:

* Copy sounds/looks great.

* +1 on not adding an image for "easy close".  I'm not even sure if it's entirely necessary to include that here, I think we're highlighting the more important 3 of the 4.  If we had a landing page that covered all these, we could just point there for the whole package.

* I like the mockup overall and how everything is presented, but I'm not a fan of the call-out zoom-in bubbles.  Partly because they seem out of context... the "switch to tab" isn't placed in the right spot, it looks like we're magnifying a different part of the browser... and for Panorama, we're magnifying a part of the browser chrome, whereas Panorama is visually displayed inside the browser window.  So, I'm not a fan of those two visuals, personally.  Is there something else we can do so it's more clear?

    
    

    
  
(In reply to comment #20)
> 
> * I like the mockup overall and how everything is presented, but I'm not a
> fan of the call-out zoom-in bubbles.  Partly because they seem out of
> context... the "switch to tab" isn't placed in the right spot, it looks like
> we're magnifying a different part of the browser... and for Panorama, we're
> magnifying a part of the browser chrome, whereas Panorama is visually
> displayed inside the browser window.  So, I'm not a fan of those two
> visuals, personally.  Is there something else we can do so it's more clear?

Not sure what to do for Switch to Tab, but for Panorama could we show the Group Your Tabs button in the toolbar, maybe with a mouse hovering over it?

    
    

    
  
I think that would be better.  I know we want to "show" as much as we can, but the reality is that we've got limited space to cram it all in.  So, why not focus the graphic on highlighting where these features are located, and point folks in the right direction to get them started...   that's my personal preference.   I like the concept behind the magnifying bubbles, but am not a fan of how they are used here. Too many circles, boxes, etc :)

    
    

    
  
Thanks for the feedback and the suggestions, guys. Take a look at this mockup:
http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_tabs_02.jpg

I think the features we're highlighting are starting to fall into place better, although we're definitely running out of available space. In this mockup, I extended the hero box's heigh by 40px to accommodate everything. I took the examples out of the magnified bubbles, and tried to make the Panorama example a bit more obvious. Let me know your thoughts.

    
    

    
  
Looking really good, Lee. The only nitpick I have is that if we're showing Switch to Tab right in the browser image, should we make it look like there are more tabs open that we can't see? Or maybe put the Facebook icon on the App Tab where Twitter is?

    
    

    
  
Whoops, one more thing: Your App Tab dotted line isn't pointing to an App Tab right now. Sorry.

    
    

    
  
Oh, for sure - to all of those points!  I'm just trying to get graphics and messaging in the right place, then we can tighten up the details when that's all settled. It's great to talk thru these scenarios though, so in the end it'll all make sense.

    
    

    
  
Looks great Lee.  Agree with matej on making sure that we see an open facebook tab that we're "switching" to :)

    
    

    
  
I hate to be a naysayer here, but this version seems pretty busy to me...the Panorama box feels more prominent than I would expect, and for some reason it seems more text heavy here.

I'd be interested to hear what Laura M and/or Mayumi think.

    
    

    
  
I also think we should nix "easy close".  There's too much we're communicating already.

    
    

    
  
(In reply to comment #28)
> I hate to be a naysayer here, but this version seems pretty busy to me...the
> Panorama box feels more prominent than I would expect, and for some reason
> it seems more text heavy here.

Agreed. Showed to mayumi and she says its overwhelming. We can get rid of the easy close feature for this page, because its definitely really hard to illustrate and super squished as it is. 


> 
> I'd be interested to hear what Laura M and/or Mayumi think.

    
    

    
  
I think this looks great--any other changes?

    
    

    
  
works for me, looks good.  Not thrilled with the magnifying bubble still, since it's not really magnifying that part of the browser... but am happy to let it go.

    
    

    
  
OK, final nitpick from me. Is it weird to show the Firebug icon in the magnified part? Will the average user know what that is and wonder why it isn't in their toolbar?

Otherwise I think it looks amazing.

    
    

    
  
Yah, the magnified part is what I had the problem with.  It's just not clear what we're looking at, or where in the browser that is.

    
    

    
  
Can we remove the Firebug icon?

Also, maybe if we made the browser less wide, it would make more sense when you see the magnifying glass as to where tab groups are?

    
    

    
  
That should work.  Lee is sick today, but he can make the update tomorrow and post.

    
    

    
  
Looking great! 

I'd like to add that I actually quite like the zoom bubble and have used it before. It seems to be used regularly lately when doing callouts on screenshots, so I think its great to use it here.

    
    

    
  
I thought the use of the zoom bubble worked here as well. It's a way of focusing on the Group Tab button without making the browser window very narrow (to show the top right corner) which I think would look awkward. 

I don't have a problem removing the Firebug icon.

    
    

    
  
Awesome--you're going to kill me, but we shouldn't have the feedback button in there either ;)

    
    

    
  
Ha! No worries - those scrnshots are taken quickly to use FPO and talking through.

If there are no other changes, I'll take out the Feedback button and post the final PSD for webdev

    
    

    
  
Looks great to me.

    
    

    
  
Hehe--ok. +1 from me too.

    
    

    
  
Looks good.. my only nit would be to also remove the "M" that seems to be on the far right side of the browser screenshot/cut off.  Otherwise it's great.

    
    

    
  
Removed "M." PSD is revised

    
    

    
  
THANKS !   closed :)
Status: NEW → 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: