779348 - [Design] SMS Project - Landing pages and snippet

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Winston Bowden]

Attachment: Funnel

We’re in the process of bringing a new SMS system online.  The goal of the tool will be to optimize our existing channels (snippet, email, etc) to maximize Fennec downloads.  

The problem we’re trying to solve:

Users click on a snippet.  The snippet is a desktop channel.  We believe when the user lands on Google Play from a snippet, it’s unclear what they’re supposed to do.  We’re asking them to install our mobile product while they’re using their desktop.  There is functionality to do this built into Google Play, but we theorize that a large percentage of users are confused by the funnel.  

SMS program:

Three pieces of collateral to deliver.  

1) A landing page that a user will visit from a text snippet with an input box for phone number

2) Same landing page but in lieu of a form, display a short code.  Will test to see which is most successful.

3)  A graphical snippet that includes the short code with instructions on how to get a text with Firefox for Android download link

The landing pages should include:

• CTA to send a text message with a Firefox for Android download link.  
• A form area to type in your phone number. 
• A small icon or link to Google Play.  Most of the users will be viewing on the Desktop – so we want to emphasize the SMS.  But it’s important to the privacy team that we include the link to Google Play as a secondary option.  
• Use messaging/design here as a base: http://www.mozilla.org/en-US/firefox/fx/

Rough mockup of the funnel attached.    

Also, I've attached some VERY rough images of what the landing pages might look like.

Comment 1

[Winston Bowden]

Attachment: landing_1

Comment 2

[Winston Bowden]

Attachment: landing_2

Comment 3

[Tara (musingt)]

Lee, would love your help with this.

Comment 4

[Winston Bowden]

Thanks for the meet, Lee.  Two points from meet:

- how can we show which devices are supported
- we need to add re-catcha under the drop down to prevent abuse

Comment 5

[John Slater]

Also, clarifying for the sake of the bug that this is a unique landing page rather than a tweak to mozilla.org/firefox/fx (as indicated in the wireframes).

Comment 6

[Lee Tom]

the list of supported devices is pretty long 
http://www.mozilla.org/en-US/firefox/mobile/platforms/

 - is is possible to build in a collapsible menu similar to the Platforms page within the pop-up? Would it be overwhelming to do that there? 

 - I'll mock up the re-catcha in a drop-down state


