[NativeUI launch] about:home takeover Snippet

RESOLVED FIXED

Status

Snippets
General
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: Jaclyn Fu, Assigned: ckoehler)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

6 years ago
Tracking bug for progress on about:home takeover Snippet project for Firefox Android launch in early June

Summary from today's meeting regarding technical limitations:
-iframes could potentially break Firefox 
-QA super important 
-experience should be user invoked 
-not show up more than once
-less than 200k payload 
-Animation in CSS 

Next steps: Barry to meet up Creative team to start generating ideas that fit into technical limitations 

Thanks all!
(Reporter)

Comment 1

6 years ago
Hey Barry, any update on the creative brainstorming for this?

Comment 2

6 years ago
here is a google doc with the ideas I have generated so far:

https://docs.google.com/document/d/10HxBaBv1kDaBiug8yCMSaZulfd_pQTM6_7K9AziPlLs/edit

next steps are to get more exploratory with the above ideas.

Comment 3

6 years ago
Adding Ty and Matej per discussion with jSlater. 

CMore, based on the brainstorm doc do you think that 3-4 weeks of dev is enough to get those built? we will need to nail down a few more bits to keep things under the 200k size limit.

Jaclyn a few things we need to consider:
where does the snippet direct users after they see the animation?  
   two options:
   - find out more (this would take them to mozilla.org/mobile)
   - download now (this would take them to Google Play page/Firefox for Android) 
   - both links visible and it is users choice.

do you want to have more than one snippet in the rotation that is directing users to the announcement?
we are planning on doing an HTML5 "video" walk through of the feature set and could use assets from that as a second promo.
(Reporter)

Comment 4

6 years ago
I would like to direct to Firefox's page on the Google Play Store - I'm wondering if we could set up tracking that could measure conversion rates (click on snippet -> install) 

For GA Firefox, this about:home takeover snippet would only show to users once, and after that, they will see a more generic mobile promo snippet (Bug 724107)

Comment 5

6 years ago
Hi Barry and Jaclyn.

Just to give you an update on the status of this project. Engagement leaders are in the process of prioritizing this project with the rest of our projects. The prioritization process should be done by next week.

A few initial comments and questions:

* Who is the target audience for this snippet and what action do you want them to take?

* What Firefox channel (release, beta, aurora) and what locales will this be pushed out to?

* Some of the animation described in the Google doc is a magnitude higher than the experience that we have on the team. We have two front end web developers and two back end web developers and this team is new as-of 3 weeks ago. Everyone has some experience with animation, but not at the level described in some parts of the Google doc.

* We still could do a "takeover" of the about:home page, but to do it with our current team, we would have to simplify the animation. 

* Interacting and moving elements around the about:home will not be as difficult as more complex animations. For example, the Android robot moving its head would require knowing how the 2D robot would move like in a 3D space.

* The limiting factor for this snippet is going to be the max of 200k for the entire payload (images + css + js). The images used in the animation will consume most of this file size and complexity of the animation has an almost direct correlation to the file size.

* Is there budget available to outsource the development of the animation? We would define requires in a way that an external agency could do the work and we would then test it on our dev servers and have QA review the code?

* We will have to talk to legal about any copyright concerns of using the Android robot and its likeness in ways that may have not been intended by Google. More here: http://www.android.com/developers/branding.html

Thanks!
(Reporter)

Comment 6

6 years ago
> A few initial comments and questions:
> 
> * Who is the target audience for this snippet and what action do you want
> them to take?

Firefox desktop users with Android interest; we want them to learn more about Firefox for Android (click through to Google Play Store) 
> 
> * What Firefox channel (release, beta, aurora) and what locales will this be
> pushed out to?

Release, but would also like Aurora and Beta users if possible since they are our early adopters and likely to have Android phones. Locales: US, UK, Germany, France, Spain, Italy, Japan and S. Korea

> 
> * Some of the animation described in the Google doc is a magnitude higher
> than the experience that we have on the team. We have two front end web
> developers and two back end web developers and this team is new as-of 3
> weeks ago. Everyone has some experience with animation, but not at the level
> described in some parts of the Google doc.
> 
> * We still could do a "takeover" of the about:home page, but to do it with
> our current team, we would have to simplify the animation. 
> 
> * Interacting and moving elements around the about:home will not be as
> difficult as more complex animations. For example, the Android robot moving
> its head would require knowing how the 2D robot would move like in a 3D
> space.

