Firefox OS Thunderclap 1-off email - Design

RESOLVED FIXED

Status

RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: jdavis, Assigned: ltom)

Tracking

Details

Attachments

(4 attachments)

(Reporter)

Description

6 years ago
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
(Reporter)

Comment 1

6 years ago
Thunderclap date has moved...up

Final design due:
July 2
Due Date: 2013-07-09 → 2013-07-02
Thanks for the update, Jess. Assigning the designer this afternoon. More soon!
Assignee: tshahian → enoonan
Assignee: enoonan → ltom
Whiteboard: due 07/02

Updated

6 years ago
Whiteboard: due 07/02
(Assignee)

Comment 3

6 years ago
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
(Reporter)

Comment 4

6 years ago
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?
(Assignee)

Comment 5

6 years ago
Created attachment 769848 [details]
FFxOS Thunderclap Email - 01

Mockup attached. Let me know what you think! L
(Reporter)

Comment 6

6 years ago
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!
(Assignee)

Comment 7

6 years ago
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.
(Assignee)

Comment 9

6 years ago
Created attachment 771060 [details]
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
(Reporter)

Comment 10

6 years ago
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
(Assignee)

Comment 11

6 years ago
Created attachment 772721 [details]
FFxOS Thunderclap Email - 03

With existing background color
(Assignee)

Comment 12

6 years ago
Created attachment 772733 [details]
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!
(Reporter)

Comment 13

6 years ago
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
(Assignee)

Comment 14

6 years ago
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
(Reporter)

Comment 15

6 years ago
Excellent!
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
(Reporter)

Updated

6 years ago
Group: mozilla-corporation-confidential
You need to log in before you can comment on or make changes to this bug.