Closed Bug 709861 Opened 13 years ago Closed 13 years ago

[/fx Localizations Project] Create Add-ons/Personalization Graphic

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: christine.brodigan, Assigned: mternoway)

References

(
URL
)

Details

Attachments

(18 files)

screenshot option 1
358.28 KB, image/png
Details
screenshot option 2
203.50 KB, image/png
Details
Add-Ons gauge concept
719.52 KB, image/jpeg
Details
Add-Ons sundae concept
952.16 KB, image/jpeg
Details
Add-Ons sundae conceptv2
907.68 KB, image/jpeg
Details
ice cream concept 1
287.22 KB, image/jpeg
Details
ice cream concept 2
259.71 KB, image/jpeg
Details
ice cream concept 3
271.05 KB, image/jpeg
Details
AMO video reference
668.03 KB, image/png
Details
Devices page reference
264.15 KB, image/png
Details
cropped image reference
135.00 KB, image/png
Details
add-ons video concept 1a
323.71 KB, image/jpeg
Details
add-ons video concept 1b
334.47 KB, image/jpeg
Details
add-ons video concept 2a
347.29 KB, image/jpeg
Details
add-ons video concept 2b
356.72 KB, image/jpeg
Details
addons_video_concept
344.67 KB, image/jpeg
Details
addons_video_concept_2
344.80 KB, image/jpeg
Details
Icon Set
122.93 KB, image/png
Details
Opening this bug for the project to improve the /fx page for locales where the Mobile promo and email sign-up graphics cannot be used. Graphic: If there is an existing graphic for Add-ons/personalization, let's please use that, no need to create anything new, it just needs to fit into that space on the page. Graphic should not use any copy that would need additional localization. Goal: Have for implementation team by Monday, December 19, 2011 Wiki: https://wiki.mozilla.org/Mozilla.org/Roadmap_2011/Q4/fx Let me know if you want to meet up for a few minutes.
Hi Chrissie Can you please share a little more about the graphic you're looking for? Are we looking to replace both the newsletter promo (bottom right) and the mobile/sync promo (hero image with Rhino) ? For the personalization one, do you have thoughts on an existing graphic we could use? I'm not sure what to offer without knowing the copy/message. We also recently did an AMO animated video that we can point to, perhaps. Regarding Copy, I'm cc-ing Matej, but I'd look to you (or someone else) to provide the desired copy. We'll start with that and then figure out the graphic.
(In reply to Tara from comment #1) > Hi Chrissie > > Can you please share a little more about the graphic you're looking for? > Are we looking to replace both the newsletter promo (bottom right) and the > mobile/sync promo (hero image with Rhino) ? > > For the personalization one, do you have thoughts on an existing graphic we > could use? I'm not sure what to offer without knowing the copy/message. We > also recently did an AMO animated video that we can point to, perhaps. > > Regarding Copy, I'm cc-ing Matej, but I'd look to you (or someone else) to > provide the desired copy. We'll start with that and then figure out the > graphic. Tara, thanks for this note, let me try to provide a bit more clarity (yay!): *this is only for the hero image (we've referred to it as the lede image) *the three promo spots below the hero image will not be getting an image for this low bandwidth update *the hero image can be anything that's already in use elsewhere on the firefox site or add-ons site that indicates the power of customization, there was a promo in the slideshow area on https://addons.mozilla.org/en-US/firefox/ that had a rocket and hammer or something. We don't have any l10n resources for new copy. Instead we're using existing copy already in the minor promo spots on locales in groups 4 and 5 and raising it up with a link to Add-ons. The goal is to improve the experience so that users will not to see a repeat of the desktop /new message on the /fx page. Example: http://www.mozilla.org/pt-BR/firefox/fx (we will move Complementos to the hero spot with this image that this bug will produce) Does this help?
Thanks Chrissie Some additional thoughts / questions: >COPY: * I understand that we're not creating new copy, but for me to better help you I'd need the copy string we're planning on using on the /fx page. It helps to see it in the mock up as well. So, if you (or someone) can provide that copy string... it would be great. I know it's a generic promo for add-ons, but sometimes seeing the copy helps to pull the right graphic. >DESIGN: * Unfortunately our library of Add-on imagery isn't as robust as others... especially when it comes to a big hero space like this. I can easily offer icons and graphics for promos, but when it comes to bigger canvases, I dont' have much readily available. * The promo you referenced works b/c it's a deconstructed graphic that we wove into the banner. Won't work like that for this space. We had an old illo we used for Add-ons (http://bit.ly/uTujeV_, but I believe it has been retired. * I might suggest using a graphic from our new video... but I don't have the assets for that readily available either. We could take a screenshot from the movie, but we'd have to have our designers play with it so it doesn't overwhelm the page. I guess what I'm saying is that it's not a simple plug 'n play :) * I would like to actually suggest we put the AMO video in there, but I'm not sure where localization stands with that. http://www.mozilla.org/en-US/firefox/video/?video=addons
(In reply to Tara from comment #3) > Thanks Chrissie > > Some additional thoughts / questions: > > >COPY: > * I understand that we're not creating new copy, but for me to better help > you I'd need the copy string we're planning on using on the /fx page. It > helps to see it in the mock up as well. So, if you (or someone) can provide > that copy string... it would be great. I know it's a generic promo for > add-ons, but sometimes seeing the copy helps to pull the right graphic. Customization Personalize with Add-ons Discover more Complementos Personaliza con Add-ons Descubre más > > >DESIGN: > * Unfortunately our library of Add-on imagery isn't as robust as others... > especially when it comes to a big hero space like this. I can easily offer > icons and graphics for promos, but when it comes to bigger canvases, I dont' > have much readily available. > > * The promo you referenced works b/c it's a deconstructed graphic that we > wove into the banner. Won't work like that for this space. We had an old > illo we used for Add-ons (http://bit.ly/uTujeV_, but I believe it has been > retired. OK > * I might suggest using a graphic from our new video... but I don't have the > assets for that readily available either. We could take a screenshot from > the movie, but we'd have to have our designers play with it so it doesn't > overwhelm the page. I guess what I'm saying is that it's not a simple plug > 'n play :) Doesn't sound like this is an option. > * I would like to actually suggest we put the AMO video in there, but I'm > not sure where localization stands with that. > http://www.mozilla.org/en-US/firefox/video/?video=addons Unfortunately, this is not an option for content groups 4 & 5 for this bug. Is there a graphic we could use in the space that depicts Personas? If not, can you recommend another image? Perhaps the Rocketship we used for the 3.6 page? I would hate to uplift the copy and not be able to pair it with a graphic.
hmmm, Personas is a good option too, though it's a specific kind of add-on vs. add-ons in general. I'd vote against the rocketship simply because it's a feature icon that's not representing add-ons/customization. How about a screenshot from the video we just did? We'll have to figure out a nice frame for it, but perhaps one of the ones attached?
Attached image screenshot option 1 —
Attached image screenshot option 2 —
i'll keep digging around... just don't have anything readily available that fits here nicely... those screenshots aren't perfect but they're an option. Makes sense if they can view the video, but out of context it's a little random I guess. We have some graphics for promoting Personas but those are also not ideal....
(In reply to Tara from comment #8) > i'll keep digging around... just don't have anything readily available that > fits here nicely... those screenshots aren't perfect but they're an > option. Makes sense if they can view the video, but out of context it's a > little random I guess. We have some graphics for promoting Personas but > those are also not ideal.... Neither of those seems to be a good option (1 more so than 2, which depicts en-US content). How about this add-ons image: https://static-cdn.addons.mozilla.net/media/img/zamboni/footer-logo-med.png?b=a195e20
The toolbox icon works well for small promos, but the hero space we've been discussing is too big for that.... And I wouldn't recommend scaling that up too much. It has also been used mainly for Builder and Sdk... So not the best fit in my opinion
It sounds like we have no existing content that would work in this spot. In which case, we should create something new.
Why won't the video work? It's easily the best add-ons promotional asset we have right now, and it was created for instances like this. If it's a localization issue, how many locales do we need? Could we make this a UniSub project?
re: Comment #11, LoFo.. the timing is too tight for me to create a new graphic / start from scratch. re: Comment #12, I agree with Slater here. The video is pretty great and I think we should try to use it here. I know Dan wanted to localize the video (in voice and through subs) so... perhaps we can ping him and see where things stand and what we can do here. It doesn't really make sense to create a new graphic here if we have existing ones that could fit -- though clearly we don't have many strong candidates here to choose from, aside from the video.
RE: Original goal: improve the experience for content groups 4 & 5 https://wiki.mozilla.org/Mozilla.org/Roadmap_2011/Q4/fx Challenge: Project has been bumped for two quarters, we don't have resources for new l10n at this time and in the near future Question: Is moving the existing localized personalization promo from the bottom of all of these pages in content groups 4 & 5 and pairing it with a hero graphic a better option than what's currently there? (if not, let's help Greg in a future quarter when this can be attached to a Goal with resources) RE: Video comment 12 & comment 13 Would love to use the video on these pages when it's ready. The challenge of content groups 4 & 5 is that they are the least localized product pages, so they are likely much further down on the priority list. RE: comment 11 understood Back to the question above, if this isn't a better experience, let's close as won't fix and work with Greg to try to get this into next quarter goals and attached to dedicated resources.
Thanks Chrissie. I'm not sure if I've misunderstood the scope here and I certainly can't speak for l10n (and don't mean to), but it seems like updating a short copy string for a few locales wouldn't be a huge resource ask... right? That aside, the bigger challenge for me is that we dont' have an existing graphic to re-purpose here. And our library of graphics for AMO just happens to be limited. If it was a smaller space that would be different, but aside from the video (or screenshots of the video) I don't have much to fill the hero space. Creating a new/custom graphic is certainly an option we could discuss... and I'm happy to help make something work... but by Monday is simply too tight since design resources are pretty tied up right now with Q4 goals, if not holiday PTO. I know localizing the video is another story, and I'd like to see where things stand with Dan. The video would be a great option here. Regardless, before we close this out or push to Q1, I'd like to wait and see what Greg suggests since it's his project. If it's a project that has been rolled over two quarters already, I'd like to see if we can find a solution vs. just rolling it again into next quarter.
FYI: I pinged Dan to see what the l10n plan is (if any as of now) for the AMO video.
(In reply to Tara from comment #15) > Thanks Chrissie. > > I'm not sure if I've misunderstood the scope here and I certainly can't > speak for l10n (and don't mean to), but it seems like updating a short copy > string for a few locales wouldn't be a huge resource ask... right? That > aside, the bigger challenge for me is that we dont' have an existing graphic > to re-purpose here. And our library of graphics for AMO just happens to be > limited. If it was a smaller space that would be different, but aside from > the video (or screenshots of the video) I don't have much to fill the hero > space. Creating a new/custom graphic is certainly an option we could > discuss... and I'm happy to help make something work... but by Monday is > simply too tight since design resources are pretty tied up right now with Q4 > goals, if not holiday PTO. > > I know localizing the video is another story, and I'd like to see where > things stand with Dan. The video would be a great option here. > > Regardless, before we close this out or push to Q1, I'd like to wait and see > what Greg suggests since it's his project. If it's a project that has been > rolled over two quarters already, I'd like to see if we can find a solution > vs. just rolling it again into next quarter. Tara, you've provided a ton of great options (thank you!). If I understand correctly, there are two solid ways we can approach this with a little more time and resources: Option A. *Create a custom Add-ons graphic and small string of copy that can be localized for content groups 4 & 5 Option B. *Integrate the Add-ons video and a small string of copy that can be localized for content groups 4 & 5 **this will likely take longer than option A. My vote would be for Option A and when the video is localized then updating this page with that content (we can serve both versions, which is great for variety). This would mean we would extend the timeline to: Creative - graphic & copy, by December 22 l10n - localize string and release as ready through January 10 Let me know your thoughts and reassign to Greg to talk to Pascal to make the final call on what works for their needs and with resources they have :-)
Thanks chrissie. Lets wait to hear from Greg before moving forward.
The video would be a great fit here. Unfortunately, it is unlikely that we will have it dubbed or subtitled anytime soon for group 5 (we are talking about the 73 'smallest' locales here...). Subtitles aren't ideal anyway and dubbing takes an amount of effort we can only consider for larger locales (Brazil would be one of themn but do we really want to have 2 different solutions here for the add-on promo? I am not sure). I would like to hear from Dan on his plans for the video, and will ping Pascal on my end to discuss a few options but it seems to me the best way to go here is to create a new graphic. Note: Yes, having videos is great but once again, if these are not coupled with an l10n plan, they end up being useless to two-thirds of our users. In terms of next steps: groups 1, 2 & 3 are higher on the priority list so I am ok pushing groups 4 & 5 (ie the ones in need of an add-on hero graphic) to early Q1 as long as we get the others ready. What it means for this bug is holding off until we can book appropriate resources. Folks, I know everyone is doing their best with limited resources. Thanks for your efforts. There is a larger problem at play here and I think we need to stop decoupling resources for content creation (pages & creative assets) from l10n of this same content in order to avoid problems like that. I will make proposals to change that soon.
Thanks Greg. Lets revisit in early Q1 to figure out next steps for the AMO graphic.
Whiteboard: --on hold--
Does this mean we'll use the video for groups 1,2 and 3? As I understand it, the vast majority of our users come from a relatively small # of languages, so it would seem that if we can get those localized soon, the rest can be done at a more leisurely pace.
We are not pushing add-ons / customization as the main promo for these groups, but mobile. Add-ons are one of the minor promos in the bottom section and currently redirect to AMO. Once the video is localized, we can discuss redirecting to it. Question: have we considered placing the video on AMO's home page? Might be a way to serve all key content with one redirection link.
(In reply to Gregory Jost from comment #22) > > Question: have we considered placing the video on AMO's home page? Might be > a way to serve all key content with one redirection link. It was originally intended to go in-product in the Add-ons manager, but we made it more mainstream so that it could be used across various places, including the AMO homepage (where it makes sense for it to be). That's Dan's area and I think he's still working on plugging/promoting this video across various pages. Would need to follow up with him re: l10n, distribution strategy of the video...
Thanks for all the ideas everyone, let's refocus on making this bug a bug to get a world-ready image for the hero spot on the /fx page for groups 4 and 5 (https://wiki.mozilla.org/Mozilla.org/Roadmap_2011/Q4/fx). Example: http://www.mozilla.org/pt-BR/firefox/fx (we will move Complementos .... to the hero spot with this image that this bug will produce Tara, what other information do you need to make this happen? Do you think we could set a goal of December 22 for a new image?
Hey Chrissie, we decided (in comment #20) to hold off on this bug till Q1. Greg agreed. I don't have resources right now to produce a new graphic from scratch for customization. More lead time would be appreciated for that type of request. So, we'll revisit in early Q1 and figure it out.
Blocks: 704564
Ding ding! Happy new year, happy Q1! So do we have resources now? ;)
Tara, gentle nudge here, please assign to a designer, we're in a pinch since this was carryover from Q4.
Whiteboard: --on hold--
Hey Chrissie, thanks for the ping. Sorry but I had this filed as on hold, so it slipped my radar (comment #26). To confirm, is this in regards to a general graphic that captures the essence of Add-ons? If so... I'd like to discuss the graphic needs a little more before assigning to a designer and figuring out a reasonable deadline.
(In reply to Tara (musingt) from comment #28) > Hey Chrissie, thanks for the ping. Sorry but I had this filed as on hold, > so it slipped my radar (comment #26). To confirm, is this in regards to a > general graphic that captures the essence of Add-ons? Yes. > If so... I'd like to > discuss the graphic needs a little more before assigning to a designer and > figuring out a reasonable deadline. Sure thing, what questions to you need answered that haven't been addressed? (note: we aren't using the add-ons video because it is not translated and we can't have that be an additional blocker to updating these pages)
noted. No AMO video. If you can confirm: * Specs (where is this going and how much space do we have) * what are you guys thinking of creating here: -- something illustrative vs. photorealistic? -- something high level abstract that suggests "customization" in general? or something more specific? something else? -- something more literal, do we show a computer / device? -- is this intended to be used just for this one space or do we want to create a graphic that's more long lasting and can be used to represent ADD-ons in other places as well. Basically, the shelf-life of this graphic and use cases. -- I know we're retiring the creatures, so I"m trying to figure out a sense of the main message / concept and how we can communicate that in other non-creature ways.
(In reply to Tara (musingt) from comment #30) > noted. No AMO video. > > If you can confirm: > Most of this has been asked and answered a number of times in this bug, so bear with me as I point back up to comments. > * Specs (where is this going and how much space do we have) See comment 0 which outlines general specs and points to a comprehensive wiki See comment 2 where this question is answered and a sample link included. Tonight, I opened the image and it shows 548x347. > * what are you guys thinking of creating here: > > -- something illustrative vs. photorealistic? This is discussed extensively in comments 3-9 - in comment 9 a toolbox is ultimately requested. I'm confident we'll figure this out once the design is underway, hopefully Sean can lend guidance to the designer on where he wants to take the site with imagery. > ADD-ons in other places as well. Basically, the shelf-life of this graphic > and use cases. See comment 0 This has been a request that's carried over multiple quarters. We need to keep the scope specific to this page to improve the users' experience in the locales as soon as possible. > -- I know we're retiring the creatures, so I"m trying to figure out a sense > of the main message / concept and how we can communicate that in other > non-creature ways. I'm confident we'll figure this out once the design is underway, hopefully Sean can lend guidance to the designer on where he wants to take the site with imagery. Thank you for assigning this bug to a designer.
Thanks Chrissie. Sometimes when revisiting old bugs it helps to re-set certain conversations and make sure we're still aligned on deliverables, and catch up on new learnings, new direction, etc. Hence the repeat questions, thanks for helping clarify. I've checked the wiki, and the wiki is currently empty. There is no content. I think the conclusion of the bug, from what I understand and remember was that there was no pre-existing image that we could use here, so the goal was to revisit and illustrate something new: a more abstract image that captures the essence of what Add-ons are about, appropriate for a hero image. With that in mind, I don't think the toolbox graphic (or a toolbox in general) is necessarily the strongest solution here and would like to think through this a little more before recycling an existing image just to mark this done. Since it's a new image representing Add-ons (something we don't have, but I admit we need) I want to make sure we think through it a little more and make sure we're not pursuing another short-term solution. Though I understand that you guys need this asap. I'll discuss with the team and circle back. Meanwhile, can you please let me know what timeframe we're looking at?
Following up offline with John.
Assignee: tshahian → jslater
Gentle nudge guys. Looks like we've ground to a halt just when we were about to get the design process started. Any chance we can keep this moving? Fwiw, I agree with comment 32, the toolbox is probably not appropriate here.
Greg, thanks for the reminder. We're hoping to get a designer assigned to this today. Stay tuned...
We've lined up Matt Ternoway, a frequent Mozilla freelancer, to help with this. He'll be joining this thread soon.
Assignee: jslater → mternoway
Status: NEW → ASSIGNED
Hi guys, thanks for having me on board to help out with the design for this. Following up from the chat I had with Greg and John the other day, I've been brainstorming an idea that would focus in on a graphic that could portray the benefits of using Add-ons. I came to the idea of using a gauge-like graphic, similar to that of a speedometer which could represent the idea of power and performance. As you will see in the image itself, the gauge has a needle at full tilt, giving the idea that the more Add-Ons you have, the better performance and awesomeness will occur! To accompany the gauge graphic, I've added some green plus signs that appear to be in motion, floating off the gauge itself. I was trying to think of a generic way we could represent Add-ons...this was a take off of the green 'add to Firefox' ctas that appear on rollover – I would be open to using icons of featured Add-Ons as well – just thought this would keep things more generic. Please let me know how you feel about the idea and the look! Cheers, Matt
Attached image Add-Ons gauge concept —
Unfortunately, this is too similar a concept to our speed page, which is localized: http:mozilla.org/firefox/speed
Thanks Matt. Good start. My quick two cents here: * a meter like graphic might be too close to the speed/performance message in a way that would perhaps be confusing and not really differentiate this as a purely add-ons related graphic. * also, my understanding of add-ons is that the more you pile into your browser, the more bloated and crashy it can become... so more is not necessarily better when it comes to add-ons... especially when it comes to the browser's performance. * small nit: that particular color green there should be reserved for the download button I think.
Hi Matt, Seconding Tara's and Chrissies comments here. Add-ons and performance aren't related, and when they are, it's not necessarily for the best! The benefits I would be interested in communicating are the freedom and empowerment you get from being able to personalize your browser, and by extension your Web, to your own needs and tastes.
Hi guys, thanks for the feeback...my mistake on that. I'll give this some more thought and work out some ideas to have to you soon.
Hi guys, I've been thinking of a few more potential ideas that may communicate the idea of freedom to personalize. Please let me know if you think any of these may work. 1. License Plate graphic - Thought that we could have a closeup of the back of a stylized sports car graphic focusing in on a personalized license plate, which could read a variety of things, including Add-ons. The idea is to use that 'classic' idea of the sports car driving into a mountain setting along with the focus on the personalized plate to convey freedom. 2. Whiteboard - This could be a more simplified way to portray the idea of customization. Could simply have a whiteboard graphic with a variety of coloured markers and various doodles or sketched words on the whiteboard itself. The idea being that the sketched hand drawn images gives that personal touch look. 3. Ice cream sundae - This idea is leveraged from the Add-ons video, thought that the idea of having a bowl of plain vanilla, with a variety of topping choices around it, could give that feeling of choice and freedom, as well as tie back into the promo video itself. 4. Clothing wardrobe - I thought that using clothing and clothing accessories (ties, hats & shoes) could be a pretty universal way to depict personal freedom of expression. The graphic could be a variety of different quirky clothes on hangers or folded in open dresser drawers. Cheers, Matt
Thanks Matt. I think #3 is pretty appropriately abstract, has potential, and I like that it ties into the other video. Would be good to do some concept sketches first though to explore the idea further to make sure it works. I think it sounds good in theory, but is tricky to illustrate it right. It wouldn't be a simple graphic.
+1 on comment 44. Thanks Matt.
I agree that it could be potentially tricky in terms of design, the goal would be to not over complicate the graphic. All of the elements would need to fit closely together as one. I will start exploring some sketches and see what I can come up with. Thanks for feedback! Matt
Since we're moving away from illustrations, I'm not quite sure #3 is the best approach. Fligtar, what do you think?
The thing is, this bug is asking for an add-ons graphic...if we take illustrations off the table that removes a big potential option. I think the ice cream sundae idea could work, although I agree we should try some concept sketches before going into too much detail. Unless there are any other objections, let's give that a try.
I've been playing around with a possible layout for the sundae graphic...the sketch is very rough, but gives an idea of placement and the general elements that would appear...the idea would be to have the sundae topped and front and centre, with 3 topping choices receding into the background a bit. Visually I am thinking that the toppings would appear a bit softer as to not take away from the sundae, but still give the impression that they are there. Please let me know how you feel about this general layout.
Attached image Add-Ons sundae concept —
Thanks Matt. I will let John speak to the general style, but here's my instant reaction: - I find this a little too detailed and realistic vs what we used in the Add-ons video which seemed to work better here (something simpler and more abstract). Maybe use flat graphics? - Also I would advise scaling down the options and flavors as it could backfire. We don't want to suggest that add-ons make your browsing experience bloated and heavy. I would see something ligther, maybe a few chips or colored sprinkles on top of a simpler cone?
Thanks Greg. I've taken your suggestion of reducing the details quite a bit, and am in the works of a more simplified ice cream sundae bowl which I think will tie into the style of the video a bit closer. I hope to share that with you guys shortly.
Following up with my previous post, I've attached the latest concept, which has a more simplified look, and I think can tie into the Add-ons video style a bit closer. Please let me know how you feel about this look and feel.
Hey all, Matt - lovin the latest illustration there. Want to give some background to where that promo area is going. For our new style that is going to be launching soon, we're going to have promo graphics in that area always shown in the context of desktop, mobile, or both. What that means is that the promo image will always be on a screen on a device/monitor. Ty and Lee have already been building on this and I think this would be a good usage too. We could have a screengrab from the addons video on a landscape phone in the background and perhaps the sundae on a monitor in the foreground. I'll rough up a quick example of what we're thinking from the promo area and share in a few minutes. Just an fyi for all where we're going with this space.
Here's an example of what I'm talking about: http://cl.ly/013922322U0o2n1F2S3J Not exactly that, but along those lines. Also, for the sake of consistency, if we're going to go with a sundae we should get the illustrated assets from the video. I'm not trying to take work away from Matt here, we've been chatting on the sidelines and jamming on a solution. :)
+1 for comment #56. Apologies for the change, but I do think that works nicely with the overall direction the site is going in. Matt, is this something you could work up? Question for Greg: I know the intent here is to create a graphic that doesn't require a lot of localization, but as I look at this it seems that almost any metaphorical image we create (including this ice cream one) is going to be a lot more successful if plays off a related headline. Is that something we can do? Otherwise I worry that no matter how great the graphic is it won't make a ton of sense to people.
No problem on my end, I think the mock-up works nicely. If that's the direction we want to go with, then I can work out the final assets.
Sounds like a plan...let's do that then. Thanks Matt.
hi guys, Just want share the latest versions of the ice cream concept. Building on what Sean has established, I have mocked up 3 versions leveraging graphics from the add-ons video. I also incorporated them into a generic mobile device graphic as requested. Please let me know which version you like best... Once a version is selected.. I'm wondering if it is possible to retrieve graphics directly from the video, to ensure best quality. As of now, they are screen grabbed so they may appear pixelated.
Attached image ice cream concept 1 —
Attached image ice cream concept 2 —
Attached image ice cream concept 3 —
Hey guys I am sorry but I don't think this is working. - Mobile devices shouldn't be the focus here. I'd rather use a desktop/laptop illustration - I don't get customziation or personalization right now. The video provided context, but it's missing here. As a result, illustration doesn't make much sense to me. Definitely not thinking "add-ons" here. I see two solutions: 1/ We can try and re-inject some context by treating this slightly differently. I am thinking maybe the guy could hold a regular ice cream while "dreaming" of a cooler one, topped up one with sprinkles and the cherry on top. 2/ We move away from the ice cream concept and try something else. This is more work but will also have the advantage of being reusable elsewhere and have a longer life span.
I think these all look very nice, but have to say I agree with Greg that they don't really call out personalization (that's what I was trying to say in comment #57). I think option 1 from comment #64 could work if we have the right frame to use. Do we? Also, I still think that this would be most successful if the headline played off the image. Greg, is that even an option?
+1 Greg, what do you think about embedding the current addons.org lead content area. It's translated for many locales and does get updated by Fligtar's team on an ongoing basis. We could work with the AMO team to get that slider exported into an iframe or something else lightweight, and then benefit from ongoing updates, creating more continuity between the Firefox site, messaging, and Add-ons.
this is the area I'm referring to: http://www.diigo.com/item/image/1981d/3xjo
How about having 3 cartoonesque foxes that looks like the revamped firefox costume (http://blog.seanmartell.com/2012/02/29/the-rebirth-of-the-firefox-mascot/) that talk to each other and each of them would have different clothes that denote different lifestyles ?
Chrissie, the bug is "for locales where the Mobile promo and email sign-up graphics cannot be used.", that is the 70 locales that are not our top locales in terms of user base, products and support on the android market. addons.mozilla.org does not support many locales (about 20 really supported) and most of them are the bigger ones for which we already have a /fx page promoting Mobile.
John, re comment 65, I think that's an option indeed, provided we are not forced out of our way just to accomodate the graphics. CCing Dan to get his advice on add-on messaging.
As far as I am aware, re comment 65, we have 3 frames to choose from, a tablet, desktop and mobile device. All 3 are generic looking and have the ability to be in various angle perspectives. I can provide a mockup of what a screen cap from the video along with the accompanying ice cream cone would look like...similar to what was seen in the mobile device version. Otherwise, I would be able to take a stab at the graphic of an individual holding an ice cream while dreaming of a more awesome one as Greg suggested. My only concern is picking a style for this..do we use the look of the character from the video, but place him in a pose that will fit with our working space. Or do we come up with the look that ties into the rest of the site?..for this I think I would need to collaborate with Sean to find the necessary style.
Guys any new thoughts on this? Dan, feel free to chime in too.
Apologies...I had talked to Sean about this a few days ago and had a half-finished update in the bug but never completed it. Sean and I were both thinking that it would be best to not create any new characters for this graphic, since that's going in an opposite direction from the site as a whole. Perhaps we could show a screenshot of the browser with the add-ons pane open, and have some headline text explaining what add-ons are/can do? Or, what if we had a screenshot of Firefox with little explanatory notes pointing to the various elements that have been customized? I realize that neither of these ideas are exactly perfect, but maybe they're useful as thought-starters. More importantly, the big thing I'm having a hard time wrapping my head around is how we can communicate what add-ons are without using any text (b/c of l10n concerns). The deeper we get into this, the more difficult that seems. Greg, maybe we could chat in person while you're in the office this week.
I like the idea of using the add-on pane. However, I hear from Pascal this content is not localized everywhere ,especially in longer tail locales we are looking at here (it pulls content from AMO which is not available in as many languages as the browser/moz.org). So I see two options then: - use screenshots (does the job but imperfect because not totally localized) - use something simple and generic illustration. How about the puzzle icon we use for extensions in the add-on pane (also serves as favicon)? Think my preference would go to #2 for the sake of simplicity, and so we can reuse that in the future. Dan, any thoughts on this?
Just so I'm clear, what will the corresponding headline be on this page? Will it be a) localized and b) related to add-ons, or a more general Firefox message instead?
Hey John. The headline will be localized of course since this is only for non en-US locales and will be focused on add-ons. We are looking to re-use an existing string formerly used on the /fx page for one of the minor promos. I am researching the exact copy as it's no longer on the site but it went along the lines of "Customize Firefox with add-ons and make it your own".
Ah, that helps, thanks. In that case, perhaps an artful combination of the iconic puzzle piece with a computer screen/browser window might work nicely. How does that sound?
I like that option (comment #77). I think you can also take a similar approach and do an artful combination of a computer screen/browser window with illustrated add-on icons (similar to the finale of the AMO video). You can either use those same illustrated icons (which ties into the video nicely), or do new ones in a style that's better aligned with the new theme. I like the iconic puzzle piece and it may work just fine, but I also like the idea of somehow showcasing a wide array of add-on functions, similar to how the AMO video was done. It feels more inspiring and fun. You can insert the image inside the browser screen, or leave it outside to suggest the endless world of add-ons we offer to customize your experience --> though you'd need to show some webpage inside the browser... which would open up the l10n problem unless you abstract the browser contents (similar to how we did it in the AMO video). Just a thought. I also like the device spread Lee has done for the devices page which includes a laptop/stationary monitor we can probably use here. His is displayed at an angle that naturally makes the browser contents a little hard to see (so we can show a page without worrying about localizing the text cause you can't read it anyway). Again, just another potential option. Here's the link to that graphic: http://cl.ly/081h3L0y1E2h1O3t0j0P Either way, looking forward to seeing the next iteration. (images attached for reference)
Attached image AMO video reference —
Attached image Devices page reference —
+1 on comment 78. The icon wall from the AMO video could be a good way to do this, either inside or outside the browser screen. Also, tilting the screen so l10n isn't an issue would be a big win.
Seems like we may be coalescing around an idea then? Matt, does this give you enough to work with, or do you want more detail. Also, breaking news: the /fx page is going to be getting a new look at the end of the month, so that will need to be taken into account here...same basic concept, but the promotional area we're working in is a bit difference. More info, and a PSD to start from, here: https://bugzilla.mozilla.org/show_bug.cgi?id=730979
Attached image cropped image reference —
I think a cropped monitor/browser screen with an array of add-on icons behind it (artfully presented/cropped) would work nicely. Especially with the new /fx layout which has a natural break in the page (Slater's bug references the same PSD I posted yesterday fwiw) For the contents of the browser, my personal 2 cents is that the add-ons page is most appropriate since it echoes the message better than any other random page we put in it. Another thing you can do with that is to actually show one of the add-on icons on screen (similar to the AMO video where we see a chat bubble representing a "translator" add-on (while the rest are in the background). Also, I've asked the agency to delivery the raw/layered illustrations from the video (focusing on that end segment) so you can use them if needed. ETA for delivery of those files is Monday.
thanks guys, I think this idea could be quite effective from a visual perspective. Seems like there can be some dynamic arrangements with an angled and cropped monitor as a focal point. I can get moving on this on Monday once I receive the illustrations.
Hey Matt, it might be worth trying to hack together a mockup (to test the concept) vs. waiting for the files. The files are on a slow moving path from the agency in London, and I have no firm ETA on it. So, rather not slow down the bug to wait for those. Perhaps you can still take the PSDs we have, and the images from the video (which you can screenshot from a high res version of the video) and see if the concept works in low res. Would you agree? Here is the high res file of the video if it helps: https://www.wetransfer.com/dl/RP2O3Ge0/fa32485087ed8926459aef8984049ca8529df0b3ab899e27045f20a3c4f841e18bcd00e12bb776c
+1 for comment #85 Also Matt, here are some standard illustrations we've been using to represent the various devices...you might find these useful as well: http://cl.ly/1c3h2N2M0v0b45160I1v
No problem, I should have enough to get things going in terms of layout with the PSDs and some of the screnshots. I will work on some mockups and get that to you guys soon!
Hi guys, I've added a couple of mock-ups using 2 different screens as well as portraying the icons in two different manners while making use of the monitors perspective. Things are lacking a bit of crispness due to the quality of some of the screen caps, but this gives you a general idea in terms of positioning. Please let me know what you think. Thanks, Matt
Nice work! I really like 2b.
I think these are looking really cool, just one question: Is it weird to be showing a page (AMO) on the monitor that has the old layout and old tab on a page that's using the new layout and tab?
I prefer 2a personally. Think the add-on page seems more action-oriented to me vs AMO home page which could be any other website (if I saw it for the first time, the purpose of this page would be less clear to me). Re: Matej's comment 94, can we remove / hide the grey tab? This way we can keep the page and avoid the vintage touch!
Hi guys, Just checking in to see what the next steps are for this. Glad everyone is liking the look of the versions with the add-ons icons within the foreground. Once I receive the layered assets from the video I can swap in the quality res graphics for the mockup versions..won't take much from my end of things.
Thanks Matt. Tara, any luck on finding out when we can get those assets? Or, given the situation at Poke, should we figure out a workaround?
Great work Matt. I definitely prefer options 2 vs. 1. I also like 2a the best, especially since it focuses on a single add-on and the visual style fits in better with the icons hovering around it vs. the AMO homepage which feels rather busy to me. I really like the approach of having the icons in the background and foreground (they also remind me of apps). It's nice to see "Add-ons" more prominent and in focus on the screen, along with an actual add-on icon to draw that connection. wrt to the mozilla tab --> Ideally we'd tweak the contents of the screen a bit, so the source files will help with that. I think it would also be worth re-organizing some of the add-on icons so that we are highlighting icons that better align with actual/more familiar add-on functions. Things like the camera and calculator instead of the fish/flower. Just my 2 cents. no ETA on the source files yet, sorry. The agency has undergone some staffing changes that impacts this deliverable. I'm on it, but it will likely take a few days to recover these assets. I'll keep you posted.
Sorry, but it will likely take more than a few simple days to receive those source files. We are having some issues with the agency, and it's out of my hands. The style isn't terribly difficult to re-illustrate from scratch, but I suspect it's not worth our time to do that. I'll keep pushing on the agency. Just wanted to share this update.
For the most part the issue with the crispness of the various add-on icons can be solved be recreating the bubble that contains them, and placing them within their proper perspective. I think we will be ok with the resolution of the actual icons themselves, especially the background icons which I feel work since they are faded out. For the foreground icons, I think it wouldn't take more than a couple of hours to recreate them...if everyone is ok with this option I can get started on them.
We may have to do that, but lets decide tomorrow (Thursday). I'm waiting to hear an update from the agency.
Hey Matt, thanks for your patience here :) Please proceed on re-illustrating the elements that you need in order to polish the graphics for web. I had chatted with Greg some time ago about which icons would be better featured up front (touched on in comment #98). So, Greg if you can confirm/advise on which ones you want featured and clearly lay out any other details you'd like changed... Matt can dive into the graphic and tweak. Lets plan on closing this bug no later than this week. Thanks.
No problem here.. I can get moving today on recreating some of the ones that were suggested to have in the forefront.
Attached image addons_video_concept —
Hey guys, Here is the latest version taken from the 2a concept. I've reordered some of the icons to give focus on the more appropriate ones, ie. camera and calculator. If there are any others that you feel should be used in the forefront I am able to make the changes relatively easy.
Thanks Matt. This version works for me. As Tara pointed out, it's important that icons reflect feature enhancements as well as media consumption, but I think we strike a good balance with the latest comp in attachment 612074 [details]. This works for me. Well done Matt!
Looks awesome, thanks Matt! (Although I'm disappointed we weren't able to get to 200 comments in this bug.)
hmm, I thought we had finalized copy for this, but I can't seem to find it. I was hoping Matt could update the mockup with that before delivering the PSDs so everything is updated. But that's something that's easy to do in implementation. Greg, Say the word and we can close this out. Thanks Matt.
Thanks guys! glad you're liking it..I'm pleased with how it turned out. For the copy, It wouldn't take much for me to work that in...if there is finalized copy available I can place that in today.
Just to confirm, is the associated copy for this: 'Customize your browsing on both mobile and desktop' ? That was copy that is found within the PSD I was given under an Add-Ons layer.
Sorry guys, I've gotten a little lost in this bug and I'm not sure what copy goes with this. Is this still for the /fx page? Because the last few mockups have been the Devices page. Let me know I can either try to dig it up or create something new (though the copy in comment 109 looks good to me). Also, re: comment 106, that sounds like a challenge to me. ;)
Comment #76 - some basic copy direction from Greg Comment #82 - update from John regarding new design of /fx page Matej hope that helps :) either way, It shouldn't hold us back from getting this pushed into implementation. I just thought it would be helpful to see the graphic with the right copy and make final tweaks as needed. Not sure who owns next steps, but perhaps Greg can update the appropriate bug (which seems to be bug #704564) with the final assets and next steps when he is ready.
Hopefully I can help with comment 106! Don't mean to be a joy-killer but was wondering if the following (minor) tweaks were possible. If not, or if they require too much work, then let's forget them: - can we replace the chat bubble on the page with one of the icons in the background/ on the wall? (Maybe the color palette? Should be one that is not currently in the foreground so one understands this add-on hasn't been picked yet) - is it possible to take away some of the duplicate icons on the wall, create new ones or at a minimum move around those that aren't duplicated to give them more visibility (link chain, hand, eye), and hide the duplicated one a little more? Re: copy, Matt: let's not use what was on the psd layer, this was created for another page and isn't localized. As per comment 76, we were planning on using an existing, translated, string. I asked Pascal to "excavate" them for us and need to ping him again. Maybe we can move forward without it? I swear, as soon as the little tweaks above are dealt with, we can close this bug, and pop some champaign. Thanks again Matt. I really like how this turned out too.
That's no problem, I can move around some of the icons to ensure less repetition. If I was to swap the the flower icon to where the colour palette now sits in the background to the right of the monitor..that would work? Also I can move the chain, eye and hand to replace some of the foreground duplicates, ie the camera, ghost and exclamation point.
Sorry Greg, I misread, you were referring to the page on the monitor. I can definitely swap out the speech bubble for the colour palette.
Attached image addons_video_concept_2 —
I've added some variety in the background icons, and also replaced the bubble icon with the palette on the monitor page. Please let me know if this is closer to what you had in mind.
Looks good to me. Thanks Matt! I'm afraid we might have to close this bug now... Thanks everyone.
Boom -> closed. Lets take shots. Matt, please post the final files. Greg, please submit the file to the appropriate next bug for implementation. I'll assume you're good on copy unless you ping back. Thanks all.
Status: ASSIGNED → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
Attached image Icon Set —
Matt sent the final files to me, which I forwarded to Greg. So, we're officially done here. I'm also attaching the full/original icon set just for future reference in case we need to use them for similar promo graphics.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: