[NativeUI launch] Design: FF14 Whats New Page

RESOLVED FIXED

Status

RESOLVED FIXED
7 years ago
6 years ago

People

(Reporter: jfu, Assigned: matej)

Tracking

Details

(Whiteboard: Due: 6/22)

Attachments

(3 attachments)

(Reporter)

Description

7 years ago
Placeholder to design What's New Page for Firefox 13. Copy is coming in Bug 738363, with a April 3 copy hand off date. 

More direction coming soon!

Thanks

Comment 1

7 years ago
thanks Jaclyn, please update the whiteboard when you have more info.  Meanwhile, marking this as "pending content/direction"
Whiteboard: pending PMM content/direction

Comment 2

7 years ago
Jaclyn, please update the bug when you are ready.  Just a friendly reminder.
I understand that this has been pushed to Fx 14, not 13.
(Reporter)

Comment 4

7 years ago
Correct, this will be for Firefox 14 now. 

Copy from Bug 738363:

[Top]
Hooray! Your Firefox is up to date. 

[Headline]
Get the best of desktop browsing on your Android device 

[Copy]
It's easy! First <a>download</a> the new Firefox for Android, complete with upgraded performance, a redesigned look and lots more features. Then <a>Sync</a> your desktop data for a powerful, hassle-free browsing experience. <a>Get more info</a> or watch the video below.


Design based off of this: http://cl.ly/090i0Y3y3x260Q1F3M0T
Summary: [NativeUI launch] Design: FF13 Whats New Page → [NativeUI launch] Design: FF14 Whats New Page

Comment 5

