1108710 - EOY 2014: Design snippet with a BIG visual impact for last week of campaign

Status: RESOLVED FIXED

(Mozilla Foundation Communications :: Graphic Design, task)

Description

[Andrea Wood [:andreawood]]

We may need to do a "colorbox" around the text or change the background color of the entire page -- something simple but not "ignorable" by users. This led to big increase in $$ last few days of the campaign in 2013.

Comment 1

[Erika Drushka]

As per Andrea and my discussion yesterday, Sabrina will deliver this design (Bug 1107810) with different background colours. (Both light and dark BGs)

Deadline for these mock-ups: Friday Dec 12.

Comment 2

[Sabrina Ng [:sabrina]]

Background colour variations:

Dark Grey: https://redpen.io/ayae18e2f0f8c6666c
Mozilla Red: https://redpen.io/qmf5a557e650dda537
Light Blue: https://redpen.io/gc2433d2d45eb9c545
EOY Yellow: https://redpen.io/pq5669032758475fa1

Comment 3

[Sabrina Ng [:sabrina]]

Bonus variations:

Light blue snow: https://redpen.io/sz24178d78d44fcb6a
EOY Version: https://redpen.io/nk160ced75e4915b43

Comment 4

[Adam Lofting (:adamlofting)]

Attachment: EOY-arrows.jpg

Loving the work on this already. 

Don't use this attachment as a design of course, but I'd like to see some arrows or other design elements that guide the eye towards the 'Donate now' button. 

It can be much more beautiful than my example (though crude can work better than beautiful in fundraising communications).

(And something handwritten could be disruptive on that page but might be too far from our guidelines)

Comment 5

[Geoffrey MacDougall]

I like this a lot. Also like Adam's hack of additional pulls to the content.

Comment 6

[Geoffrey MacDougall]

Can we do something with the FF logo?

Comment 7

[Andrea Wood [:andreawood]]

Messing with the logo would require a level of scrutiny and approvals from moco / brand that would cause delays. I'm also not convinced that it would have a more significant impact on conversion than if the background were changed. I'll check with Fabio on whether it impacted #chooseindependent.

To Adam's point, even just a slight "glow" or "shine" on the "donate now" button would likely have an impact.

Comment 8

[Andrea Wood [:andreawood]]

Synthesizing feedback from the redpen and this bug:

Let's move FW with two of these. For both versions: 
-- Please add a subtle visual animation to the "donate now" button (a subtle shine, movement, shadow, friendly arrow; etc)

Yellow Crowd version:
https://redpen.io/nk160ced75e4915b43
-- This is great (+ subtle animation on button)

Gray Background version:
https://redpen.io/ayae18e2f0f8c6666c
-- Change the background color to a light gray
-- add a dark gray "box" around the text only and increase the font size slightly for readability. Keep in mind the length of text inside that box could increase (even double)

Comment 9

[Andrea Wood [:andreawood]]

Need someone other than Gavin to help build this.

Comment 10

[Simon Wex :wex]

Scott will implement. Do we have an implementation bug?

Comment 11

[Scott [:thecount] Downe]

Can we get a bit more specific on "subtle animation on button"

I don't think I should be spending time making that up.

Comment 12

[Scott [:thecount] Downe]

Although making the animation would be a lot of fun...

Comment 13

[Sabrina Ng [:sabrina]]

Animation Idea for Yellow Version - border pulse effect
Example: example 21 “outline-color” on http://leaverou.github.io/animatable/#outline-color

Keyframes outline-color

0% {
    outline-color: transparent;
}
100% {
    outline-color: #F6CA26;
}

and reduce the size of outline-width (10px?) to make it more subtle.

-----------

Animation Idea for Gray Version - shine/pulse effect (subtle)
Example: example 1 “background-color” on http://leaverou.github.io/animatable/#background-color

Keyframes background-color

0% {
    background-color: #C13931;
}
100% {
    background-color: #EA3B28;
}

-----------

I hope this helps and is more specific for button animations.

Comment 14

[Andrea Wood [:andreawood]]

build bug is here: https://bugzilla.mozilla.org/show_bug.cgi?id=1112305

Comment 15

[Scott [:thecount] Downe]

Yeah, I have these button animations working.

Should have a pull request soon.

I am hitting snags with the background though.

The search icon to the left of the search box is terrible looking with a non grey background.

And the bottom menu also looks bad, because it's transparent.

I actually feel the light blue redpen is best for this.

Comment 16

[Scott [:thecount] Downe]

Attachment: https://github.com/ScottDowne/eoy-snippets/pull/3

WIP

No background changes yet, this is just the button animations.

We can also consider landing in chunks.