Closed Bug 649460 Opened 13 years ago Closed 13 years ago

Fx4 upgrade INFLUENCER campaign - localize landing page design

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: gjost, Assigned: tshahian)

References

Details

(Whiteboard: [L10N]) 

The current landing page for the Fx4 upgrade INFLUENCER campaign cannot be localized as is and requires adjustements for the L10N team to get started.

The current page can be found here (see bug 643965 for more information and context): https://www-trunk.stage.mozilla.com/en-US/firefox/webhero/


Here is an initial list of what we would like to change in order to facilitate the localization effort (I will let the l10n team chime in for more technical guidelines or anything I may have missed):


>>>>>> L10N blockers

1- background image
Using one background image on the entire page does not work as longer texts in certain locales might cause overlaps and the overall graphics to break. The visual elements must be 'floating' in order to adapt to the length of each paragraph.

2- checkboxes
The "check" visual is not universal (it even 'no' in certain languages). Is it possible to replace the checklist visual it with something else?

3- change the character (Curly?)
If possible, it would be great to change the green character's clothes? We have received feedback that it looks a little too "US college boy"-like. I know this is a difficult one ;) Maybe have him wear trousers? If this is too complicated, can we maybe use another character or no character at all?

4- No text in images
"Be a web hero" is in the image, which makes it difficult to translate this string.


>>>>>> Other suggestions (lower priority)

- The grey 'crowd' banner stops the page flow. On small/er resolutions, it even sits at the bottom of the screen and could lead the user to believe that it marks the end of the page.

- The orange 'Be a web hero' bubble looks like a clickable CTA (which defintely makes sense if the user thinks it is the end of the page, cf. above-mentioned comment)

- The key information is further down the page, maybe there is a way to signal the page flow in a more prominent way. Maybe emphasize the breadcrumbs and and reduce / get rid of the crowd visual?

I realize all these changes impact the page significantly but they are blockers for the L10N team. If we are to address the first group of comments, maybe we can take this opportunity to make the other changes too?


> Timing: we were hoping this could be done by Apr 19. Let me know if this is not realistic.
The last paragraph was not crystal-clear, let me rephrase: only the first group of comment is a blocker, the others are suggestions only.
Thoughts:
- agreed that using a single background image for the entire page isn't ideal
- do you have any suggestions as to something more universal that could replace the checks?
- changing the character is non-trivial. Will let Sean comment more on what is and isn't doable there, but that's a very big one and would likely alter the scope & timing here.
The single background image was necessitated by the design, specifically the continuous dotted line that meanders all the way from the top to the bottom of the page. Breaking that line across several images means that if any one section changes height, the line won't properly meet itself in the next section. If the line is a single image and other elements layer over it, the elements can shift away from the line as the text reflows and blocks resize. I tried really hard but it was frankly impossible to keep the elements independently movable and still carry that single dotted line through the entire page. 

If we're willing to give up the dotted line, everything becomes much more flexible. I can rebuild the page with separate graphics pretty quickly.

I can also replace the "Be a Web Hero" headline with live text. It was originally simpler to make it a graphic and I didn't know this page would need to be localized. The headline text may have to be resized for some languages to fit within the bubble, but that can be done with some language-specific rules in the style sheet.
Thanks Craig.

Sean, what's your recommendation?
The edits in comment #3 sound good, yeah. 

I designed the grey blocks to have a top and bottom graphic and the middle height could be flexible if needed. 

I was thinking the dotted line could be SVG as found on the tour pages, but if the points can't be dynamically changed for localization sizing, maybe we could have the dotted in SVG for english?

If you want to create the "be a web hero bubble" in CSS (orange rounded corner field + box-shadow darker orange shadowing) and adding the extra talk bubble horned curve as a graphic, that might work. that way it is somewhat flexible.  Don't need to skew the bubble as in the mockup, just have the corners a similar radius in their roundness.

Let me know if that sounds doable.
Thanks guys. I realise some of these changes might be difficult or sub-optimal but this underlines the need to conceive and design for l10n from the start.

By not doing that, we are cutting off 60+% of our users.

