Build: Landing Page Optimization for Codemoji Traffic

[HPaulJohnson]

Existing /encrypt landing page was originally optimized for "qualified" traffic, largely email. We'd like to see what tweaks we can make for site visitors who have far less context about the campaign or even encryption. This traffic will come from "learn more" links in Codemoji as well as other traffic sources the Durable Team is developing.

Main tweaks are:

• Some subhead/explainer text that shows what the site is about.
• More prominent email capture component with clear value prob (that's not sign a pledge)
• Links back to Codemoj
• Links to other types of deeper-dive content. Ex. tips/upgrade software, teaching kits, etc.

[HPaulJohnson]

Held kick-off with @lovegushwa and @natalieworth today. We talked about the minimum requirements and various options for getting this done. Based on this conversation, it's likely we will make some tweaks to /hybrid/2 for this purpose. More meeting notes here:

https://docs.google.com/document/d/1lAFUZuHh8gofx9rTxVtNGbtkECdNmHLMcWyvUZfpHLM/edit

Next steps: Jordan and Natalie to discuss scope of work and prioritization relative to everything else in their queue.

[lovegushwa]

@HPaulJohnson here is a proof you can show to durable folks. Let me know if you have any changes, if not we can move this to a build ticket!

[lovegushwa]

Final Artwork. @ScottDowne please follow up with @natalieworth next week about the build. @HPaulJohnson will follow up with share progress links any anything needed to hook up social.

Redpen UI: https://redpen.io/p/kt1e79274321c7d2fd

.jpg UI @2x https://drive.google.com/a/mozilla.com/folderview?id=0B2qu3ExKWIlvSUlXN2JuSTBuUkk&usp=sharing

Ai source file: https://drive.google.com/a/mozilla.com/file/d/0B2qu3ExKWIlvS3ktZ3cxNGZTNlk

[ScottDowne]

I can get to starting on this Wednesday, and it'll be my priority until it's done, hopefully before the week is done. I havn't had a chance to take a close look at the redpens yet.

[ScottDowne]

@natalieworth @lovegushwa This is a new page under a new url, correct?

[ScottDowne]

Actually, is it 4 new pages, one for each of the videos? or is it only going to be or the first episode as it is displayed in the redpen?

[ScottDowne]

This isn't too much work, should have something ready for QA tomorrow.

Some things I need, I think, are:

• [x] share progress link, in this case, we're linking out to a share progress landing page, it seems? @HPaulJohnson http://share.mozilla.org/352/169283
• [ ] once we have live links, get them to paul for share progress. @scottdowne
• [x] @lovegushwa get new titles for each video.
  • Privacy Lets You Be You
  • Meet Encryption
  • Encryption and Free Expression
  • Stand Up For Strong Encryption
• [x] @natalieworth the smiley faces svgs https://drive.google.com/drive/folders/0B20-0lpP23c0NVkwSkltYWx1aE0
• [x] @HPaulJohnson final urls we want is https://advocacy.mozilla.org/en-US/encrypt/codemoji/[1-4]
• [ ] get new image for og image @natalieworth
• [ ] updage all og tags @HPaulJohnson
• [x] fix share progress footer http://share.mozilla.org/352/169283. @scottdowne
• [ ] sort out home page name
• [x] possible a/b test @lovegushwa to get comps for the other page, it should be more like /social

[natalieworth]

@ScottDowne I have the .svg's in this folder: https://drive.google.com/drive/folders/0B20-0lpP23c0NVkwSkltYWx1aE0

[lovegushwa]

@ScottDowne comp for possible a/b test:

[HPaulJohnson]

@ScottDowne here is the URL for the Share Page: http://share.mozilla.org/352/169283

I'll just need to update with the final URL of the new landing page when that is ready. Also, needs an updated graphic from @lovegushwa and @natalieworth (ticket #42)

[lovegushwa]

@ScottDowne Video titles:

1. Privacy Lets You Be You
2. Meet Encryption
3. Encryption and Free Expression
4. Stand Up For Strong Encryption

[natalieworth]

@ScottDowne Colours for codemoji area: Background: #005189 Text: #5381b9 Link: #ffffff Hover on link: #5381b9

[natalieworth]

Is it possible to add a hover state over the entire banner area? So the background could change to look like this on hover (#1c325e):

[ScottDowne]

Yup sounds doable.

[ScottDowne]

@natalieworth @lovegushwa

Mostly done. I didn't get the share link in the footer or share link in the video yet, but, if these are things we want in all the pages, we can probably split it into a separate task unrelated to this task.

http://warm-harbor-75615.herokuapp.com/encrypt/codemoji http://warm-harbor-75615.herokuapp.com/encrypt/codemoji-b

[ScottDowne]

Added the share links after all. Things left blocking shipping:

• [x] once we have live links, get them to paul for share progress. @scottdowne
• [x] add share progress links to page. @scottdowne
• [x] get svg icon for share footer @natalieworth
• [x] updage all og tags @HPaulJohnson

[HPaulJohnson]

Here are the OG tags:

<meta property="og:type" content="website"/> <meta property="og:title" content="Encryption matters"/> <meta property="og:site_name" content="Mozilla Advocacy - Encryption"/> <meta property="og:url" content="https://advocacy.mozilla.org/encrypt/"/> <meta property="og:description" content="I care about protecting #encryption and you should too. To learn more about how it works and why it’s worth protecting, check out this great website from @Mozilla.t"/> <meta property="og:image" content="https://advocacy.mozilla.org/assets/img/share/Encryption-facebook-b5-06.png"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:site" content="@mozilla"/> <meta name="twitter:title" content="Encryption matters"/> <meta name="twitter:description" content="Check out this great website from @Mozilla — it explains why #encryption is so important: advocacy.mozilla.org/encrypt"/> <meta name="twitter:image" content="https://advocacy.mozilla.org/assets/img/share/Encryption-twitter-b5-06.png"/>

We still need updated share images. The existing ones (above) talk about "take action." For this more general audience and this evergreen page they should be more general, "learn more about why encryption matters." We should have something existing that works from beats 1 or 2. @natalieworth

[HPaulJohnson]

@ScottDowne the "share this page" icon in the footer is broken

[ScottDowne]

@HPaulJohnson links are live, but un shared.

For share progress, we have 4 links with 2 variants, making 8 total.

https://advocacy.mozilla.org/en-US/encrypt/codemoji/[1-4] https://advocacy.mozilla.org/en-US/encrypt/codemoji-b/[1-4]

[lovegushwa]

@ScottDowne @HPaulJohnson updated social share card: https://drive.google.com/a/mozilla.com/file/d/0B2qu3ExKWIlvaEtpUG5oQnRyVkU/view?usp=sharing

Scott can you give the image a URL on the site. and update the og image tag ... ? Paul can answer any questions about this.

[HPaulJohnson]

@ScottDowne was doing some testing and realized we need to update the share code on the post-signup popup. Here's the new SP codes for that modal:

<div class='sp_169721 sp_em_small' >

[HPaulJohnson]

@ScottDowne can we make sure the links are updated within Codemoji app itself to point to the new landing page: advocacy.mozilla.org/encrypt/codemoji

Also, can we make that URL (advocacy.mozilla.org/encrypt/codemoji) redirect to one of the two new pages: codemoji/2 or codemoji-b/2?

[ScottDowne]

advocacy.mozilla.org/encrypt/codemoji should already be redirecting to /2

Links inside codemoji seem to be fine to me.

[HPaulJohnson]

yep- links are fine, i guess it's the redirect that needs fixing. Link destination is advocacy.mozilla.org/encrypt/codemoji but redirects to https://advocacy.mozilla.org/en-US/encrypt/social/4 for me?

[ScottDowne]

It's working for me. Let's try again tomorrow. I hope it's cache.

[ScottDowne]

We're all good here.