Closed Bug 655072 Opened 14 years ago Closed 14 years ago

Create Promotional Graphic for Beta and Final Release builds in Android Market

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Platform:
x86
macOS
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: clooney, Assigned: tyronflanagan)

References

Details

Attachments

(18 files, 1 obsolete file)

Screenshot of android market w/Firefox
391.27 KB, image/png
Details
Curly/Flickr screenshot to put inside the phone.
87.89 KB, image/png
Details
Curly's photo with correct color
142.46 KB, image/png
Details
Android Marketplace - Fx4 Mobile Promo Image
269.43 KB, image/png
Details
promo mockup
498.43 KB, image/png
Details
Android Marketplace - Fx4 Mobile Promo Image (alt)
212.09 KB, image/png
Details
start page screenshot
51.96 KB, image/png
Details
Android Marketplace - Fx4 Mobile Promo Image (3)
338.94 KB, image/png
Details
Android Marketplace - Fx4 Mobile Promo Image (4)
400.84 KB, image/png
Details
Android Marketplace - Fx4 Mobile Promo Image (5)
251.02 KB, image/png
Details
Android Marketplace - Fx4 Mobile Promo Image -Final
343.84 KB, image/png
Details
Start page_promographic
51.14 KB, image/png
Details
Android Marketplace - Fx4 Mobile Promo Image -Final (revised)
348.41 KB, image/png
Details
startpage_1
53.89 KB, image/png
Details
startpage_2
54.20 KB, image/png
Details
Android Marketplace - Fx4 Mobile Promo Image -Final (rev. 2)
353.18 KB, image/png
Details
Firefox 5 Beta - Start page
50.35 KB, image/png
Details
Android Marketplace - Fx4 BETA Mobile Promo Image
350.96 KB, image/png
Details
We need to update the final release feature graphic for Android Market, as well as create a new on for beta release profile in Android Market. 1. For final release - we can continue to us this one (http://intothefuzz.com/leetom/Mozilla.com/JPG/mobile_android_01b.jpg) but I think we should add the Firefox logo to it. 2. Fore beta release, we should make it clear that this is the beta channel. We should incorporate the new beta logo (coming soon) and have BETA prominent. Copy can be: "Experience cutting edge mobile features still in development and provide your feedback." The feature graphic specs: 1024w x 500h, 24 bit PNG or JPEG (no alpha) with no transparency Tips: Use a safe frame of 924x400 (50 pixel of safe padding on each side). All the important content of the graphic should be within this safe frame. Pixels outside of this safe frame may be cropped for stylistic purposes. If incorporating text, use large font sizes, and keep the graphic simple, as this graphic may be scaled down from its original size. This graphic may be displayed alone without the app icon. We need this by Monday, May 16 at the very latest. We'd like to get these graphics localized as well as they will remain in AM for a while. Following languages (en, fr, cs, es, ru, de, ko, it, pt, lpl, nl, zh-TW)
Thanks Caitlin. Let me swing by to chat with you about this in person. Just to make sure I understand.
Hey Tara - I like the copy here (http://intothefuzz.com/leetom/Mozilla.com/JPG/firstrun_Fx5Beta_03.jpg) Take Beta to Go Provide your feedback and help shape Firefox for Android
Thanks Caitlin I'm going to ask Victoria (our new freelancer) to help whip this up. As discussed: For updated landing page: Add the FF logo somewhere to reinforce the brand when this image is used elsewhere. For the beta: Add the photorealistic mobile phone graphic with the new Beta Logo in the screen. Once the beta logo is ready (ETA: next wednesday).
Assignee: tshahian → victoria.pater
Hey Tara, I just checked in with Stuart and according to the Android Market specifications, we can't upload an image per language build so l10n is out. This means we may want a different approach to the both feature images all together to just show a compelling image and avoid copy. See the image Opera uses: https://market.android.com/details?id=com.opera.mini.android&feature=search_result We may want to brainstorm a few options here. Opera shows off their offering with multiple devices, but we're not quite there. We may want to show a community picture to reinforce our brand!
Hey Caitlin, want to connect on this today to discuss next steps? We'll need to figure out our desired direction before Victoria can do anything with the design. Thanks.
Yikes, sure, I thought this was underway. I'll stop by as soon as I am out of meetings.
Back with updates: ------------------- * Link to Firefox in Android Market for reference: https://market.android.com/details?id=org.mozilla.firefox&feature=search_result * Screenshot attached as well. * We'll wipe the canvas clean and create a crisp promo featuring the android device with Firefox on it. We can use the light blue lined texture from moz.com to frame the top, and keep the rest crisp/white with a compelling product shot featured. * Since the Logo is already on the left, we don't *need* to show it again in the promo to its right. Since there are lots of product screenshots on this page (with more being added), we also don't need to show a dry product screenshot. So, lets insert a fun photograph or something to echo our community-base and brand personality. * Caitlin, would love your thoughts here, but some options include: 1. Summit crowd photo? or a similar community group photo? 2. i <3 the web fox photo? 3. a DDL illustration? perhaps similar to the screenshots we cooked up for the upgrade campaign? showing Curly's Tweet or FB page? or Youtube, etc. http://www.flickr.com/photos/29142435@N08/sets/72157626548526818/ 4. any other websites/blogs they can be browsing that would have a nod to our community/culture? * I vote for #3 above. * Caitlin, please send me the high res photos you mentioned asap. * Asking Ty to whip this up for us.
Assignee: victoria.pater → tyronflanagan
Hi res photos can be found here: http://www.intothefuzz.com/rhonda/Mobile_Press_Kit_Images/ They have screen shots already in them, but can be changed.
Let's keep in mind that this is essentially the mobile equivalent of our desktop download page, so it's very important to get it right. Would prefer to keep the visual look of mozilla.com as much as possible (in terms of background colors, fonts, etc) and give a definite +1 for keeping it simple and direct. We should also be thinking about how this fits into the overall context of the marketplace and how we can make it stand out from the other apps. Caitlin, should we do a copy review as well? Seems like we probably should.
John, I agree and am going for a blend of what we did for the "Firefox 4 is here" email newsletter graphic (crisp and clean) and our download page. Specifically, the upgrade campaign which had some fun screenshots capturing both the product experience and the brand. The graphic I'm working on doesn't include copy (aside from what's inside the screenshot).
Hey Caitlin Can you get me screenshots for the following: * Youtube with the 5-years of Firefox video showing. like this: http://www.flickr.com/photos/29142435@N08/5637233160/in/set-72157626548526818 * Twitter, with Curly's tweet, like this: http://www.flickr.com/photos/29142435@N08/5637232770/in/set-72157626548526818/ is it an l10n issue if we have text in the screenshot? The facebook and other screenshots would require a bit of time to hack. Since we dont' have a ton of time, I thought these would work. Youtube probably being the better one since it's media streaming and something that people probably do a lot of on their phone. And it has brand personality due to the video. Thoughts?
Hey T - I can get the screen shot with video, but hopefully its treated as an image and not a video playing inside mobile (our video story isn't quite there yet to be touting this feature). I can get Twitter, but yes, it will be in English and that brings up the l10n issue.
(In reply to comment #13) > I can get the screen shot with video, but hopefully its treated as an image > and not a video playing inside mobile (our video story isn't quite there yet > to be touting this feature). That works. Though I meant to showcase it as a video playing on youtube on the mobile device. If that's an issue, we can just use it as an image. But, did you want the whole screen to be showing that image? what's the context? > > I can get Twitter, but yes, it will be in English and that brings up the > l10n issue. Sure thing. We'll avoid that. If you prefer Facebook, please also take a few screenshots of Curly's profile page. And I'll see if we can try to hack that to remove some of the spam in his feed and mimic what we did for the upgrade campaign. http://www.flickr.com/photos/29142435@N08/5637232640/in/set-72157626548526818/ But right now, I'm thinking the 5-years of firefox graphic would work nicely. Let me know.
OK. Here's what we'd like to do: * Using an existing high-res photograph of the Android device, lets bring in a screenshot of Curly's picture on Flickr. This is an image that was used in previous press decks. We'll need to do a bit of hacking on this. Ty, let me know if you feel comfortable with that: -- I'm attaching the PSDs of the phone. Most of these have a hand in them, we'll need to use the one without it. Download them, here: http://www.intothefuzz.com/rhonda/Mobile_Press_Kit_Images/PSD.zip -- I'm also attaching a screenshot that we'd like to put inside the phone. -- The screenshot shows curly, but Curly's color is a bit messed up.. I'm also attaching his image separately so that we can plug that in. -- The screenshot also has some icons at the top that need adjusting: please delete the red triangle with the exclamation mark in it. Please also add in some battery power since it looks like it's drained :) -- Below the photo there are comments and avatars. I'd like to hack this to bring in other mozilla.com critters, similar to what we did for the upgrade campaign. Ty, I'm attaching screenshot of what that looks like. Could you please copy that? Bring in Panda and perhaps the Rhino into the avatars, change the userID/ names, and possible the first comment since it doesn't really make sense. Anything "enthusiastic" will do. That's about it. Would be nice to place the phone at a slight angle, and size it so that it feels powerful in the promo graphic. Again, the rest of the space is pretty sparse and clean / crisp... we just need the subtle blue lined textures at the top, and that's about it.
I just realized that since this is meant to echo our main download page (mozilla.com) it would have been better, perhaps, to use the Rhino vs. Curly. Curly has been our social media mascot in a way. But, not a big deal in the end... they all represent the same abstract brand qualities and Rhino will be present in the comments/avatar. Ty, please let me know if you need anything else from me to get started. Would be great to see something before the weekend, so we can finalize by Monday. Thanks.
Hi all, Wanted to share what I currently have for the promo. Ill be added another option in little while. Ty
Attached image promo mockup —
Thanks Ty! Looking great. I know that you're working on another rev soon. But here are some quick thoughts... would love to hear what others think as well. * Looks great. Clean and crisp like we wanted. Feels a little empty though. Given that we didn't want any text, I wonder what else we can add in here to support the graphic. (I think you're already working on that). * I like the phone at an angle. I was hoping we'd see more of the actual screen, since we're trying to showcase the browser vs. the actual phone. I wanted to avoid having this look like a mobile device/product shot. It's a little hard though given the angle of the graphic we have. The other photographs we have all have a hand in it. Would be great to see a few options for us to choose from.
Image looks great...it's just screaming out for some text though. Is there no way we can add a headline?
Since they can only upload one image for all locales... they wanted to avoid any text to keep it l10n friendly. I think Ty is working on adding in a little something more (visual elements vs. type) to fill it up.
Got it. We may also want to consider using a different image on the phone...the one with Curly looks nice, but doesn't really say "browser" to me. Maybe something like the start page?
If someone can supply a screenshot of the start page, we can plug that in as another option and see what is the strongest.
An alternate angle of the phone with more browser elements
Thanks Ty. I like this too... but when speaking to Caitlin, I suggested we use a different screenshot since the browser elements (out of context, without text supporting/explaining them) can add confusion. Especially since we're seeing a bunch of red X marks :) which usually signal errors and so forth.
CC-ing Irina since I think Caitlin is out today. Irina, could you supply us with a screenshot of the start-page? Would be nice to do a mockup with that to see how it looks. Regardless of the screenshot though, the space will still feel rather empty without anything else around the phone graphic. Ty, did you have any thoughts around what we could do there? Assuming we can't insert text...
Sure, you'll have a screenshot soon.
Attached image start page screenshot —
Thanks Irina. John, what do you think? I'm not really liking this personally, especially since the promo space is rather sparse... the start page feel pretty dry to me. Curly isn't the absolute best, but it visually more appealing, it's more fun and carries more of our brand personality. It also feels closer to our mozilla.com landing page design (to your point about this being our 'homepage' on the android marketplace). I agree that it's not clear we're looking at the FF browser. I thought that it was still OK. Hopefully the copy to the left will provide enough context so people know what is being offered.
I'd have to see it in the mockup, but I actually think this could be pretty good. We'd need to make a few tweaks, though, like removing Spark and possibly the recently opened tabs. Ty, can you throw it in the mockup so we can see? No need to make any further tweaks yet of course.
Could we use 3 screenshots of different sites rendered in the browser versus just one? It could help with spacing and filling in the white space.
You mean three phones, three screenshots?
Yes, we can then stagger the phones with screens in carousel fashion, one behind the other.
If you want, you can do a quick mock to show us. But I personally feel like that might not work too well. It'd be nice if we had more devices so that we can show a full "deck"... but having the same device three times doesn't feel right to me personally. I feel like it'll start to look more like a promo for the device vs. the browser. I liked it when Sean "fanned" out the browser screenshots when showcasing Personas... but it doesn't work that well in this case. My 2 cents.
Two other options (brainstorming outloud): * Do something similar to Chrome's. Theirs is a good concept, but the execution pretty much sucks: https://market.android.com/details?id=com.google.android.apps.chrometophone&feature=search_result * Stick to a similar graphic currently on the site (the rhino) but scale it up so it fills the page more and shows off the phone in his hands.
Have a few more options for you.
If you'd ask me, I like Promo Image 4 the best, on the 2nd place is 3 and then 5.
Thanks Ty. 3 and 4 are nice, but those are technically Logo Violations :) I'm not a fan of treating the logo like that, can we do a version with the original colors? it's okay if it's washed out a bit, but this version doesn't feel right to me. Otherwise, the promos are looking great. Could you also please take out Spark? that campaign isn't really relevant here.
Hey Ty, Could you please wrap up #3 with the following edits please: * Take out the Spark promo in the screenshot * Use the original logo in the background, but wash it out so it's not too dominant. * And send us the flat image along with the layered PSD. We need this asap tomorrow, so if you can send it soonish that'd be great. Thanks again.
Will do. Ill have this uploaded shortly.
Not sure why, but the PNG was not rendering correctly. I have reuploaded it.
Attachment #532554 - Attachment is obsolete: true
Thanks Ty ! Looks great :)
This looks good. Just a quick question about the tabs from last time section on the screen shot. It says "mozhub:sign in" Any way we could make these a bit more user-facing like CNN.com and Flickr? Do you intend for this to to the final image for both Final and Beta? Should we localize these Start pages as there is English text throughout?
Hey Caitlin. I'll let Ty comment on whether he can hack the design to change the recent tabs. Otherwise, if you want to supply a new screenshot, that might be faster. Yes, I thought this would work for both Beta and Final, would you agree? Also, I'm not sure what you mean with the l10n question. I thought you were not able to submit different versions of this page per locale. I know it's got English txt and that's not ideal... but the other screenshot with Curly wasn't feeling as strong as something like the start page that really showed the product (Firefox) more clearly on the phone. Let me know what you think. You needed these by eod today, right?
Well Firefox:Start is in English and all the copy is in English + the sites in recent tabs, so this page would need to localized. I guess we'll just keep this English-only, but we still have the l10n issue.
I see, yes. That makes sense. So, what should we do as part of next steps? I know that having English here wasn't ideal .. we tried it with an image-only page (Curly) and it wasn't as strong. Sorry about that. But I also didn't think that we could localize these pages... hence the reason why we wiped out text from the rest of the promo. So, should we adjust the design to insert Flickr and CNN (per your earlier comment) and then hand it off to you to localize? Let me know please. Happy to talk in person too, I'm pretty much free all day.
I really think the start page works best in terms of communicating "this is Firefox on your phone!"...another site like CNN or Flickr doesn't really do that.
Agree with you John. Caitlin, the way I understood was that you wanted the Recent Tabs to be CNN/Flickr right? Not changing the screenshot.
Caitlin, would you be able to supply an updated screenshot please? The one we used was a quick one that Irina took from Jay Patel's phone. If you can supply one with the right tabs, that'd be great. We can swap that in pretty quickly.
Right.
Attached image Start page_promographic —
Sorry for not being clear -- the start page (although in English) is fine. I am referring to the Tabs from Last time section -- it's just this mozhub sign in link, which isn't very relevant.
Thanks Caitlin. Ty, is this something you can whip up quickly? Caitlin, when are these due? Our designer Ty is remote and I want to make sure we get these to you on time. Trying to see if we can wait for Ty to update these, or if we should have someone else make the update real quick.
Ideally by mid-day tomorrow. We can upload them with our new beta/final builds in Android Market, but if they're delayed a day or two, not the end of the world. Thanks!
OK. Thanks. Ty, could you please swap out the graphic and send us new files? Then we can wrap this up. Thanks again
Ill swap the screenshots as soon as I get home. :)
Swapped out the screens!
Hmmm, what do you all think? Add-ons got cut off because the Awesome Bar at the top is included. I can remove the Personas add-on and make more room? Tara?
Hey Caitlin. I think add-ons are important to include. So, lets cut something out. I'd actually vote to keep Personas (since themes are a unique feature even though folks may not know what they are... existing Firefox users will at least recognize it). How about we take out Spark? I rather keep features than short-term campaigns. You might also be able to swap out the SOMA link with something similar that doesn't break into two lines. What do you think?
Attached image startpage_1 —
Attached image startpage_2 —
Hi Tara and Ty, I added two more attachments: it's the same screen shot, but one has the bottom buttons included and one does not (trying to get Give Feedback and Get Help buttons to appear). Is there a way to squeeze everything slightly so we get Awesome Bar all the way down to the buttons to appear?
Thanks Caitlin. hmm, that's a tight squeeze. I definitely don't like not showing the URL bar at the top. If we had to choose, I'd go with the first screenshot. Will let Ty figure out potential alternatives and comment on what we can do.
Thanks. Agreed. We definitely want to show the Awesome Bar, but trying to see if there is any way to show all. If not, it's not the end of the world.
Hey Ty, did you get a chance to work on this at all? Please let us know. Would like to wrap it up soon. Thanks.
I dont the files with me, but Ill make the change once I'm home
Hi Ty and Tara - We're loading up the Android Market profile. Can we get that latest version in the next couple of hours? Thanks.
I had to tighten up the white space inbetween the sections in order for more content to fit on the screen. Unfortunately couldnt keep the "Feedback" or "Help" buttons.
This looks great. John O'Duinn can use attachment 533485 [details] for 4.0.1 (stable) Android Market profile. However, I am sorry to tell you that the Start page is Firefox Beta is branded beta, so we'll have to plug in a slightly different screenshot for the Beta feature graphic, but it can look identical sans Beta branding. I will attach the screen shot now.
Here is the BETA Page image with the new BETA screen.
nick of time! thanks a ton!
Thanks Ty! and team. These look great. Ty, could you please also email me the PSDs for my files? Thanks. *closed*
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
You can grab the PSD file from my Dropbox for the time being. http://dl.dropbox.com/u/18740830/Moz/Fx4_AndroidMarketplace_Promo.zip
Thanks a ton!
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: