Marketing - Update webmaker.org/app page with updated assets

[thisandagain]

From MozillaFoundation/plan#418
Depends on #1456

[thisandagain]

/cc @HPaulJohnson

[thisandagain]

Assigning to @xmatthewx for now to produce an IA sketch early next week.

[secretrobotron]

Btw, this is where the trailer will live, right? i.e. this is the landing page.

[thisandagain]

Yup!

[xmatthewx]

Here's a pile of example landing pages. Comments and additions always welcome. https://docs.google.com/presentation/d/1YkUNcI-Qx3Z_BOBubPf6iRaRNGfvM6EK7gtwcx1F_tI/edit?usp=sharing

[xmatthewx]

Requirements

Top of hierarchy

• Headline & value statement (approx 4-12 words total)
• Email capture (pre-App store)
• Download or "Get it" button (test branded vs not branded)
• Image of app on phone (photo preferred over illustration)

More below

• Video
• 2-3 tiny highlights
  • join millions (on the open web)
  • free forever
  • description such as: make pages || share stuff || discover & be discovered
• Share?? (firefox parents who might share a link with their children)

[secretrobotron]

Video

Not a requirement? Would be a link to watch it elsewhere?

[xmatthewx]

Reformatted list to fix ambiguity 😉

[secretrobotron]

Hahaha understood. 💛

[HPaulJohnson]

For period between now and June 19th can we add a box to collect email? As we drive traffic to this page would be good to collect initial interest so we can leverage for launch marketing and content creation.

[xmatthewx]

@HPaulJohnson - added email capture to the list above. After we land in the store, we will need to evaluate if download+email compete too much as CTAs

cc @vazquez

[thisandagain]

We just need email signup until it's available in the store... then we can switch to "Download".

[xmatthewx]

Desktop (Firefox traffic)

Alpha

Beta

[xmatthewx]

Mobile

Weather Snap includes an image of a phone on their mobile landing. They do it well, but most benchmarks remove it. I recommend we skip it unless it comes together very easily.

Alpha & Beta

[xmatthewx]

@HPaulJohnson - will find a good quote to replace "this is awesome" and craft improved copy for the rest. @vazquez has already made great progress on UI.

[HPaulJohnson]

working on copy for tomorrow.

another thought after our meeting this morning, along the same lines of whether email is an effective contact method in developing markets, is whether to include whatsapp sharing option along with FB & twitter?

[vazquez]

This is where I got to today with UI for the site. 🐮 ⭐

Landing Page with Blue Solid Treatment

Landing Page with Photo Treatment

Landing Page with Gradient Treatment

💥

[thisandagain]

O_O
Dang folks! Some serious progress this afternoon. 💥

Really digging the direction here ... only major concern is that I feel like the product isn't quite being showcased enough. The angle of the phone cuts down on the amount of surface area for the product quite a bit. Wondering if this could be resolved by a different angle (similar to @xmatthewx 's IA) or possibly even multiple devices?

[thisandagain]

One other detail, for Beta we should add the Google Play logo somewhere in or near the "Get the App" button. User's are pretty savvy about recognizing that icon and I've seen some pretty major positive results by including it with other products.

[davidascher]

We should explore a low pass filtered photo asset, esp. given how jpeg works it might compress very very well, and we don't want high detail anyway. @Pomax: internet.org is all of those things and also strategically complicated wrt Webmaker. Thanks Laura for noticing!

[xmatthewx]

If we can use a compressed photo, problem solved. @vazquez share a link to the image.

Either way, we should reclaim purple gradients for posterity! 🍇 😈

[vazquez]

https://dl.dropboxusercontent.com/u/43783651/Mozilla/Android.zip

[vazquez]

Agree with @xmatthewx - 💜

[HPaulJohnson]

These are looking awesome. I agree with all the comments that we should be as distinct as possible from internet.org. Appreciate @LauraReynal flagging that.

[vazquez]

Adding a teal gradient for consideration.

[xmatthewx]

@HPaulJohnson @thisandagain - what do we need in the footer? Link to legal and privacy? Anything else?

[thisandagain]

• Legal (TOS)
• Privacy
• Contact

[vazquez]

Updating UI

Adding Footer:

---

[unflagged]

---

[unflagged]

Beta version of Landing Page

[thisandagain]

Perfect. Thanks @vazquez ! 😄

@HPaulJohnson where would you like us to record / capture these email addresses? /cc @adamlofting

[HPaulJohnson]

@thisandagain is BSD an option? if not, what are the options? @adamlofting is on PTO or else I would defer to him on this. My main requirement is to be able to contact them around the launch, ideally through a bulk emailer.

[xmatthewx]

Is it useful to capture this in Webmaker's DB so we can track the origin of users later? Too complicated?

• @vazquez add checkbox icon and legalese when you have other content for comp

[thisandagain]

@HPaulJohnson Probably. I'll try to dig out some details.

@xmatthewx Not particularly, also a way bigger lift as we'd need to create a new table and API endpoint just for this.

[vazquez]

Updating UI

Adding checkmark with Legal terms.

---

[unflagged]

Beta version of Landing Page

Beta version remains unchanged.

[vazquez]

Sketch file! 🎅 https://www.dropbox.com/s/cwoegt612voxydk/App%20Landing%20Page.sketch?dl=0

[HPaulJohnson]

This is looking awesome. A few notes about copy:

• For headline I think we should have a set of 6-12 different versions by the end of the week. I assume we are setting this up with Optimizely so we can test? If that's the case, working version we have here is fine.
• For quote, almost all of the press to-date on Webmaker has been around beta version from MWC and our digital inclusion work. It's been tough to find even a short pull quote that works well. I've added a few ideas in this etherpad (and feel free to browse the press hits yourself to find something better) but we may just want to use a user quote for now and update later when we start to do a bigger press push around launch.
• Copy for 'Free Forever' is also on etherpad. It's the same copy from existing site and if it needs to be shortened let me know.
• Copy for a third section ('Make Pages' in earlier comps) also included but I'm fine with dropping that section altogether based on latest design.

https://etherpad.mozilla.org/comingsoonpage

[lauradereynal]

@HPaulJohnson is the quote necessarly from a newspaper or could it be from a user ?

[HPaulJohnson]

User works fine at this point. Eventually if we get some great press pickup we can update as it adds a different level of 3rd party validation. But if you have great user quotes let's use them now.

[xmatthewx]

@LauraReynal - a user quote could be about the app or about the desire to share, connect, etc.

[lauradereynal]

Added quotes in the pad from previous reports + Chicago new ones

Line 50 - we could cut the parenthesis

Let me know if okay 🐰

[lauradereynal]

@HPaulJohnson Here is another quote that I just found you might like

"being able to create things is amazing, because a lots of time you don’t have the opportunity to create something, have ownership and people be a part of it" Chicago, USA

[thisandagain]

Tracking in mozilla/webmaker-browser#30

[adamlofting]

Belated response re where to save the emails: Yes to using BSD.

I've dropped some reference material in to the corresponding ticket mozilla/webmaker-browser#33