1099320 - [Snippet] Hello snippet - designs

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Lizz Noonan - she/her (:lizzn)]

>>Project/Request Title:
[Snippet] Hello Launch Animated Snippet

>>Project Overview:
Requesting an animated snippet for the Hello launch, to deploy Jan. 13. Filing as a placeholder so we can assign on creative. Fabio will add more details shortly. 

>> Creative Help Needed:
Copy:    No 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
Snippet animation

>>CTA and Design:
TBD

>>Creative Due Date:
2014-12-22

>>Launch Date:
2015-01-13

>>Mozilla Goal:
Firefox Browser

>>Points of Contact:
[e-mail], [e-mail], [e-mail], [e-mail], [e-mail]

Comment 1

[Fabio Rios [:frios]]

Attachment: Hello flow

We are in need of a few assets for the Hello launch in January. 

- Date needed: Jan 6, 2015.

- Assets: video and graphic

The idea: see attachment

to use a looping video of the two people cideo chatting on their computers. There is no sound or dialogue. The people in the video are either chatting with each other to trying engage with the user by waving hello. The purpose is to catch the attention of the user on about:home and intrigue them to click and try Hello for the first time. Once they click on the snippet, they then enter the Hello new user experience.

In addition to the video, we will would like to show the Hello logo on its own at the conclusion of the entire experience. Happy to go with a static image, or if it makes sense to animate the Hello logo. Can be discussed.

Comment 2

[John Slater]

Ty, cc'ing you here as a FYI for a potential post-Portland project (PPPP). More details to come.

Comment 3

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

:frios - when we originally discussed the flow for this, we talked about changing the snippet content immediately when the user clicks on the "Try it now" button (Step 2). Is this still possible?

Comment 4

[Fabio Rios [:frios]]

Hello all, there have been some changes to this and it now requires a new action plan. More info to follow after next meeting. Very aware of the time constraints, this will be taken into account during planning.

Ty, I'll bring you into the next meeting. Thanks.

Comment 5

[Fabio Rios [:frios]]

Attachment: Updated user flow from the snippet

Comment 6

[Fabio Rios [:frios]]

Looking to proceed quickly with this snippet as we need final creative by January 6th. I've included an illustration to show the various steps that take place. But all we need from creative is the animation (steps 1 & 2)

Asset requested: Animation for snippet(steps 1 and 2)

Date needed: January 6th

Purpose: to introduce Hello on the snippet

- Animation must be brief, under 5 seconds
- must show this is a video chat feature/tool
- final scene needs to have full Firefox Hello logo. [IMPORTANT] do we need to show the round Firefox logo? If so, need to build it in somehow.
- must leave space for 2-3 lines of text (text will be provided)
- must have button (button text will be provided)

Comment 7

[alainez]

Fabio...is there a technical need for the animation to be 5 sec or less? S

Comment 8

[Fabio Rios [:frios]]

No, but shorter will maximize engagement. Ty has a mock up that is around 7 sec which would work fine.

Comment 9

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Steven - do you have any issues with this timeline? Receive final creative/copy on the 6th, for completion on the 13th?

Fabio, this is en-US only, correct?

Comment 10

[Steven Garrity [:sgarrity]]

