1455444 - [Growth] Portland page updates - 3 variations w. new content

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, enhancement)

Description

[Eric Renaud [:erenaud]]

We need to:

Update the content in the current Portland page

Create 2 new variations on the same template (Fabio will provide the requested URLs)

Update the Adjust link for mobile to be provided in bug 1454272. One Adjust link will be provided, to be used in each page variation.

Comment 1

[Eric Renaud [:erenaud]]

Fabio - please provide the 2 URLs and attach/direct the attachment of the new content.

Comment 2

[Jonathan Petto [:jpetto]]

Peter - Can you chime in here (like in bug 1455208) on how long we'd need to run an experiment on the Portland campaign URL [1] to reach statistical significance?

Want to make sure this is feasible prior to getting too far down the path.

[1] https://www.mozilla.org/en-US/firefox/new/?xv=portland

Comment 3

[Fabio Rios [:frios]]

Hey Jon, below is the copy and URLs. We have new headlines AND the order of the three lower sections varies below by page. No changes to the copy on the three lower sections. Final art files coming, but here's a preview of the designs (https://docs.google.com/presentation/d/1Fd30ULkmDQrtLl9F_RCKbQ99Zcb9S3AQ-WdFfbgQEfU/edit#slide=id.g38a043ef5e_0_141)

1. https://www.mozilla.org/en-US/firefox/new/?xv=portland

[New header graphic]
Headline: Be proud of how you get what you need online

[Download]

Section 1: Socially Responsible
Section 2: Safe
Section 3: Efficient


2. https://www.mozilla.org/en-US/firefox/new/?xv=portland-fast


[New header graphic]
Headline: Browse 2x faster, ethically

[Download]

Section 1: Efficient
Section 2: Socially Responsible
Section 3: Safe

3. https://www.mozilla.org/en-US/firefox/new/?xv=portland-safe


[New header graphic]
Headline: Your online life, protected
[Download]

Section 1: Safe
Section 2: Socially Responsible
Section 3: Efficient

Comment 4

[Jonathan Petto [:jpetto]]

Ah, I read this as an experiment and not two new variations with unique URLs. Clearing NI for Peter - comment 2 is no longer relevant.

Comment 5

[Sung Park]

Attachment: _FX_PDX_LandingPage_Asset for Dev.zip

Here are the assets!

Comment 6

[Fabio Rios [:frios]]

Jon, I'd love to have the page scale to show more of or all of the three lower sections without scrolling. Can you set up that way?

Comment 7

[Jonathan Petto [:jpetto]]

(In reply to Fabio Rios [:frios] from comment #6)
> Jon, I'd love to have the page scale to show more of or all of the three
> lower sections without scrolling. Can you set up that way?

Can you expand on this a bit? Obviously this would only apply to screens wide enough to allow the three lower sections to sit side by side, but what about short screens? How small do you want to allow the top section to get?

Comment 8

[Jonathan Petto [:jpetto]]

Sung -

A few questions on the image assets:

- Would it be possible to get the images sans background color/gradient? I think we could save a fair amount of bytes if we let CSS make the gradient and lay the image on top.

- For the image with the full-width wave bottom (example text "Be proud of how you get what you need online"), we need a way for that wave to gracefully end if the visitor's viewport is wider than the image. I'm happy to discuss some possibilities here. (Perhaps the wave could be a separate SVG that we can scale as wide as the viewport.)

- For the train car image, we should probably separate the three top lines so we can extend/repeat them infinitely left/right (while keeping the car/window/passengers image anchored bottom right).

- For viewports too skinny to fit the text to the left of the image, what should be shown? Just a gradient background?

Comment 9

[Sung Park]

Jon,

Thanks for the flags. I'd be more than happy to enhance the UX.
I'm currently finessing the illustration so we can cover a wider viewport.
Meanwhile, I'll give you the background gradient hex code first.

Purple keyhole: #9400ff - #6200a4 (-56deg)
Blue train: #45a1ff - #0060df (90deg)
Blue dude reading: #45a1ff - #0060df (-39deg)

Comment 10

[Sung Park]

Attachment: _FX_PDX_LandingPage_Asset for Dev 2.zip

Hey Jon, I attached new svgs in the "illustration" folder.
Please LMK if these work

For viewports too skinny to fit the text to the left of the image,
yes, extension of the gradient background would be ideal.

Comment 11

[Sung Park]

(In reply to Sung Park from comment #10)
> Created attachment 8969833 [details]
> _FX_PDX_LandingPage_Asset for Dev 2.zip
> 
> Hey Jon, I attached new svgs in the "illustration" folder.
> Please LMK if these work
> 
> For viewports too skinny to fit the text to the left of the image,
> yes, extension of the gradient background would be ideal.

The gradient background + the white wave/ground on the bottom please!

Comment 12

[Fabio Rios [:frios]]

People visiting these pages via mobile will have a download button that points directly to the app stores. Here are the Adjust links:

1. https://www.mozilla.org/en-US/firefox/new/?xv=portland

https://app.adjust.com/4mnnhn?campaign=city_portland_2018&adgroup=website_xv_portland&creative=non-profit


2. https://www.mozilla.org/en-US/firefox/new/?xv=portland-fast

https://app.adjust.com/4mnnhn?campaign=city_portland_2018&adgroup=website_xv_portland&creative=fast


3. https://www.mozilla.org/en-US/firefox/new/?xv=portland-safe

https://app.adjust.com/4mnnhn?campaign=city_portland_2018&adgroup=website_xv_portland&creative=private

Comment 13

[Jonathan Petto [:jpetto]]

Sung - 

The variations are up on a demo and ready for creative review:

https://bedrock-demo-jpetto.oregon-b.moz.works/en-US/firefox/new/?xv=portland
https://bedrock-demo-jpetto.oregon-b.moz.works/en-US/firefox/new/?xv=portland-fast
https://bedrock-demo-jpetto.oregon-b.moz.works/en-US/firefox/new/?xv=portland-safe

A couple things to check in particular:

1. Responsive layout
2. Thank you pages - specifically on https://bedrock-demo-jpetto.oregon-b.moz.works/en-US/firefox/download/thanks/?xv=portland-fast - you'll know what I'm talking about when you see it. ;)

Feel free to provide feedback here or in Slack.

Thanks!

Comment 14

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/bedrock/pull/5597

Comment 15

[[github robot]]

Commit pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/1ad9fe290d496a4b9aed386600ecf341eb59c7a5
[fix bug 1455444] Add 2 more /new?xv=portland variations (#5597)

Comment 16

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/bedrock/pull/5599

Comment 17

[[github robot]]

Commit pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/93f8acc00df65b72a44d4d4e4a684ae98bf37bd7
[fix bug 1455444] Update bg on Portland safe /new variation. (#5599)