7 years ago
Thanks Jaclyn.  Assigning to Lee. 
If you have an actual hand-off date/deadline (so it's ready for FF14) that would be helpful.
Assignee: tshahian → ltom
Status: NEW → ASSIGNED
(Reporter)

Comment 6

7 years ago
Let's do June 4 as design hand-off date. Thanks!

Comment 7

7 years ago
Okay thanks.  And are you looking to plug in a video here? Is this going to be the video we produce with EC1 or something else?  Seems like it should be that video, right?  Which means the design updates are relatively simple (or may need to carve out some FPO until the video concept is more baked)
(Reporter)

Comment 8

7 years ago
Sorry what's an FPO?

And yes, would like the EC1 video in here with a big download button that points to the Google Play Store

Comment 9

7 years ago
"for placement only".  So lets wait on this then if it's just a matter plugging in the video.  We'll figure out if it's a video screenshot or embedding the linear version of the video (and how else we can enhance/juice this page based on the selected concept).

Updated

7 years ago
Whiteboard: pending PMM content/direction → Due: 6/4

Comment 10

7 years ago
Hey Jaclyn, we may need a bit more time... can we push this back a week?  Shouldn't take long for Lee, but he could use a few more days time to clear his plate.
(Reporter)

Comment 11

7 years ago
Hi Tara,

Let's move the creative hand off date to June 22 (lmesa is this enough time for Web dev to implement by July 17?) 

Laura and I were wondering if there was something more magical we can do with this page instead of just plugging in the video. We're betting on getting a lot of users and clicks from this promotion.

Thanks
My ideal timeline is:

June 22nd hand off from Creative
Web Dev Implemented by July 6th
Localization starts after July 6th, gives them 3 weekends to localize the page (and video if needed). 

We then push this out on July 17th.
Also, by magical I think Jaclyn means more interactive or engaging. 

I would argue that we need to decide what the ultimate CTA is before we can ask for that. Jaclyn, lets regroup here.

Comment 14

7 years ago
Hi there.

Yes, there are more things we can do here.  Though I'll need to get back to you with specifics.  Basically what we can do is what has been proposed on a number of other related pages:  adding some html5/css "magic" though subtle animation to showcase this release.  The general idea would be for Lee to do the foundation artwork, we'll script out some animation, and have an agency (Particle) code the animation - we'll hand that to webdev and plug it into this page.  I'll add this page to a few others that we're working on and get back to you with some thoughts soon.

Comment 15

7 years ago
> I would argue that we need to decide what the ultimate CTA is before we can
> ask for that. Jaclyn, lets regroup here.

Makes sense. Lets talk more soon
Let me regroup with jaclyn and set something up to discuss. Luckily the earliest this page will go live is July 17th, so we have some time, but I'll make this happen at the latest next week.

Comment 17

7 years ago
friendly ping.  any update on this?  We need to get the design started asap as our deadlines are fast approaching. On that note, an update on the hand-off date for this would be appreciated.
Whiteboard: Due: 6/4 → Due: ?

Updated

7 years ago
Whiteboard: Due: ? → Due: 6/26
Here is the Creative Brief: 

https://docs.google.com/document/d/1c7BaLdzXJnaRCclcEGk9pYgIoh69o1Y4V0p7ZoDKErk/edit?pli=1

Due date for the PSD is June 22nd so that we can hit our implementation and localization deadlines (per the brief).
Whiteboard: Due: 6/26 → Due: 6/22

Comment 19

7 years ago
That's an intense brief!  thanks Laura for putting it together.  here are some thoughts in response: 

- We've already crafted copy for this release on other pages, so that should help Matej deliver copy for this with a bit of a head-start. actually, we had already closed out the copy bug for this page in particular... does that not apply anymore?

- The video is due to be delivered on 6/26 on a rush. so we will need to coordinate with webdev to drop this in a video container that we design after the proposed psd delivery date

- Since the video is already cutting it late... 'm not sure if we can plan on plucking anything significant from the video to juice the page.  but we were definitely planning on juicing the page with some light animations... more on this below

- Im working with webdev and an agency called Particle to juice a few other pages promoting Android with light animations.  i had added this page to their plate as well... 

- With that in mind, the animations we've got planned there involve things like the android character peeking out from behind the phone device, waving, blinking, etc.  it would be nice to have a similar treatment here to keep the creative 'juices' consistent across the channels.  it also helps with respect to coding since we can repurpose the animation code from other pages.

One thought is to have the android character peek out from behind the video box, or land on the video box somehow.  the intro to the video includes the android character on a mobile device... so if done right it could almost suggest that he has entered the video box and is now part of the video...   

Another thought is to have a bigger android character present within the video frame and animate him to catch the user's attention, and then have that fade out into the video box.  etc.

we can discuss this more, but id personally suggest against things like: changing the curser image, or having a very flashy video frame, etc.  i'd also suggest keeping the animation simple.  

- social media: i've mentioned this on another bug but the social media piece of this page is rather confusing in my opinion. it's not clear what you are sharing.  is it the whole page? or is it the video?  is it worth adding that share capability on the page and near the video when the key desired action is click thru to google play?  also... the social media block at the bottom 'keep it going' doesn't quite make sense to me either...  so, i suggest we re=think this a bit.

- last but not least... i agree that the background photo elements are not the best.  in fact, you can barely even see the photos... and the main one i can see is of a well known mozillian who no longer works here. so, would be nice to change those photos to more evergreen content, or simply play with other possibilities there.  `i'd avoid a tiled approach since it might start to feel too Busy. balance is key!
(In reply to Tara (musingt) from comment #19)
> That's an intense brief!  thanks Laura for putting it together.  here are
> some thoughts in response: 
> 
> - We've already crafted copy for this release on other pages, so that should
> help Matej deliver copy for this with a bit of a head-start. actually, we
> had already closed out the copy bug for this page in particular... does that
> not apply anymore?

Thanks for pointing that out--in my haste to write this, I missed that!  I think it may be a bit long, but the basic ideas look spot on.  Let's move ahead with this. 
> 
> - The video is due to be delivered on 6/26 on a rush. so we will need to
> coordinate with webdev to drop this in a video container that we design
> after the proposed psd delivery date

Right, makes sense.  I'm not too worried about that. 

> 
> - Since the video is already cutting it late... 'm not sure if we can plan
> on plucking anything significant from the video to juice the page.  but we
> were definitely planning on juicing the page with some light animations...
> more on this below

> 
> - Im working with webdev and an agency called Particle to juice a few other
> pages promoting Android with light animations.  i had added this page to
> their plate as well... 
> 
> - With that in mind, the animations we've got planned there involve things
> like the android character peeking out from behind the phone device, waving,
> blinking, etc.  it would be nice to have a similar treatment here to keep
> the creative 'juices' consistent across the channels.  it also helps with
> respect to coding since we can repurpose the animation code from other pages.

Love that!  Yes, lets definitely be consistent across pages. 
> 
> One thought is to have the android character peek out from behind the video
> box, or land on the video box somehow.  the intro to the video includes the
> android character on a mobile device... so if done right it could almost
> suggest that he has entered the video box and is now part of the video...   
> 
> Another thought is to have a bigger android character present within the
> video frame and animate him to catch the user's attention, and then have
> that fade out into the video box.  etc.

Cool!

> 
> we can discuss this more, but id personally suggest against things like:
> changing the curser image, or having a very flashy video frame, etc.  i'd
> also suggest keeping the animation simple.  
> 

Ok, thats fine with me.  Just some ideas.  I also agree that simple is the best way to go. 

> - social media: i've mentioned this on another bug but the social media
> piece of this page is rather confusing in my opinion. it's not clear what
> you are sharing.  is it the whole page? or is it the video?  is it worth
> adding that share capability on the page and near the video when the key
> desired action is click thru to google play?

True.  

  also... the social media block
> at the bottom 'keep it going' doesn't quite make sense to me either...  so,
> i suggest we re=think this a bit.

Right, we'd have to change that. Let's rethink, and I'm open to not including the social media widgets for the video. 

> 
> - last but not least... i agree that the background photo elements are not
> the best.  in fact, you can barely even see the photos... and the main one i
> can see is of a well known mozillian who no longer works here. so, would be
> nice to change those photos to more evergreen content, or simply play with
> other possibilities there.  `i'd avoid a tiled approach since it might start
> to feel too Busy. balance is key!

Cool--I think we could do something interesting that's not too distracting.

Thanks for reading through all of that Tara. Now that I think we're very much on the same page, what do you suggest the next steps should be?

Comment 21

7 years ago
> Thanks for reading through all of that Tara. Now that I think we're very
> much on the same page, what do you suggest the next steps should be?

unfortunately I'm on PTO with spotty availability, but there's a meeting tomorrow to review all the android pages and this is one of them.  pending the outcome of that - which shouldn't drastically change anything - next step would be for Lee to play around with the ideas proposed and provide a mockup. 

glad you like the suggestions and happy to hear we're on the same page.  thanks for reading my lengthy post as well :)
(Assignee)

Comment 22

7 years ago
(In reply to Laura Mesa [:lmesa] [:lvmesa] from comment #20)
> (In reply to Tara (musingt) from comment #19)
> > That's an intense brief!  thanks Laura for putting it together.  here are
> > some thoughts in response: 
> > 
> > - We've already crafted copy for this release on other pages, so that should
> > help Matej deliver copy for this with a bit of a head-start. actually, we
> > had already closed out the copy bug for this page in particular... does that
> > not apply anymore?
> 
> Thanks for pointing that out--in my haste to write this, I missed that!  I
> think it may be a bit long, but the basic ideas look spot on.  Let's move
> ahead with this. 

Let me know if this needs further crafting or editing. Maybe we can get it in layout, see how it's looking and go from there.
(In reply to Matej Novak [:matej] from comment #22)
> 
> Let me know if this needs further crafting or editing. Maybe we can get it
> in layout, see how it's looking and go from there.

Yeah, lets definitely try in layout and see what happens.

Comment 24

7 years ago
All the above comments sound good to me. Lee, please keep this high on your radar.

Comment 25

7 years ago
Created attachment 631232 [details]
Firefox 14 What's New Page -01

Attaching mockup here to keep this moving. With regard to the background tile, this seems like a bigger conversation since this was a part of the Different By Design campaign. If the idea is to simply change the photo collage, I think that's doable, but I feel like starting from scratch here would warrant more brainstorming.

Comment 26

7 years ago
Thanks Lee. I like the idea, but think we'd need to redo the copy for something like this...as it is, the video is pushed pretty far down the screen.
(Assignee)

Comment 27

7 years ago
(In reply to John Slater from comment #26)
> Thanks Lee. I like the idea, but think we'd need to redo the copy for
> something like this...as it is, the video is pushed pretty far down the
> screen.

Just so I'm clear, should I take a stab at reworking the copy or is Lee going to try another layout first?

Comment 28

7 years ago
I'd actually hold off on any further changes (design or copy) on this page until later today...we have a meeting to figure out the remaining things that need to happen with the mobile pages, and I think this will get sorted out then.

Thanks guys.

Comment 29

6 years ago
Matej, this is ready for you. The basic layout of this page will be like the current one (copy + video), so the main thing to do next is trim down the copy from Lee's mockup quite a bit so everything is scooted up and above the fold.

When that's ready we'll reassign this to Lee as a design bug. After that we can work with Barry and Particle on adding bits of extra awesomeness in the form of animations or whatever.

Thanks!
Assignee: ltom → Mnovak
Component: Design → Copy
QA Contact: design → copy

Updated

6 years ago
Blocks: 763659
(Assignee)

Comment 30

6 years ago
OK, this cuts this down quite a bit and changes the content as well, but I think it's more in line with other messaging that we'll have out there:


[Top]
Hooray! Your Firefox is up to date. 

[Headline]
Big ideals, small screen.

[Copy]
<a>Get Firefox for Android</a> and get the mobile browser that's got your back. It's fast, smart and safe! <a>Learn more</a> or watch the video below.

Comment 31

6 years ago
Overall I like the direction here, but would be nice to address people given the particular context...i.e., they just upgraded to Firefox 14.

Might be a matter of using the "now do this" strategy from the TY page, or something acknowledging the fact that they're already using Fx and now there's an awesome new mobile version they can try. That sort of thing.

The length of the text in comment #30 looks about right, though. Thanks!
(Assignee)

Comment 32

6 years ago
That makes sense. How about one of the options below?


[VERSION 1]

[Top]
Hooray! Your Firefox is up to date. 

[Headline]
Now get the mobile browser that's got your back

[Copy]
<a>Download Firefox for Android</a> and put the power of the Web in your hands. It's fast, smart and safe! <a>Learn more</a> or watch the video below.


[VERSION 1]

[Top]
Hooray! Your Firefox is up to date. 

[Headline]
Now get the same big ideals on your small screen

[Copy]
<a>Get Firefox for Android</a> and get the mobile browser that's got your back. It's fast, smart and safe! <a>Learn more</a> or watch the video below.
These are looking good! What about:

[VERSION 3]

[Top]
Hooray! Your Firefox is up to date. 

[Headline]
Now get the same big ideals on your small screen

[Copy]
<a>Get Firefox for Android</a> and put the power of the Web in your hands.  It's fast, smart and safe! <a>Learn more</a> or watch the video below.

I like the idea of "got your back" but I think "power of the Web" message is stronger for cross-product download CTA.
(Assignee)

Comment 34

6 years ago
Yup, that pairing works nicely. John, what do you think?

Comment 35

6 years ago
I actually like calling out "mobile browser" in the headline. I don't think "same big ideals" will immediately connect the desktop product with mobile in people's minds (in the sense that they probably think of Firefox as a browser before they think of big ideals).

The body copy looks good.

Thanks!
(Assignee)

Comment 36

6 years ago
(In reply to John Slater from comment #35)
> I actually like calling out "mobile browser" in the headline. I don't think
> "same big ideals" will immediately connect the desktop product with mobile
> in people's minds (in the sense that they probably think of Firefox as a
> browser before they think of big ideals).
> 
> The body copy looks good.
> 
> Thanks!

Does this mean we should go with version 1 in comment 32 (I now realized I labeled them both as version 1, but I mean the first version 1 in this case)?

Comment 37

6 years ago
(In reply to Matej Novak [:matej] from comment #36)
> Does this mean we should go with version 1 in comment 32 (I now realized I
> labeled them both as version 1, but I mean the first version 1 in this case)?

yep! (and I confirmed with LoMo as well)

Comment 38

6 years ago
Created attachment 633650 [details]
Firefox 14 What's New Page -02

Attaching new mock up here.

- new headline and subhead copy
- CTA moved above video

Comment 39

6 years ago
Thanks Lee. I like the overall design, but it still feels like things are pushed pretty far down the page (especially by that headline). Can we address that?
Thanks Lee--I agree with Slater that everything feels pushed down a bit too far. Maybe the download button underneath the video?
(Reporter)

Comment 41

6 years ago
Should we also get rid of the Learn More CTA as well? I feel like there's way too many CTAs on this page (download/learn more/watch video). I think download/watch video should be sufficient right?
(In reply to Jaclyn Fu from comment #41)
> Should we also get rid of the Learn More CTA as well? I feel like there's
> way too many CTAs on this page (download/learn more/watch video). I think
> download/watch video should be sufficient right?

Good point.  Let's try that.

Comment 43

6 years ago
Created attachment 633673 [details]
Firefox 14 What's New Page -03

How about this?
I love it. Jaclyn, can we pull the trigger?
(Reporter)

Comment 45

6 years ago
*bang*
(Reporter)

Comment 46

6 years ago
(that was my +1)

Comment 48

6 years ago
I can't seem to find the implementation bug for this page. Can someone please copy and paste the link in Comment 47 into it for me? 

Thanks!

Comment 50

6 years ago
thanks LoMO!

Updated

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