(In reply to Cory Price [:ckprice] from comment #9)
> Steven - do you have any issues with this timeline? Receive final
> creative/copy on the 6th, for completion on the 13th?

I'll need a bit more clarification on the scope. Based on the the flow illustration from Comment #5 (very helpful, thanks), I have a few questions:

1. The initial animation - will it be a GIF or an HTML5-based animation? Will the final illustration be provided, or will I be building out the animation myself?

2. Does the snippet need to be aware of whether it is a first-time Hello user, or does the snippet just trigger the Hello door-hanger and Hello handles the first-time/return-user difference itself?

3. The landing page in 'Step 4.', is that being developed elsewhere, or is that part of this bug?

Thanks

Comment 11

[Fabio Rios [:frios]]

> 1. The initial animation - will it be a GIF or an HTML5-based animation?
> Will the final illustration be provided, or will I be building out the
> animation myself?
My understanding is that Ty will be providing the final animation. He has already provided a mock up. I believe this is HTML5, but let me confirm.

> 2. Does the snippet need to be aware of whether it is a first-time Hello
> user, or does the snippet just trigger the Hello door-hanger and Hello
> handles the first-time/return-user difference itself?
The FTU experience is handled by Hello door hanger. No addition needs from snippet.

> 3. The landing page in 'Step 4.', is that being developed elsewhere, or is
> that part of this bug?
Landing page is being developed elsewhere.

Comment 12

[Ty Flanagan]

On the topic of animation formats, Ill be provided an animated gif. Its not HTML5-based.

Comment 13

[Steven Garrity [:sgarrity]]

(In reply to Cory Price [:ckprice] from comment #9)
> Steven - do you have any issues with this timeline? Receive final
> creative/copy on the 6th, for completion on the 13th?

Given these clarifications, yes, the 6th-through-13th implementation should be ok. It's a bit tight considering time for code-review and testing though.

Comment 14

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Steven Garrity [:sgarrity] from comment #13)
> Given these clarifications, yes, the 6th-through-13th implementation should
> be ok. It's a bit tight considering time for code-review and testing though.

Hi guys, considering this is going to be functionality that works with the product, I agree with Steven that the 6th is going to be too tight for testing and review.

Fabio, please work with Ty to deliver final approved creative (layout with placeholder text and animation) by Dec 22nd per the bug opening.

Thanks!

Comment 15

[Sean Martell]

Hey guys,

Slowly getting up-to-date on what's happening on this project, but there seems to be a conversation happening in email vs here within the bug. Can we get an update as to where this is within the bug here?

Thanks

Comment 16

[Sean Martell]

aaaand I'm up to date. carry on. \m/

Comment 17

[Fabio Rios [:frios]]

Sean, you catch up quickly!

We are still in planning mode here and have not settled on final animation.

Cory, the 22nd is looking less likely, but let me get back to you after our meeting today.

Comment 18

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

It was determined today that the Hello launch will be delayed until GA 36 (Feb 24th).

Comment 19

[Fabio Rios [:frios]]

Attachment: hello animation mockup - fr2.jpg

Possible animation sequence based on animation from landing page. No action yet. More details to follow.

Comment 20

[Matej Novak [:matej]]

(In reply to Fabio Rios [:frios] from comment #19)
> Created attachment 8539609 [details]
> hello animation mockup - fr2.jpg
> 
> Possible animation sequence based on animation from landing page. No action
> yet. More details to follow.

I know we have a little more time here, but I just want to make sure I understand everything.

This mockup is quite different from what we agreed on last week and what Ty has been building out.

Can I get an update? Thanks.

Comment 21

[Fabio Rios [:frios]]

Attachment: Animation wireframe

Hey there, I've been communicating via email with Ty and Sean. I'll bring the conversation here to to get this bug up to speed. 

Attached is the latest mockup based on the landing page version I saw last week.

Next step is to get a mock up of the animation so we can provide to dev.

Comment 22

[Matej Novak [:matej]]

(In reply to Fabio Rios [:frios] from comment #21)
> Created attachment 8540182 [details]
> Animation wireframe
> 
> Hey there, I've been communicating via email with Ty and Sean. I'll bring
> the conversation here to to get this bug up to speed. 
> 
> Attached is the latest mockup based on the landing page version I saw last
> week.
> 
> Next step is to get a mock up of the animation so we can provide to dev.

Yup, that's on its way. We're getting the landing page version mocked up first, since that's due earlier, but then we'll switch to the snippet.

Glad we're all on the same page.

Comment 23

[Fabio Rios [:frios]]

Hey there, just following up on this one. When do you anticipate we can see a mock up of the animation? It's been a while with the break an all. Please advise if more clarification is needed and I can set up a meeting.

Comment 24

[Ty Flanagan]

Attachment: FFxHello_Snippet_447x184_v1.gif

Fabio,

Here is an animated gif of the Hello animation

Comment 25

[Fabio Rios [:frios]]

Great thank you! I'll share this with a few teams and get back to you. I'll also get it out to dev now so they use it as a place holder while developing the snippet.

Thanks Ty

Comment 26

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Just wanted to make sure we're still on track to deliver final creative for this on 1/26.

As far as functionality goes, your wireframe looks good. Note there is the case where the user's icon is not available (in the customization palette).

We've discussed this before, but adding to the bug for tracking.

The CTA will...

1) if Hello is available, open the doorhanger.
2) if Hello is not available, send the user to the product page.

Notes:
- The doorhanger will drop the same whether or not the user has taken the Get Started tour already.
- We won't be adding any additional info panels etc. to the Hello doorhanger.

Also adding the copy document here for reference: https://docs.google.com/a/mozilla.com/document/d/1hJ1mH8AzV1LzH2NCBbCVrYXJpiZm5p-c83srkV4Ofuk/edit

Comment 27

[Fabio Rios [:frios]]

Hey there, we've got approval on the wireframe and ready to proceed. https://bug1099320.bugzilla.mozilla.org/attachment.cgi?id=8540182

Ty, can we tweak the animation slightly before sending it over to dev? It would be beneficial to have more emphasis on the scene with the laptop to be clear about the video chat aspect. What do you think? Can we get the faces to chat (mouths move) and the little green camera light more noticeable?

Animation length feels right, so this will require the last scene with the hello chat bubbles to shorten a bit (or speed up).

Comment 28

[Matej Novak [:matej]]

(In reply to Fabio Rios [:frios] from comment #27)
> Hey there, we've got approval on the wireframe and ready to proceed.
> https://bug1099320.bugzilla.mozilla.org/attachment.cgi?id=8540182
> 
> Ty, can we tweak the animation slightly before sending it over to dev? It
> would be beneficial to have more emphasis on the scene with the laptop to be
> clear about the video chat aspect. What do you think? Can we get the faces
> to chat (mouths move) and the little green camera light more noticeable?

Let's avoid the mouths moving if we can. That gets into some pretty hokey territory.

Comment 29

[Ty Flanagan]

Im going to agree with Matej. You would need roughly 3-5 more seconds added on to make any allowances for the chat bubbles to demonstrate a conversation. 8 seconds for this animation at the moment is very tight as is.

Comment 30

[Ty Flanagan]

Attachment: FFxHello_Snippet_447x184_noDH.gif

Here is the animation as per the storyboard. Its slightly shy of 8sec. It feels very rushed and i'm concerned that were trying to compact too many visuals into a small time frame and by doing so were sacrificing it's potential effectiveness as a snippet.

Comment 31

[Matej Novak [:matej]]

(In reply to Fabio Rios [:frios] from comment #27)
> Hey there, we've got approval on the wireframe and ready to proceed.
> https://bug1099320.bugzilla.mozilla.org/attachment.cgi?id=8540182
> 
> Ty, can we tweak the animation slightly before sending it over to dev? It
> would be beneficial to have more emphasis on the scene with the laptop to be
> clear about the video chat aspect. What do you think? Can we get the faces
> to chat (mouths move) and the little green camera light more noticeable?
> 
> Animation length feels right, so this will require the last scene with the
> hello chat bubbles to shorten a bit (or speed up).

Hey Fabio,

When you say "animation length feels right," are you referencing Ty's version from comment 24? Were you asking for edits to be made to that one? Or are you referencing the storyboard?

Comment 32

[Holly Habstritt Gaal [:Habber]]

(In reply to Fabio Rios [:frios] from comment #27)
> Hey there, we've got approval on the wireframe and ready to proceed.
> https://bug1099320.bugzilla.mozilla.org/attachment.cgi?id=8540182
> 
> Ty, can we tweak the animation slightly before sending it over to dev? It
> would be beneficial to have more emphasis on the scene with the laptop to be
> clear about the video chat aspect. What do you think? Can we get the faces
> to chat (mouths move) and the little green camera light more noticeable?
> 
> Animation length feels right, so this will require the last scene with the
> hello chat bubbles to shorten a bit (or speed up).

Hi Fabio. In your wireframe the CTA says "Start a conversation". 

Cory mentioned the CTA logic for the 2 following cases:
1) if Hello is available, open the doorhanger.
2) if Hello is not available, send the user to the product page.

"Start a conversation" might not be appropriate copy for case 2 above where we send them to the product page. This might be an additional piece of copy Matej will need to provide. (if he hasn't done so already)

Comment 33

[Fabio Rios [:frios]]

> Hey Fabio,
> 
> When you say "animation length feels right," are you referencing Ty's
> version from comment 24? Were you asking for edits to be made to that one?
> Or are you referencing the storyboard?

Hey Matej, yes I was referring to attachment in comment 24 and asking for edits to it.

In my eyes we are pretty close to the storyboard with that animation. The only difference is that the proposed animation has less emphasis on the scene with the computers and more emphasis on the scene with the hello chat bubbles. My thinking is that this should be reversed for snippet since the goal of the snippet is to convey video chat over anything else. Even if it means removing some of the chat bubbles at the end.

If you guys don't see it working though, happy to go with attachment on comment 24. Timing and pace on that one feel good to me. 

Ty, would that be the final file that I deliver to dev? Thank guys!

Comment 34

[Fabio Rios [:frios]]

(In reply to Holly Habstritt Gaal [:Habber] from comment #32)
> Hi Fabio. In your wireframe the CTA says "Start a conversation". 
> 
> Cory mentioned the CTA logic for the 2 following cases:
> 1) if Hello is available, open the doorhanger.
> 2) if Hello is not available, send the user to the product page.
> 
> "Start a conversation" might not be appropriate copy for case 2 above where
> we send them to the product page. This might be an additional piece of copy
> Matej will need to provide. (if he hasn't done so already)
Hey Holly, thanks for flagging. Upon release everyone should have the Hello button available and in the chrome area. Only those that manually remove it will not have it. I'm comfortable having those [few] go to the landing page, should they click on the snippet after intentionally removing the feature. 

That said we do have multiple message to test out as a CTAs, so we should be OK.

Comment 35

[Matej Novak [:matej]]

(In reply to Fabio Rios [:frios] from comment #33)
> > Hey Fabio,
> > 
> > When you say "animation length feels right," are you referencing Ty's
> > version from comment 24? Were you asking for edits to be made to that one?
> > Or are you referencing the storyboard?
> 
> Hey Matej, yes I was referring to attachment in comment 24 and asking for
> edits to it.
> 
> In my eyes we are pretty close to the storyboard with that animation. The
> only difference is that the proposed animation has less emphasis on the
> scene with the computers and more emphasis on the scene with the hello chat
> bubbles. My thinking is that this should be reversed for snippet since the
> goal of the snippet is to convey video chat over anything else. Even if it
> means removing some of the chat bubbles at the end.
> 
> If you guys don't see it working though, happy to go with attachment on
> comment 24. Timing and pace on that one feel good to me. 
> 
> Ty, would that be the final file that I deliver to dev? Thank guys!

Ty, WDYT? Any small tweaks you can make to the version in comment 24 that address the above?

Comment 36

[Fabio Rios [:frios]]

Hey there, just following up on this one. The files were due this week. Are we OK to deliver soon?

Comment 37

[Ty Flanagan]

Fabio,

Ill make some edits and share an update version later today. Since were basing the timing on the first animated mockup, ill keep the final animation between 8-10 secs.

Comment 38

[Ty Flanagan]

Attachment: FFxHello_Snippet_447x184_rev.gif

I have revised the animation a bit:

- removed a set of bubbles at the end
- the green camera  & light pops out more which should help it be more obvious 
- expanded the time the browser with face bubbles are on screen by .85 sec

Total time for the animation is 9.23 sec.

Comment 39

[Matej Novak [:matej]]

Looks awesome, Ty. Thanks!

Comment 40

[Fabio Rios [:frios]]

Ty, thanks for those changes. I'm sending this file over to dev. Looks like we are all set with design.

Thanks again.