(In reply to Winston Bowden from comment #4)
> Thanks for the meet, Lee.  Two points from meet:
> 
> - how can we show which devices are supported
> - we need to add re-catcha under the drop down to prevent abuse

Comment 7

[Winston Bowden]

(In reply to Lee Tom from comment #6)
> the list of supported devices is pretty long 
> http://www.mozilla.org/en-US/firefox/mobile/platforms/
> 
>  - is is possible to build in a collapsible menu similar to the Platforms
> page within the pop-up? Would it be overwhelming to do that there? 


yeah - I can't think of a better way to present that info.



> 
>  - I'll mock up the re-catcha in a drop-down state
> 
> 
> (In reply to Winston Bowden from comment #4)
> > Thanks for the meet, Lee.  Two points from meet:
> > 
> > - how can we show which devices are supported
> > - we need to add re-catcha under the drop down to prevent abuse

Comment 8

[Lee Tom]

Attachment: firefox mobile SMS - A_01a

Version A - collapsed sign-up box (default)

Comment 9

[Lee Tom]

Attachment: firefox mobile SMS - A_01b

Version A - expanded sign-up box with recaptcha (is the design of this customizable?)

Comment 10

[Lee Tom]

Attachment: firefox mobile SMS - B_01

Version B - text FXDROID

*this mockup has the correct copy, "Also available on Google Play" - I need to update both version A mockups with this.

Comment 11

[Winston Bowden]

Thanks, Lee. 

On version A, per John's feedback, Matej has taken the two lines of copy above the input area and combined them into one sentence:  Send yourself a text message with a link to download.

I'm talking with Chris More on recaptcha.  I'd like to pull that totally if I can.  Stay tuned.

Comment 12

[Winston Bowden]

I talked with cmore.  Looks like we can remove recaptcha.  Still confirming but should have some more input this afternoon.

Comment 13

[Winston Bowden]

Let's remove recaptcha.

Comment 14

[Lee Tom]

Thanks for the update Winston. I'll remove the recaptcha and also wanted to mention that there's talk of possibly surfacing a thumbnail of the FFx for Android video - as seen on:
http://www.mozilla.org/en-US/firefox/14.0/whatsnew/

The idea to leverage that video more since it seems under-utilized, only making an appearance on the WN page. Any thoughts around that? 

John, can you confirm this is something we want to fit onto the page?

Comment 15

[John Slater]

(In reply to Lee Tom from comment #14)
> The idea to leverage that video more since it seems under-utilized, only
> making an appearance on the WN page. Any thoughts around that? 
> 
> John, can you confirm this is something we want to fit onto the page?

If the video doesn't fit or feels wrong then I wouldn't call it a strict mandatory thing. But, I'd like to at least try and see how it works...would be nice if we could include it.

Comment 16

[Winston Bowden]

Thanks guys.  Just spoke with Sam.  We both agree we'd rather not have the video on the landing page - but what about on a confirmation page after they submit?  Sam is putting together some product marketing info for a thank you and we both think it makes a lot of sense to place video content there. 

Some other tweaks:

- Can we flip flip the Google Play text with the Supported Device text? 
- For supported device, any more thoughts on how we can present that data within a hover?  I'd like to keep them on this page if at all possible.

Comment 17

[Sam Mott]

Should have it by tomorrow afternoon.

Comment 18

[Lee Tom]

Attachment: firefox mobile SMS - A_02a

Attaching the latest round of mockups. 

- switched placement of supported devices and Google Play links
- removed recaptcha in the expanded state

Comment 19

[Lee Tom]

Attachment: firefox mobile SMS - A_02b

Comment 20

[Lee Tom]

Attachment: firefox mobile SMS - platforms 1b

Pop-up window (240px wide) can use similar collapse/expand menus as seen here:
http://www.mozilla.org/en-US/firefox/mobile/platforms/

Comment 21

[Sam Mott]

Hey Lee, 

As Winston mentioned, we also need another design for the "message sent" state of this page. 

This page will be shown after a user sends themselves a text. The flow is as follows:
   1) User is directed to the landing page from the snippet on about:home
   2) The user enters their phone number and presses "Send it to me" 
   3) A new state of this page is shown, the "sent state"

I would like to put a few marketing materials on this page, but I'm concerned we wont have enough room. I think, at the very least, it would great to put the video on this page (mentioned above. I'm assuming it is this video http://bit.ly/MlBy7I?). If we can fit anymore marketing materials, that would be great...I've attached a mock-up of what I was thinking, and I'm working with Matej for the proper copy. 

While you're working on this page, we'll also need a couple of page states to display in cases of failure. I think these pages should be very similar to the current page, but show different copy for each failure (and possibly a graphic representation of a warning). I'll also be working with Matej to get the copy that you need. 

I'll attach two mock-ups. Hopefully this makes sense. Let me know if you have any questions.

Comment 22

[Sam Mott]

Attachment: SMS Failure Attachment

Comment 23

[Sam Mott]

Attachment: SMS Sent State, Mockup

Comment 24

[Lee Tom]

Thanks for the visual references, Sam. I'll re-post new mockups with updated copy, confirmation and failure states very soon. 

With regards to the video, it feels like putting the video on the confirmation state seems a bit backwards to me.  It's a good introduction/prompt for users to download FFx for Android (by way of the text message), but I'm wondering if the video supports sending the text to begin with VS giving them an introduction *after they've already sent the code.

Comment 25

[Lee Tom]

Attachment: firefox mobile SMS - A_03a

Default page

Comment 26

[Lee Tom]

Attachment: firefox mobile SMS - A_03b

Signing into form - additional info drops down

Comment 27

[Lee Tom]

Attachment: firefox mobile SMS - A_03c

Error message during form sign-in

Comment 28

[Lee Tom]

Attachment: firefox mobile SMS - A_03d

Confirmation message with video

Comment 29

[Winston Bowden]

Some feedback from Pete:

1) what is user taken if they click Learn More about Firefox for Android at the bottom of the page? Screen shot should be in an appendix. 

