1000226 - Create Mozilla.org landing page in Unbounce

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Adam Lofting (:adamlofting)]

To connect the messaging and user experience from the initial click on Mozilla.org through to our primary call to action (most likely to create an account on webmaker.org).

Comment 1

[Adam Lofting (:adamlofting)]

This landing page will naturally fall out of the landing page project agreed at all hands, which is being done in advance of maker party: See Bug 1004754 (Design 4 webmaker.org landing pages that are as different as possible)

Comment 2

[Matt Thompson (@OpenMatt :OpenMatt)]

* We're going to try using the new "Unbounce" tool for this. They provide various templates, plus ability to customize them with our own HTML, CSS and Javascript.

* Stand by for more info

Comment 3

[Matt Thompson (@OpenMatt :OpenMatt)]

* our user account is now set up and we are ready to go. 

* next step: produce a draft page using one of their templates

* I can get to that later this week -- but would LOVE if someone else wanted to push ahead with that

* Andrea + Adam: going to send you credentials now

Comment 4

[Matt Thompson (@OpenMatt :OpenMatt)]

* Moving this one to the next train. Good progress, but won't get done for this release. Next one!

Comment 5

[Adam Lofting (:adamlofting)]

For all landing pages we build, we'll need to include a GA snippet. I've put the code on a wiki page here, along with a link to how to add this in Unbounce: https://wiki.mozilla.org/Foundation/Metrics/webmaker-ga-snippet#Webmaker_GA_Snippet

Comment 6

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Andrea or Adam: I am bottlenecking this ticket like a mofo

* Do either of you want to take a first pass at using Unbounce to create a landing page for mozilla.org referral traffic? 

* No worries if not -- I just don't want to bottleneck if you guys have time and enthusiasm.

* If not, I can probably get to this Thurs or Fri

Comment 7

[Andrea Wood [:andreawood]]

Any updates on a first-pass landing page? Adam or Matt did either of you have a chance to start working on one? I have been busy, but we should start testing snippet language next week if at all possible. I'd like to have a basic landing page and work on optimizing it at the same time if possible.

Comment 8

[Andrea Wood [:andreawood]]

OK I have logged in and I'm playing around with Unbounce. I hope to have a draft landing page for Snippet for review in the next day or two. Matt, did you find out about the requirements for security review for Unbounce pages? This is a big potential concern unless you've problem solved. Security reviews can take over a week at minimum.

Comment 9

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Andrea: glad you're playing around in there -- I'll have a look at what you've created this afternoon.

* Will update re: security review

Comment 10

[Andrea Wood [:andreawood]]

OK I made a template page that has the basic content that I suggest we start with. It's in Unbounce. (it's a draft, and based on best practice). I am not a coder and there looks to be some stylistic things that I can't fix or figure out (horizontal lines and we might want to make the background our brand color "sand" to create visual continuity from the snippet page). Adam maybe you can work on that piece? And add the GA snippet as well.

Also I don't know how to hook this up to BSD so we capture emails there; and I am not sure how we get this through security review. Bobby has mentioned a tool called "Minion" but I'm not familiar with it or how it speeds up security reviews on pages like this one.

Comment 11

[Matt Thompson (@OpenMatt :OpenMatt)]

* @ Andrea: Jp and Jbuck are going to help us with security review process

*I've filed a separate ticket for that here: 
Bug 1023415 - Do security review on Unbounce landing page

Comment 12

[Brett Gaylor [:brett]]

> Also I don't know how to hook this up to BSD so we capture emails there; and
> I am not sure how we get this through security review. Bobby has mentioned a
> tool called "Minion" but I'm not familiar with it or how it speeds up
> security reviews on pages like this one.

Can you confirm you need the form on the unbounce page, Andrea?

Could you publish the draft page URL here so we can get our hands on it?

Comment 13

[Andrea Wood [:andreawood]]