Pascal, do the proposed changes sound good?
Assignee: nobody → tshahian
Component: www.mozilla.com → Design
Product: Websites → Marketing
QA Contact: www-mozilla-com → design
Version: Firefox 4 → unspecified
Blocks: 650845
I vote for not using the dotted line on localized versions, using border-radius instead of images is good for l10n, thanks
Also, seems like the Facebook-optimised layout (http://www.facebook.com/Firefox?sk=app_176093342441461) would work great for l10n. Maybe we could recycle this one (pending a few design changes - e.g. replace checkboxes with numbered list)?
talking with Mayumi and Laura, I will work on the influcencer/direct campaigns after the urgent Aurora work (localized download pages, billboard work, snippets) so probably next week
Guys, can we get started on this? Sean and Craig, do you have everything you need to adapt the design and integration of the page?
At this point I've done most of the work, I'm only waiting for a new mascot illustration (or a decision not to change the mascot?) and final word on the checkmark bullets (switch to numerals? arrows? thumbtacks? some other symbol? no bullets at all?).
At this point we should leave the mascot as is. He's been used by us before and changing him at this point would take too much time. He's used on the firstrun and fb versions of this page as well.
Agreed with comment #12. Also, I think the checkboxes can stay as is.
+1 to checkboxes staying also. Thanks!
The page has been restructured in r87986. Key changes:

1. The "Be a Web Hero" text is now live text, though the orange balloon is still a background image. We'll probably have to add language-specific style rules (using an attribute selector) to adjust the font size for some languages, either larger or smaller as needed. We can tackle that on a case-by-case basis as the individual translations come together. An example:

[lang="de"] #hero .page-title { font-size: 90px; }

or something similar, adjusted to fit the space.

2. Each block is now a free-floating chunk that can now accommodate differing amounts of text. 

3. The dotted line is, alas, no more. I tried a few tricks with layering images and even scaling an SVG line, but nothing worked consistently. Any change in the number lines of text in any one block moves all subsequent blocks up or down and things no longer align along the path. If that dotted line is *absolutely essential* I can try a few more tricks but the potential solutions are becoming more and more complex and probably not worth it.

One thought is that without the dotted line, the eye isn't drawn to the "Share Firefox" block as obviously as it was before (with the line literally leading your eye directly to the end of the trail). Maybe it needs a subtle box drawn around it? Maybe just a bit of shading or texture (like another spattering of halftone dots). Just something to help that call to action assert itself a little more.
Hey guys, what's the status on this bug?
(In reply to comment #16)
> Hey guys, what's the status on this bug?

The page was restructured and has been in production for some time, already localized in at least a few languages. There were no further comments on what to do about making the "Share Firefox" call to action stand out more in the absence of the line. So as far as I know there's nothing further to do. If everyone's happy I say we call this one done.
Sounds good to me.  Will let Greg (and others leading this) comment/confirm and close.
http://www.mozilla.com/fr/firefox/webhero/ as an example of page on production, we have about 15 locales there. The only change forecast l10n-wise is updating "Firefox 4" mentions to remove the version number.
My comments:
- we need to remove the 1st sentence of the 2nd checklist item as it redirects to unlocalized videos ("Take them to school. Send a video that teaches them how to install Firefox on their Mac or PC")

- we need to remove the 3rd checklist item. Again this content hasn't been localized so it will be of no help to the users.

- The CTA "Share Firefox" hasn't been properly translated and was switched from "Share Firefox 4 with your friends right now!" to "I helped a friend upgrade to Firefox 4". Do we know the reason for that? I would rather stick to the initial copy as the second one is not a clear call to action.

Also, we need to get the SUMO "how to install Firefox on Mac / PC" blurbs updates as some still refer to 3.6... CCing Kadir to the bug.

>>> Kadir, can you provide a quick status update on this?
>- The CTA "Share Firefox" hasn't been properly translated and was switched 
> from "Share Firefox 4 with your friends right now!" to "I helped a friend 
> upgrade to Firefox 4". Do we know the reason for that? I would rather stick
> to the initial copy as the second one is not a clear call to action.


Interesting conversation on the word "Share" with Pike while we were at the balkans meet up.   He suggested there was wasn't a really good translation for the word "Share" in German and the language expresses things more clearly in terms of it is yours, or it is mine, or we will split it, or we jointly inhabit it or use it.

A lot of this kind of usage doesn't make sense for the kind of concept we are trying to express in this campaign.

http://www.vocabulix.com/translation/german/share.html
and google translation of some of those terms back to english help to highlight the problems that people have struggled with in translating the term "share."

We might need to rethink how this campaign would be better tuned to German and maybe other markets.  Maybe trading the concept from

 "Share Firefox with a Friend" for "Give Firefox to a Friend"

or some other terms that translate better with the ideas that we are trying to convey.
We can pursue this conversation on the copy bug 650843.
Closing this bug as the design part is done.

Thanks everyone.
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.