885056 - Firefox OS Thunderclap 1-off email - Design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Jessilyn Davis]

We've not another fancy one-off to design! :D

Final design due: July 9th

Copy is being drafted in Bug 884858


Should be a similar design to these one-off announcement emails:

OS one-offs: Bug 863006 & 863007

FFx13 release
http://htmlpad.org/6-2012-firefoxAndYou-desktop-EN/

Android tablet announcement 
http://view.e.mozilla.org/?j=fed415717466027d&m=fe9915707361037e75&ls=fe5c1777756d0d7c7015&l=ff6e157075&s=fe5f1572756701757313&jb=ffce15&ju=fe971570746c027b77&r=0

Android reader mode announcement:
http://view.e.mozilla.org/?j=fec41572776d0074&m=fe9915707361037e75&ls=fe5c1777756d0d7c7015&l=ff6e157075&s=fe5f1572756701757313&jb=ffce15&ju=fe8d15727c63047572&r=0

Comment 1

[Jessilyn Davis]

Thunderclap date has moved...up

Final design due:
July 2

Comment 2

[Lizz Noonan - she/her (:lizzn)]

Thanks for the update, Jess. Assigning the designer this afternoon. More soon!

Comment 3

[Lee Tom]

Hey guys, can you give me any clarity on design requirements here? I'm assuming we're going to show fox illo and generic smartphone? Apps (green) homescreen? Do we need to build this on the white background like the previous one-off emails etc. 

Thanks!
L

Comment 4

[Jessilyn Davis]

This should be a little different than the July 1 announce email (maybe not as big of the fox + device with green screen) and should play nicely with the Thunderclap page (https://www.thunderclap.it/projects/2580-help-change-the-mobile-world?locale=en)

We're still nailing down copy - but maybe this helps? The world is your oyster for creativity, just make sure it looks like our other clean one-offs.

Let me know if this helps?

Comment 5

[Lee Tom]

Attachment: FFxOS Thunderclap Email - 01

Mockup attached. Let me know what you think! L

Comment 6

[Jessilyn Davis]

Hey Lee! This is pretty neat looking! I like where this is going :)

A few edits:

1) Needs to use the new template with the mozilla tab and unsubscribe/modify/view in browser links across the top  (and square edges for the white copy blocks)
https://bug863006.bugzilla.mozilla.org/attachment.cgi?id=762951

2) The orange links should all be blue (read this in browser, unsubscribe, modify pref, etc.)

3) The orange background needs to be 1 solid color (bleeding colors don't work across browser's clients) 

4) Remove the "privacy policy" and "other systems and languages" links from below the button

5) We're going to test the orange background, so once we get the design finalized, we'll need the regular blue template designed too.

6) Can you check to see what the main image will look like when it's resized to 318px wide and make sure it still looks good and the copy is still legible? (For mobile device viewing)

Thanks!

Comment 7

[Lee Tom]

Thanks for all the specifics, Jess. It'll really help move this along. I can't seem to access the attached PSD, but that would greatly help to start there.

Comment 8

[Jessilyn Davis]

Of course!

Try this PSD link:
https://www.dropbox.com/s/fr2rtmdta1hen19/FFOS_TeaserEmail_v3.psd

Comment 9

[Lee Tom]

Attachment: FFxOS Thunderclap Email - 02

Attached is the next iteration of our email. 

1) Using our template PSD with tabzilla and square edges for the white copy blocks)

2) All links in standard blue (read this in browser, unsubscribe, modify pref, etc.)

3) solid background color - Jess, I think the blue background works better than the orange. Links are more readable and the hero graphic stands out better when complimented on blue. 

4) Removed "privacy policy" and "other systems and languages" links from below the button

5) The phone graphic (and fox's head) will be visible when it's resized to 318px wide. The copy should flow into the max width, center justified as it is here

Comment 10

[Jessilyn Davis]

Thanks Lee! This is looking good!

Two quick thoughts:

1) Can you send me a version with the same blue as our usual emails? (I'm a little nervous about the blue link colors getting lost in the darker blue background)

2) What do you think about using this graphic (that's being used for Social) in the email instead of the fox + phone image?

https://bug884846.bugzilla.mozilla.org/attachment.cgi?id=770845

Comment 11

[Lee Tom]

Attachment: FFxOS Thunderclap Email - 03

With existing background color

Comment 12

[Lee Tom]

Attachment: FFxOS Thunderclap Email - 04

Here's a version with the globe graphic we used for Social. The drawback to using this VS. the fox illo, is that at 318px width the globe graphic is going to look pretty odd. 

With regard to the background colors - I prefer v02 (darker blue background) because I think it looks more dynamic and on-brand. The lighter (existing light blue) will work as well, but the email on a whole looks kind of "diet" ? 

LMK what you think!

Comment 13

[Jessilyn Davis]

I think the fox + phone image combo is the winner!

I think we'll test the light blue vs. dark blue to see how it goes. (I do see what you mean about the punch vs. diet - I'm curious to see how our readers react.)

Can you send me the PSD (either 2 separate, or 1 with the different layers on/off - however you have it setup)?

Thanks!

Jess

Comment 14

[Lee Tom]

Hey Jess, great! 
Here's the PSD: http://cl.ly/3g2X3L3D402T

* make sure you're using the appropriate Firefox OS logo + wordmark depending on which background you're using, so they show up: 

- light blue bg (use logo marked, GREY)
- dark blue bg (use logo marked, WHITE)

They should be easy to spot in the top layer group labled, HEADER. 
Background colors are at the bottom of the layers palette below, FOOTER

Comment 15

[Jessilyn Davis]

Excellent!