701572 - [Mobile] Tablets - Design for lightbox promo

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Jaclyn Fu]

Hi Jason,

Similar to the amazing work you did for the Aurora in-product promo (Bug 676065), would you be able to whip one up for the Firefox for Android on tablets GA release on Dec 20? 

The lightbox promo will pop up on the 5th start-up and prompt the user to rate the product in the Android Market, only once.  I would like it to link to the Android Market app directly: http://www.mozilla.org/en-US/m/download-android.html. I'm thinking the design will incorporate the rating-stars element, and an image of product or logo. 

I will get the specs and final dimensions, but it will be similar to the Aurora promo - CSS, text and images in the design.

Deadline - would it be possible to see a mock up by the end of next week or early week after that? 

Thank you!!

Comment 1

[Jason Grlicky [:grlicky]]

Hey Jaclyn,

Sadly, I don't think I'll have time to fit this into my schedule by that deadline. I'm leaving to Vancouver for a bunch of Apps meetings tomorrow and will be on PTO the week after that for thanksgiving. Hopefully we can find someone?

Comment 2

[Jaclyn Fu]

Hi Tara - would someone else be able to help for this design?

Madhava - what dimension should the lightbox be?

Comment 3

[Tara (musingt)]

Lee!  hoping you can help us with this along with the other android/tablet promotions.

Comment 4

[Tara (musingt)]

Lee, I know copy isn't finalized yet, but I think the copy strings are roughly set.  Might be okay for you to start exploring creative (even if it's just sketching ideas out in your head).  

Jaclyn, I'm a little unclear on deadlines here.  I know the launch is on Dec. 20th, but when are assets due?  

Jaclyn/Mahdava - a note on the dimensions would be very helpful for Lee to get started :)  Thanks.

Comment 5

[Lee Tom]

If these will be similar to Jason's files for the Aurora lightbox from bug (Bug 676065), there were two sizes. 230px and 300px. I pulled styles from the approved Firefox for Android/tablets promo for Fx home, and came up with these. Let me know if I'm off the mark. Thanks! 

http://cl.ly/3g1U263A0O242u0S1F0h

Comment 6

[Jaclyn Fu]

Since the tablet screen size is bigger, I'm not sure if there's a more optimized larger size we can use. I'll follow up with Madhava.

Comment 7

[Jaclyn Fu]

I just got a glimpse of the Aurora lightbox promo on my tablet - and that size works. It can be a little bit more wide though if desired

Comment 8

[Tara (musingt)]

Looks great to me.  question though... 

* if this is a lightbox promo ON the tablet, is there a reason why we'd need to show a tablet graphic?  Just curious.

* I haven't seen this on the tablet, but... do you feel that the actual copy is a little small or light and hard to read? Feels like we could maybe take out the tablet graphic and let the actual message / CTA come through more clearly.  Just another thought. 

Also, am attaching a similar message I got on my phone yesterday from Zappos.  I like the language they use and thought it was done well, so... attaching for reference/inspiration.

closing the copy bug and cc-ing Matej here.

Comment 9

[Tara (musingt)]

Attachment: zappos "rate us" promo

Comment 10

[Jaclyn Fu]

+1 to the Zappos promo

Good point about the tablet graphic. After seeing the Zappos example I kind of like it with the focus on message/CTA

Comment 11

[Tara (musingt)]

Lee / Matej, thoughts ? 
Thanks Jaclyn :)

Comment 12

[Matej Novak [:matej]]

Not sure what the question is. Do we want to change the copy?

Comment 13

[Tara (musingt)]

Sorry, just wanted to see what Lee thought about changing the design, and if you had a spark of inspiration (perhaps) from this zappos example and wanted to try a different copy.  I think main thing is changing the design, not necessarily revisiting the copy - though I do like the tone/language they use with the zappos one.

Comment 14

[Matej Novak [:matej]]

I don't feel like our copy is far off from the Zappos example, just in our own tone. Not sure what else I would do without copying from them.

Should we perhaps include a "no, thanks" option or maybe something like "not now" to give them a chance to do it later?

Comment 15

[Tara (musingt)]

Thanks Matej.  Agree our copy is/was good.  Jaclyn, thoughts on matej's suggestion?  I like the "not now" option.  But, as long as it's clear how they can x-out of the promo, perhaps we don't need that.  and does "not now" mean we'll hit them with this promo again? or let them know where to go if they decide to rate us?   If the other promo has worked just fine, I'm happy to not overcomplicate :)

Comment 16

[Lee Tom]

I think it would be fine to remove the tablet graphic and focus on the CTA. Do we want to offer a "not now" option? ... and to Tara's point, does "not now" mean we'll hit them with this promo again? If we remove the graphic, we'll definitely have room for both buttons, but want to make sure this is the best UX

Comment 17

[Lee Tom]

Here's a new mockup without the tablet product shot, and more emphasis on CTA:
http://cl.ly/3m212z2O1f2h421k0s0A

Comment 18

[Tara (musingt)]

Looks great to me.   I say we roll with this and see how it performs.  Then revisit the design/copy as needed. 

Jaclyn, let us know how you feel about this. Then Lee can post the final files.

Comment 19

[Jaclyn Fu]

Since users will be able to tap anywhere outside the promo to exit (and there's a nice big "x" in the corner) it should be fine - might be too complicating to have it re-pop up later with "not now" 

The promo looks good!

Comment 20

[Lee Tom]

Thanks Jaclyn! 

Here's the PSD:
http://cl.ly/0x1L2T0j0U062d2o233o

Comment 21

[Jaclyn Fu]

Thanks Lee,

Can you also include implementation details? (taken from Bug 676065)
* PNGs for the background and logo 
* CSS colors and font sizes for the text
* CSS color for background and borders of the button

Mark - please let us know if there's anything else you need for the creative assets

Comment 22

[Lee Tom]

Sure...

* PNGs for the background and logo 
http://cl.ly/2M0O2M3E2W2o2v1K1N2h

* CSS Colors / Font Sizes:
300px 
"Rate Firefox for tablets." -> Open Sans Semibold, #343434, 36pt
"Let everyone..." -> Georgia, #505050, 16pt

230px
"Rate Firefox for tablets." -> Open Sans Semibold, #343434, 32pt
"Let everyone..." -> Georgia, #505050, 15pt

The download button should be able to use the same styles as the blue button on
https://www.mozilla.org/en-US/firefox/brand/website/