734197 - [3.6 EOL/Start Page Migration][tracking] Create new version of start page

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Laura Forrest]

Project Overview:
https://wiki.mozilla.org/Engagement/Product_Marketing/3.6_Upgrade/StartPage#Project_Overview

Visual Design Requirements: 
https://wiki.mozilla.org/Engagement/Product_Marketing/3.6_Upgrade/StartPage#Visual_Design_Requirements

Timing: 
Would be nice to have mockups of a couple different approaches within the next two weeks, by 3/22.

Comment 1

[John Slater]

Assigning the design to Ty, but to do this really right it would be nice to collaborate closely with WebDev to make sure the solution includes both design and technical thinking (for example, some slick overlay).

Can we get a developer assigned to this and then have a kickoff meeting to discuss?

Comment 2

[Laura Forrest]

(In reply to John Slater from comment #1)
> Assigning the design to Ty, but to do this really right it would be nice to
> collaborate closely with WebDev to make sure the solution includes both
> design and technical thinking (for example, some slick overlay).
> 
> Can we get a developer assigned to this and then have a kickoff meeting to
> discuss?

I filed Bug 735411 for Webdev and will setup a meeting asap to discuss. Because we'll need l10n, time is very tight.

Comment 3

[John Slater]

Sounds good. Be sure Ty is in that meeting!

Comment 4

[Laura Forrest]

(In reply to Laura Forrest from comment #2)
> (In reply to John Slater from comment #1)
> > Assigning the design to Ty, but to do this really right it would be nice to
> > collaborate closely with WebDev to make sure the solution includes both
> > design and technical thinking (for example, some slick overlay).
> > 
> > Can we get a developer assigned to this and then have a kickoff meeting to
> > discuss?
> 
> I filed Bug 735411 for Webdev and will setup a meeting asap to discuss.
> Because we'll need l10n, time is very tight.

Hey Cmore - I think this is a good idea. Can you recommend someone from the WebDev team so we can start this design process. Timing is pretty tight here, so it would be great to have this kickoff ASAP. Thanks!

Comment 5

[Chris More [:cmore]]

> Hey Cmore - I think this is a good idea. Can you recommend someone from the
> WebDev team so we can start this design process. Timing is pretty tight
> here, so it would be great to have this kickoff ASAP. Thanks!

Hi everyone. Christie Koehler is going to be the technical project manager on this project and we will work together on determining who can do the development. 

Stay tuned!

Comment 6

[Laura Forrest]

Hi Ty - We had the kickoff meeting for this overall project yesterday and decided that when it comes to design, please feel free to design as you'd like. Fred can help from the dev side in case a certain aspect of the design can't be implemented, etc, but for the most part we should be able to push anything you come up with. 

That said - have at it!

Comment 7

[Ty Flanagan]

Attachment: FFx 3.6 EOL Start Page - Message 1

Comment 8

[Ty Flanagan]

Attachment: FFx 3.6 EOL Start Page - Message 2

Comment 9

[Ty Flanagan]

Attachment: FFx 3.6 EOL Start Page - Message 3

Comment 10

[Ty Flanagan]

Attachment: FFx 3.6 EOL Start Page - Message 4

Comment 11

[Ty Flanagan]

Attachment: FFx 3.6 EOL Start Page - Message 5

Comment 12

[Laura Forrest]

Fred - from a technical perspective, can any of the above not be done? 

Next Steps: We're working with stakeholders to reach consensus on final copy/design mix from the options above. We'll have that by 3/26 or before, posted here.

Comment 13

[Laura Mesa [:lmesa] [:lvmesa]]

Hi guys,

Got feedback from Patrick and talked it over with Slater. 

In terms of graphics, we want to do two versions of comment 7, but with a few tweaks. 
-Patrick mentioned that he still felt like the notice felt a bit too "spam" like.  John suggested trying to make the shapes of the graphics feel a bit more like they are part of the browser. One suggestion was using the shapes of Tabzilla for the shapes of the notice. The shapes should also be more thematic, as opposed to trying to copy the browser chrome exactly because this notice needs to be able to be shown to Windows, Mac and Linux users and still feel like part of Firefox. 
-In terms of the two versions, I think we like the idea of using a blue palate for the first version and using a redder palate for the more urgent version. 

In terms of copy, we agreed on using the following for version 1:
"This version of Firefox is out of date.
Upgrade today for the latest in speed and security.
[Download button]" 

Copy for version 2: 
"Important: Your Firefox is out of date!
Please download the latest version to continue.
[Download button] "

Comment 14

[Fred Wenzel [:wenzel]]

(In reply to Laura Forrest from comment #12)
> Fred - from a technical perspective, can any of the above not be done? 

Nope, from looking at the mockups, there's no reason for concern. We'll essentially have the well-known start page in the background and put an overlay over it alerting users of a pending upgrade?

> Next Steps: We're working with stakeholders to reach consensus on final
> copy/design mix from the options above. We'll have that by 3/26 or before,
> posted here.

Excellent. I think Jon Petto should be able to pick up the frontend implementation for this. Looks like we'll put this on bedrock, so this sounds like it'd be a good start.

Comment 15

[Ty Flanagan]

Attachment: FFx 3.6 EOL Start Page - Revised - Ver1

Comment 16

[Ty Flanagan]

Attachment: FFx 3.6 EOL Start Page - Revised - Ver2

Comment 17

[John Slater]

Thanks Ty! 

LoMo & LoFo, what do yo uthink?

Comment 18

[Laura Forrest]

I think they look great. Emailing Patrick now for his final approval. Will update here, hopefully, in next 24 hours.

Comment 19

[Laura Forrest]

These are good to go. Here are the copy strings that will need to be localized for this dialog box. I'm not sure if any new l10n will be needed for the core page underneath.


Version 1:

Your browser is out of date.

Upgrade today for the latest in speed and security. 

Firefox Free Download

No thanks, I'll risk it. 


Version 2:

Important: Your Firefox is out of date!

Please download the latest version to continue. 

Firefox Free Download

No thanks, I'll risk it. 


l10n alternatives for the "No thanks, I'll risk it." line in case "I'll risk it" does not localize well:

I decline this upgrade.

Comment 20

[Laura Forrest]

Ty - Can you post the final PSDs?

Comment 21

[Ty Flanagan]

Attachment: FFx 3.6 EOL Start Page - PSD

contains both layouts separated by grouped layers.

Comment 22

[Laura Forrest]

Thanks Ty!

Looks like Pascal hasn't gotten the copy yet from Comment 19, so I'm putting it in a text file and emailing it now.

Comment 23

[Ty Flanagan]

Attachment: Alert Icon replacement

Comment 24

[Ty Flanagan]

Attachment: Updated CSS

Went through the stylesheet and made changes to the gradient and positioning of divs

Comment 25

[[github robot]]

Commit pushed to master at https://github.com/mozilla/fx36start

https://github.com/mozilla/fx36start/commit/0504bea4e0d5c921f866f2b3b00ae0c08fb694a8
implemented Ty's CSS changes & new alert icon. bug 734197

Comment 26

[Jonathan Petto [:jpetto]]

Attachment: screen shot of latest CSS/graphic changes