Here is the published link (it's not great, sort of embarrassing, but you get the gist :)

http://welcome.webmaker.org/firefox-snippet-test-landing-page/

I just created it in the wysiwyg and have done literally nothing else.

Comment 14

[Matt Thompson (@OpenMatt :OpenMatt)]

thanks Andrea! Much appreciated

Comment 15

[Adam Lofting (:adamlofting)]

(In reply to Brett Gaylor [:brett] from comment #12)
> Can you confirm you need the form on the unbounce page, Andrea?

I think one other option here is to link from the landing page to webmaker.org and complete the account creation back-end work there. That way unbounce doesn't have a back-end, which makes the sec review simpler. But this requires some work on webmaker (Bug 1018237). The webmaker dev work here could be kept really simple though.

Comment 16

[Adam Lofting (:adamlofting)]

@All, FYI: I've added our referral tracking code script to this landing page to test how it works. There were some issues, but I think that is solved now. Info here: Bug 1015092

We also need to add GA tracking to this, so I'll get the code and write some documentation for anyone who is using Unbounce to create further pages.

Comment 17

[Adam Lofting (:adamlofting)]

(In reply to Matt Thompson (@OpenMatt :OpenMatt) from comment #6)
> @ Andrea or Adam: I am bottlenecking this ticket like a mofo
> 
> * Do either of you want to take a first pass at using Unbounce to create a
> landing page for mozilla.org referral traffic? 
> 
> * No worries if not -- I just don't want to bottleneck if you guys have time
> and enthusiasm.
> 

I have enthusiasm! 

Don't wait on me for this, but if I can squeeze it in I'll try and create another variation we can test as an extra option. At this early stage, many options are good. 

Can we think of anyone else with capacity who would like to try this?

Comment 18

[Andrea Wood [:andreawood]]

Adam does this route require another click to land on a webmaker page? So it would be snippet > unbounce page > webmaker form? That will hurt conversion if that was your meaning. It would be better to keep it to 1-click-to- input your email.

We can always just use a BSD form to collect the information directly, but that means we use Optimizely instead of unbounce to optimize. We should just keep in mind all this extra work and determine if unbounce is indeed saving work vs. creating it. :)


(In reply to Adam Lofting (:adamlofting) from comment #15)
> (In reply to Brett Gaylor [:brett] from comment #12)
> > Can you confirm you need the form on the unbounce page, Andrea?
> 
> I think one other option here is to link from the landing page to
> webmaker.org and complete the account creation back-end work there. That way
> unbounce doesn't have a back-end, which makes the sec review simpler. But
> this requires some work on webmaker (Bug 1018237). The webmaker dev work
> here could be kept really simple though.

Comment 19

[Adam Lofting (:adamlofting)]

(In reply to Andrea Wood from comment #18)
> Adam does this route require another click to land on a webmaker page? So it
> would be snippet > unbounce page > webmaker form? That will hurt conversion
> if that was your meaning. It would be better to keep it to 1-click-to- input
> your email.

Yes, it would be an extra click. But I think our KPI is getting people to create webmaker accounts. 

If people give us an email address, we then have to convince them via email to come back and create an account at a later date. (Though there's a ton of value in being able to welcome them with an 'email journey' that drip feeds CTAs over time :)

Having the account creation process on the landing page would be ideal, but is much more technically involved. 

Or if we can get a high-converting email sign-up that forwards them on to an account creation process would be the best of both worlds.

FWWI, I've had good conversation rate results on two step forms where there's a partial data entry (e.g. Name) on page 1.

Comment 20

[Andrea Wood [:andreawood]]

If we had resources, we would test these paths of course. :) Here's my thinking on possible user journeys:

Journey A. Click snippet > Enter email address > receive email drip campaign to create a webmaker account.

Journey B. Click snippet > Create a Webmaker account upon landing

Journey C. Click snippet > Enter first name or take 1-2 Q survey e.g. "What do you like to make?" > create webmaker account

Costs and benefits of each:
Journey A costs: Lower barrier = less qualified leads; requires creation of email drip series; email drip series increases qualification barriers but this path overall may decrease account conversion.
Journey A benefits: Collecting emails for future communications including Webmaker, fundraising; etc.; Likely results in higher quality Webmaker leads (meaning, people who actually participate and don't just create an account and never return)

Journey B costs: Questionable qualification barriers, meaning it's easy for people to create an account without really knowing what they're signing up for; 
Journey B benefits: Potentially higher conversion

Journey C costs: Extra page is a barrier, likely to decrease conversion; 
Journey C benefits: Actually fun / engaging / less annoying for people who may not go on to create a login; More opportunity to "teach" about Mozilla within the engagement exercise itself; overall the leads may be higher quality given the extra work to enter info (can't know without testing).

(In reply to Adam Lofting (:adamlofting) from comment #19)
> (In reply to Andrea Wood from comment #18)
> > Adam does this route require another click to land on a webmaker page? So it
> > would be snippet > unbounce page > webmaker form? That will hurt conversion
> > if that was your meaning. It would be better to keep it to 1-click-to- input
> > your email.
> 
> Yes, it would be an extra click. But I think our KPI is getting people to
> create webmaker accounts. 
> 
> If people give us an email address, we then have to convince them via email
> to come back and create an account at a later date. (Though there's a ton of
> value in being able to welcome them with an 'email journey' that drip feeds
> CTAs over time :)
> 
> Having the account creation process on the landing page would be ideal, but
> is much more technically involved. 
> 
> Or if we can get a high-converting email sign-up that forwards them on to an
> account creation process would be the best of both worlds.
> 
> FWWI, I've had good conversation rate results on two step forms where
> there's a partial data entry (e.g. Name) on page 1.

Comment 21

[Brett Gaylor [:brett]]

> Or if we can get a high-converting email sign-up that forwards them on to an
> account creation process would be the best of both worlds.

I tend to agree.  Ask them for their email and have a direct CTA to create a webmaker account.  Andrea if this is too many options let us know:)

Adam, wondering if you could spend some time in unbounce to see if with your JS skills you could just make the form work?  It's pretty simple I think with a bit of jquery, it would essentially be the same as what we use on party.webmaker.org or the footer of webmaker.  I think sending to a 2nd BSD page is going to be a bad idea and at that point unbounce isn't super useful!

Comment 22

[Matt Thompson (@OpenMatt :OpenMatt)]

* moving to next train, as this work is ongoing

Comment 23

[Matt Thompson (@OpenMatt :OpenMatt)]

* These design assets might be useful here:
https://www.dropbox.com/sh/9nsruk3sw71tivv/AABoZy9rs0YxvpOTt9C-8_sxa

Comment 24

[Matt Thompson (@OpenMatt :OpenMatt)]

* This ticket is getting long -- let's close it and file a new one.

Here's my proposal:

1) Have a designer take a pass on this to improve layout & typopgraphy:
http://welcome.webmaker.org/firefox-snippet-test-landing-page/

2) Get the sign-up form wired up and working properly

3) Ensure it contains all the tracking stuff we need (which I believe Adam has already done) 

4) Create variants. Test variations in copy and other small tweaks to see which perform better.

5) Done. Ready for snippet testing, once Unbounce passes snippet review.

Andrea, Adam, Brett: does that work for you? If so I'll close this one and file those new ones.

Comment 25

[Matt Thompson (@OpenMatt :OpenMatt)]

* Sorry: (5) should read: "once Unbounce passes *security* review"

Comment 26

[Adam Lofting (:adamlofting)]

Agreed, a new bug will be very helpful and the proposal makes sense to me. Thanks Matt.

Can we add in an extra action: 'Write a landing page test plan' and assign this to me. If we only have one landing page to test, we should use the existing webmaker or makerparty homepage as a control to see what the impact on conversion is.

I have a couple of very small actions for (3) which will be done soon.

Comment 27

[Brett Gaylor [:brett]]

I'm ok with that plan, but which designer are we thinking?  If cassie, we need to take other tickets off of her plate for this release.

Comment 28

[Adam Lofting (:adamlofting)]

I've documented the tracking requirements for landing pages here:

* https://wiki.mozilla.org/Foundation/Metrics/Landing_Page_Tracking

(and linked to it in the resources section of the Metrics wiki page)

...and I will now close a couple of smaller related tickets to make this as easy as possible for the person building the page.

Comment 29

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Brett: Sabrina's got it done. Gonna close this and open a new one for Mozilla.org referral traffic

Comment 30

[Brett Gaylor [:brett]]

\o/