Barry - any help here?
> 
> * The limiting factor for this snippet is going to be the max of 200k for
> the entire payload (images + css + js). The images used in the animation
> will consume most of this file size and complexity of the animation has an
> almost direct correlation to the file size.

Barry?
> 
> * Is there budget available to outsource the development of the animation?
> We would define requires in a way that an external agency could do the work
> and we would then test it on our dev servers and have QA review the code?

I can find out. Barry, what about the production agency that's also do the launch video?
> 
> * We will have to talk to legal about any copyright concerns of using the
> Android robot and its likeness in ways that may have not been intended by
> Google. More here: http://www.android.com/developers/branding.html

Filing a legal bug 
> 
> Thanks!

Thank you!
(Reporter)

Comment 7

6 years ago
Took a look at the copyright concerns of using the Android logo and it will be fine as long as we give proper attributes to Google by attaching this text at the bottom of the page:

"Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."

Comment 8

6 years ago
(In reply to Jaclyn Fu from comment #7)
> Took a look at the copyright concerns of using the Android logo and it will
> be fine as long as we give proper attributes to Google by attaching this
> text at the bottom of the page:
> 
> "Portions of this page are modifications based on work created and shared by
> Google and used according to terms described in the Creative Commons 3.0
> Attribution License."

Yeah, and it also says "Can be used, reproduced, and modified freely in marketing communications." and we need clarification about what is "marketing communications". Does that mean marketing of the Android device/platform, or does it mean we can marketing our browser on an Android device on freely modify their brand for to promote our product. Regardless, we will still have to give proper attribution as you mentioned.

Updated

6 years ago
Assignee: nobody → ckoehler
(Reporter)

Comment 9

6 years ago
Wanted to do a quick check in what the status of this prioritization is. Are we good to go? Noting that we're thinking of rescoping this to launch in August rather at right at release
(Assignee)

Comment 10

6 years ago
(In reply to Jaclyn Fu from comment #9)
> Wanted to do a quick check in what the status of this prioritization is. Are
> we good to go? Noting that we're thinking of rescoping this to launch in
> August rather at right at release

This has been prioritized as a P1. I've assumed the role of technical project manager and we'll have a format kick-off early next week.

Do you know when you'll have a decision about changing the release date?
(Reporter)

Comment 11

6 years ago
For sure it won't be during the first week of release, likely to be August (can give you a better idea next week)

Thanks!

Comment 12

6 years ago
Hey guys.  Injecting myself into this bug because I think it's an awesome project and something that I had also proposed.  Few quick thoughts and humble opinions:

>> Love Barry's initial doc of ideas. 
* I think the direction I preferred were the ones that have the Droid enter the scene and gracefully introduce a mobile device illustration with the FF logo on it/in it. I don't think the animation needs to be super complex for it to be effective.

>> building off of that:  
* Having the Droid pull down a banner that has a mobile phone illustration on it, but the screen contents are cut out so that as the banner comes down and over the FF logo, the two combine to show a phone with FF logo in it.  This is a little more of a crafty direction that could also work well with the 2D nature of the Droid character.  You could also dim the lights (as Barry suggested) in the end and highlight the promo as a finale.

>>opting in / repeat views:
* I personally don't spent tons of time on the about:home page before jumping into a search query.  It might be worth having something already very different on the page to let folks know this is a new experience -- giving them a chance to pause before animation kicks in.

* What that in mind, It's a pity to come up with a cool animation only to show it once and never again.  I realize we don't want to annoy people or push the experience on to them (again and again), but how about a similar approach to what Google does --> including a subtle nudge/marker that the user can click on to activate the animation. Perhaps they see the animation by default on session #1, but get the chance to opt into viewing it again the next time.  If it's really cool, I'd certainly want to watch it several times.  Maybe I miss it the first time around, I'd like to see it again, or want to share it with a friend (etc).

>>Droid character/creative license:
* The Droid character is pretty flexible and we have used him on marketing materials in this capacity before.  The MWC video animated him as part of the FF for Android chapter.  I will find the video and share as a point of reference.  Doesn't hurt to check with legal, but I am pretty sure what we're proposing here is very "ok".

Comment 13

6 years ago
Created attachment 622952 [details]
Sketch of thoughts

Humble sketch, of humble thoughts: 

* Banner rolls down with FF on Android promo.  Android character can be animated in a number of ways.

* Phone rolls in over the FF logo.  Keeping the canvas crisp and clean otherwise and not interfering with the search box.

In both cases the FF logo would ideally be in the same default placement as it is now (though it may need to be scaled down a bit).  And the phone comes over it (sort of an artful way of combining the two) + Droid whimsy
(Assignee)

Comment 14

6 years ago
Thanks for the enthusiasm and ideas, Tara!

I think at this point we need to concentrate less on the details of the design and give Craig some time to figure out what's possible. This is very new territory for us, so it's important the developers have some time to prototype so we know what our our constraints are before we start thinking about the design too much. 

Craig should have something to demo for us during the upcoming Engagement offsite.

Comment 15

6 years ago
Sounds good.  Thanks :)

Comment 16

6 years ago
adding aubrey from particle

Updated

6 years ago
Blocks: 768134
I feel like we should keep the copy pretty straightforward here, to let the animated elements shine, but we should also be clear about what we're asking people to do, since this is something new for us. Barry and I were talking about maybe having the same copy for each snippet to see which animation performs better, but I think a different snippet for each would work as well. Here are some options:


Put Firefox on your Android. Send a text message link to your phone.

Put Firefox on your Android. Get a text message link on your phone.

Text a link to your phone to get Firefox on your Android.

It's never been easier to put Firefox on your Android. Just send a text message link to your phone.

It's that easy to get Firefox on your phone. Just send a text message with a link to your Android.

Comment 19

6 years ago
Let's also test a version that doesnt call out the SMS portion.  Most important element for me in the snippet text is to get them to the landing page... and then they're exposed to the SMS CTA.

Comment 20

6 years ago
Sorry - let me articulate that better.  Let's first sell them on the value of the product. "Fast Smart Safe"  and then talk about delivering the product once we've gotten them to the landing page.
(In reply to Winston Bowden from comment #20)
> Sorry - let me articulate that better.  Let's first sell them on the value
> of the product. "Fast Smart Safe"  and then talk about delivering the
> product once we've gotten them to the landing page.

That makes sense. I'd still like to keep it pretty simple, though, and have it tie in to the speed and/or simplicity of getting it on your Android, as demonstrated in the animation. What do you think of one of these?


Fast. Smart. Safe. Put Firefox on your Android phone.

It's never been easier to put Firefox on your Android phone. It's fast, smart and safe!

It's that easy to get the fast, smart and safe mobile browser on your Android phone.

Comment 22

6 years ago
Thanks, Matej. I like this approach.

Comment 23

6 years ago
Agreed with the overall approach. The 2nd line in comment #21 makes it sound like the process of putting Firefox on your phone is fast, smart and safe...that it may be, but I don't think that's the interpretation we're really pushing for.
(In reply to John Slater from comment #23)
> Agreed with the overall approach. The 2nd line in comment #21 makes it sound
> like the process of putting Firefox on your phone is fast, smart and
> safe...that it may be, but I don't think that's the interpretation we're
> really pushing for.

Ah, good point. Would you like to see an alt for that line, or should we just use one of the other ones instead?

Comment 25

6 years ago
An alt would be great - thanks!
OK, here are some new options:


Fast. Smart. Safe. It's never been easier to put Firefox on your Android phone.

Firefox for Android is fast, smart and safe. It's never been easier to get it on your phone.

Firefox for Android is fast, smart and safe. Now it's easier then ever to get it on your phone.
Whoops, typo in the last one in comment 26:

Firefox for Android is fast, smart and safe. Now it's easier than ever to get it on your phone.
Barry and I had talked about having the snippet copy come up after the animation happened, but John brought up a good point last week that not everyone will hover over the Android dude, in which case they wouldn't see the CTA. That being the case, I think it's probably safer to just keep one line per snippet. What do you think of these:

Fast. Smart. Safe. Put Firefox on your Android phone.

Fast. Smart. Safe. It's never been easier to put Firefox on your Android phone.

Firefox for Android is fast, smart and safe. Now there's a new way to get it on your phone.

Comment 29

6 years ago
Thanks Matej.

All feel consistent with the existing campaign and are non-specific to the upcoming animations.  Any of these would associate well with each animation and has a much more specific call to action.  Is the next step sending these of to localization?

Comment 30

6 years ago
+1 to 

Fast. Smart. Safe. Put Firefox on your Android phone.

Fast. Smart. Safe. It's never been easier to put Firefox on your Android phone.

---

In terms of localization, the SMS will only be en-us.  The plan is to use the following for other locales: 

Fast. Smart. Safe.
Get the mobile browser that's got your back. 

This has already been localized in:
fr, it, ja, nl, pa-IN, ru, zh-TW, cs, da, de, es-ES, fi, ko, nb-NO, pl, pt-BR, pt-PT

Comment 31

6 years ago
Also, only en-us will receive SMS landing page.  Other users will be directed to Google Play.
Since we have three animated snippets, we should have three copy variants. Why don't we use the l10n one in en-US as well.


Fast. Smart. Safe. Put Firefox on your Android phone.

Fast. Smart. Safe. It's never been easier to put Firefox on your Android phone.

Fast. Smart. Safe. Get the mobile browser that's got your back.

Comment 33

6 years ago
+1

Comment 34

6 years ago
Christie, are we at a point where we can get the push animation set up on staging?  We'd like this to be pushed live on 9/10 in conjunction with another project we're working on with web dev.
(Assignee)

Comment 35

6 years ago
(In reply to Winston Bowden from comment #34)
> Christie, are we at a point where we can get the push animation set up on
> staging?  We'd like this to be pushed live on 9/10 in conjunction with
> another project we're working on with web dev.

Yes, I believe the code for the Push snippet is complete. I'll file another bug for that. 

Will you clarify which text goes with each snippet?
(Assignee)

Updated

6 years ago
Depends on: 785263
(Assignee)

Updated

6 years ago
Depends on: 785264

Comment 36

6 years ago
For EN-US:

For Push, let’s use:
Fast. Smart. Safe. Put Firefox on your Android phone.  

For Play:
Fast. Smart. Safe. It's never been easier to put Firefox on your Android phone.

For Shop:
Fast. Smart. Safe. Get the mobile browser that's got your back.

For localized versions, they’ll all be the same.  We’ll use the copy we already have localized which is: 

Fast. Smart. Safe. Get the mobile browser that's got your back.

That’s localized in:

es-ES
Rápido. Inteligente. Seguro. Obtén el navegador para dispositivos móviles que te protege. Obtén Firefox para Android.

de
Schnell. Intelligent. Sicher. Holen Sie sich den mobilen Browser, der Sie beschützt.

it
Veloce. Intelligente. Sicuro. Installa il browser mobile che si preoccupa solo di te.

ru
Быстрый. Умный. Безопасный. Установите мобильный браузер, надёжно прикрывающий вашу спину.

cs
Rychlý. Chytrý. Bezpečný. Získejte mobilní prohlížeč co vám kryje záda.

ko
빠르고. 똑똑하고. 안전한.  새로운 모바일 브라우저가 돌아왔습니다.

fr
Rapide. Sûr. Malin. Adoptez le navigateur mobile qui assure vos arrières.

nl
Snel. Slim. Veilig. Kies de mobiele browser die u beschermt.

pt-BR
Rápido. Inteligente. Seguro. Use o navegador que se preocupa com você.

pl
Szybka. Innowacyjna. Bezpieczna. Pobierz przeglądarkę, która jest po Twojej stronie.

nb-NO
Rask. Smart. Sikker. Last ned den mobile nettleseren som passer på deg.


You can find those strings here:
https://bugzilla.mozilla.org/show_bug.cgi?id=765392
(Assignee)

Updated

6 years ago
Depends on: 787202
(Assignee)

Updated

6 years ago
Depends on: 788927

Updated

6 years ago
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.