2) On confirmation page with video, can we put twitter and FB buttons here so that people can share in those channels? pre-populate the message with #Firefox?  

Feedback from Winston:

Also, on the thank you page, can we add in Firefox & You email sign up?  It's fine to do it with the standard horizontal opt-in on all other pages of moz.org.

Comment 30

[Sam Mott]

I think that Pete's suggestion is a good one: FB and Twitter buttons would be great. And, yes, an email sign-up would be good too. 

As to the video--I think that it would be an effective tool to have on the page as an incentive to download. At this point, users have only sent a link to themselves (not downloaded). The video should keep them excited (if they aren't already), and in doing so make them more likely to download/boot.

Comment 31

[Sam Mott]

Here is the bug for copy on the finished state of the page: https://bugzilla.mozilla.org/show_bug.cgi?id=779343

Comment 32

[Lee Tom]

> 
> 1) what is user taken if they click Learn More about Firefox for Android at
> the bottom of the page? Screen shot should be in an appendix. 

- currently, the same link on /fx page links to 
http://www.mozilla.org/en-US/firefox/mobile/features/

> 2) On confirmation page with video, can we put twitter and FB buttons here
> so that people can share in those channels? pre-populate the message with
> #Firefox?  

Yes, we can include these on the confirmation state.


> Feedback from Winston:
> 
> Also, on the thank you page, can we add in Firefox & You email sign up? 
> It's fine to do it with the standard horizontal opt-in on all other pages of
> moz.org.

Yep, we can include the email sign up here.

Comment 33

[Lee Tom]

Attachment: firefox mobile SMS - A_03d revised

Hi all, 
Attached is a revised Confirmation state of this page. 

- Updated confirmation message (Matej approved)
- Added our standard share links to Twitter, Facebook and Google+
- Added newsletter sign-up form

Comment 34

[Winston Bowden]

Comment on attachment 652129 [details]
firefox mobile SMS - A_03d revised

Looks great to me.  

John - let me know if this is cool and I'll start filing the web dev bugs.

Comment 35

[Sam Mott]

Looks awesome. One thing:

1) Can we have something (header copy, overlay, footer copy, etc...) to identify the video. There isn't a call to action to watch it, and I'm worried that we'll have fewer views. Let me know if that is possible/a concern, and I can get some copy to you.

Comment 36

[Winston Bowden]

Lee mentioned that the title bumper for that will not be as busy.  I actually think the play icon is more likely to solicit a click to view than extra copy.  But if you feel strongly about it, I'm okay adding it in.

Comment 37

[Lee Tom]

Thanks Winston. John also just suggested the CTA overlay, as Sam did. I'm not sure how easy/difficult that is to implement, but could be a happy medium

Comment 38

[Winston Bowden]

+1 works for me.  :) 

> Thanks Winston. John also just suggested the CTA overlay, as Sam did. I'm
> not sure how easy/difficult that is to implement, but could be a happy medium

Comment 39

[Sam Mott]

Sweet!

Comment 40

[John Slater]

This is looking great to me. Would like to see that other overlay, but after that this will be ready for those web bugs.

Comment 41

[Lee Tom]

Attachment: firefox mobile SMS - A_03d revised 2

Again, the Confirmation state + video overlay (CTA is TBD)

Comment 42

[Lee Tom]

Attachment: firefox mobile SMS - B_02

Text FXDROID version, with copy revisions

Comment 43

[Winston Bowden]

Looks great, Lee.  Thanks!

Any more edits before we close this out and send to web dev?

Comment 44

[Lee Tom]

I'm assuming no news, is good news? 

PSD:
http://cl.ly/2d383H2H0c0q

Comment 45

[John Slater]

A belated +1 from me...

Comment 46

[Winston Bowden]

Thanks Lee.  Looks great.  Closing out.

Comment 47

[Winston Bowden]

Re-opening for adjustments on the initial landing page due to inability to implement geo-UP.

Per discussion, splitting traffic into U.S. vs Non-U.S.  

U.S. will have form field for SMS.  Non-U.S. will have button to download in Google Play.

Thanks for the edits, Lee.

Comment 48

[Lee Tom]

Attachment: firefox mobile SMS - US & non-US 01a

Attached (and below) is a revised version of the landing page 

a - US/non-US numbers (default)
b - form initiated (opt message)
c - form initiated (opt message + error)

I'm guessing we may want to explore how to say "US numbers" and "non-US numbers". Also, will this new split version impact the copy, "Send yourself a text message..."

Comment 49

[Lee Tom]

Attachment: firefox mobile SMS - US & non-US 01b

Comment 50

[Lee Tom]

Attachment: firefox mobile SMS - US & non-US 01c

Comment 51

[Winston Bowden]

Hi Lee - 

Did Pete/John/Sam get you the feedback they had after their meet yesterday?

Comment 52

[John Slater]

I followed up with Lee & Matej yesterday, yes. Matej did a bit of copy editing to what's in Pete's doc, and Lee will be supplying a new mockup soon.

(Lee, please update with details on timing)

Thanks!

Comment 53

[Lee Tom]

I'm working on this now. Mockups soon. Stay tuned.

Comment 54

[Lee Tom]

Attachment: firefox mobile SMS - A_05a

Revised mockups attached. 

- "Available in U.S. only"
- "Enter your 10-digit phone number"
- supported devices and Google Play links swapped in positioning
- error message updates not reflected in mockup

Comment 55

[Lee Tom]

Attachment: firefox mobile SMS - A_05b

Comment 56

[Lee Tom]

Just to clarify, it was my mistake  - left out the "the" in
"Available in the U.S. only" 

I'm updating the file now.

Comment 57

[John Slater]

Thanks Lee!

Also, a note on the error text if you enter an invalid number...we didn't mock it up here, but are proposing that that text now read:

Sorry, this number isn't valid. Please check and enter it again or _download from Google Play_.

(link would point to our Google Play page)

Comment 58

[Lee Tom]

Attachment: firefox mobile SMS - A_05b error message

Posting error state here, for reference

Comment 59

[[e-mail]]

Hello Subhead for the page should read "SMS service available in the US only  Would like to be clear that "US only" does not refer to Google Play or Firefox / Android

thanks

Comment 60

[[e-mail]]

sorry - quick questions.  

1.  why are we using italics for the link at the bottom of the screen "also available on Google Play"  other text links on the page are not in italics

2.  "from Google Play" or "on Google Play" - we should be consistent.  "Also available as a free download from Google Play" would be my suggestion for the link. 

thanks

Comment 61

[Lee Tom]

(In reply to [e-mail] from comment #60)
> sorry - quick questions.  
> 
> 1.  why are we using italics for the link at the bottom of the screen "also
> available on Google Play"  other text links on the page are not in italics

 
> 2.  "from Google Play" or "on Google Play" - we should be consistent.  "Also
> available as a free download from Google Play" would be my suggestion for
> the link. 

- Revising copy to, "Also available as a free download from Google Play »"
(Pete, I think the italics helps the secondary action standout without competing with the various sizes of regular-formatted type around it.)  

- Agree with being clear that "US only" does not refer to GPlay or FFx. Updated text to, "SMS service available in the U.S. only"

- I'll post revised mockups below

Comment 62

[Lee Tom]

Attachment: firefox mobile SMS - A_06a

Comment 63

[Lee Tom]

Attachment: firefox mobile SMS - A_06b

Comment 64

[Lee Tom]

Attachment: firefox mobile SMS - A_06b error

Comment 65

[Lee Tom]

Attachment: firefox mobile SMS - A_06c

Comment 66

[John Slater]

Revised copy for the error message (this should be final):

Sorry, this number doesn't work. Please enter a valid U.S. mobile number or download from Google Play.

Comment 67

[John Slater]

Lee, sounds like we're ready to hand off those PSDs...please post here when they're ready.

Comment 68

[Lee Tom]

Here's the final PSD:
http://cl.ly/3O0A2l1E132x

*note you will see the different states grouped in layers:
1. Sign up - Collapsed (default)
2. Sign up - Expanded (opt in drop-down, error message) once user engages with form
3. Sign up - Confirmed (video)

Comment 69

[John Slater]

Thanks Lee. I'm going to mark this as resolved...just posted an update over in bug 774861 as well.