1139715 - Update Android product page to add Reading List - Design & Copy

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

>>Project/Request Title:
Update Android product page

>>Project Overview:
This bug is filed to make updates to the Android product page for FF38.

Wiki: https://wiki.mozilla.org/Firefox_Growth_Campaign_2015 

>> Creative Help Needed:
Copy:    Yes 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
From Arcadio:

We're revising the page to add reading list.

We also need to revise the page to show tablet devices next to the mobile phone at the top of the page. 

>>CTA and Design:
TBD

>>Expected Launch Date:
2015-05-12

>>Mozilla Goal:
Org Support

>>Mozilla Creative Collective:
No

>>Points of Contact:
Not provided

Comment 1

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

New request from PMM to update the Android page to

- Update page to highlight Reading List
- Revise the page to show tablet devices next to the mobile phone at the top of the page.

Arcadio - any further direction here in lieu of an Android brief?

Comment 2

[alainez]

Attachment: GP_10_inch_topsites

Reading List
- Visuals (Arcadio to provide screenshots): screenshots within the current Android device in the Uniquely Yours section
* Reading List home screen panel
* Reader View: day mode
* Reader view: night mode
- Copy: Enjoy a more pleasant reading experience with Firefox Reading List and Reader View. Build, sync and access your reading list where ever you have Firefox. Access your list even when you have no internet connection

Show tablet devices at top of page along with mobile phone device to show multi-device availability
- Add 10-inch tablet device with Top Sites -OR- Firefox desktop trust screenshot

Comment 3

[Matej Novak [:matej]]

Small tweaks to copy to add a headline and get it down closer to the length of the other blurbs in that section:

Read and save articles easily
Enjoy a more pleasant reading experience with Reader View and Reading List. Access your articles wherever you use Firefox, even when you're not online.

Comment 4

[Lee Tom]

Attachment: FFx_Android_desktop_01.jpg

Hi All, 
Attached is the page with some design updates including: 

- Tablet + phone in hero
- Updated hero background
- Updated Privacy section background (consistent with Private Browsing feature)

Arcadio, can you confirm which image of the tablet we want to use. ie: This one (Galaxy) is different than the tablet we're using here: http://cl.ly/image/2O0V1C37192n  If we want to use the Galaxy tablet, do we need to Photoshop out the Samsung logo?

Comment 5

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Hey Lee, comments from Arcadio/Winston

- Can we see with the 'Text yourself a link' sublink under the CTA
- Can we play with a color other than eggplant? It's overwhelming
- Add Reading List to the accordion
- Can we see with Fx Family Nav
- Confirm that these screenshots are the most recent from Arcadio 

Will you be able to have an updated design tomorrow?

Comment 6

[Lee Tom]

Attachment: FFx_Android_desktop_02.jpg

Here's the latest mockup addressing all Winston and Arcadio's comments (above). 

- Confirm that these screenshots are the most recent from Arcadio 
* confirming that the tablet/screenshot is the same as Arcadio provided in Comment 2. The smartphone graphic is the same graphic we're currently using on Google Play. (If there's a different smartphone graphic we want to show here, please direct me to it and I'll update.)

Comment 7

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

This is great thanks Lee.

Could we maybe incorporate the title from comment 3 'Read and save articles easily' in the accordion instead of 'Reading List', and have it expanded.

Comment 8

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: FFx_Android_desktop_02.jpg

Updated with the correct title in the accordion.

Note: not showing the expanded accordion because the screenshots are not final yet. The copy for that will be (per comment 3)

'Enjoy a more pleasant reading experience with Reader View and Reading List. Access your articles wherever you use Firefox, even when you're not online.'

Comment 9

[Matej Novak [:matej]]

Is "Text yourself a link" language that we've tested and found to convert the best? I think something like "Send yourself a link by SMS" might be clearer. (I think that's also closer to what Fabio found performed well on the snippet.)

Other than that, looks amazing. I love the dark blue in that lower section.

Comment 10

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: FFx_Android_desktop_03.jpg

Updated comps from Lee based on comments.

Note 1

It's not showing the expanded accordion because the screenshots are not final yet. The copy for that will be (per comment 3)

'Enjoy a more pleasant reading experience with Reader View and Reading List. Access your articles wherever you use Firefox, even when you're not online.'

Note 2

The main CTA's will open the Send to Device widget which prompts user for ph#/email. Within the widget there will be a text link to download from store.

Comment 11

[Lee Tom]

I'll post to the DAM soon, but here's the PSD to get started on implementation: 
http://cl.ly/0u0R0t0l0y1X

Comment 12

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Notes regarding mobile design from Lee.

> I just looked at the current page, keeping in mind our new design and the only 
> thing that stands out for me is how we treat the screenshots in the "Uniquely
> yours" section. I have a PSD that I prepared for webdev the first go around (here: http://cl.ly/3d3H1N231Z1m ),
> so it should be easy to make it match to the new > Reading List section.

> Regarding the other sections of the page - I don't think we need to mock anything up:
> - The hero image of the devices disappears at smartphone size
> - The Privacy icons stack vertically
> - The Sync animation disappears at smartphone size
> - Background colors will look the same as desktop version

Lee will be available to consult during implementation.

Final PSD: http://cl.ly/3d3H1N231Z1m

Comment 13

[Lee Tom]

Just a quick note, that the final PSD is the link in comment #11: 
http://cl.ly/0u0R0t0l0y1X

And the 'loupe' PSD for mobile view is: 
http://cl.ly/3d3H1N231Z1m

Comment 14

[Alex Gibson [:agibson]]

Hi Lee,

For the 'Uniquely yours' section, what image should we display when we open the accordion section for "Read and save articles easily"? There doesn't seem to be anything in the PSD. I'll need both high and low res images for desktop & mobile view for this, as well as an appropriate "dotted line" graphic.

Thanks

Comment 15

[Alex Gibson [:agibson]]

Lee, could I please also have a combined, un-cropped image of the tablet & phone? Thanks again

Comment 16

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Picking up responsibility for the images.

Comment 17

[Lee Tom]

Hi Alex, here's a PSD with the devices both, combined and layered (just in case :))
http://cl.ly/2O3g2W2G3Z2v


(In reply to Alex Gibson [:agibson] from comment #15)
> Lee, could I please also have a combined, un-cropped image of the tablet &
> phone? Thanks again

Comment 18

[Alex Gibson [:agibson]]

(In reply to Lee Tom from comment #17)
> Hi Alex, here's a PSD with the devices both, combined and layered (just in
> case :))
> http://cl.ly/2O3g2W2G3Z2v
> 
> 
> (In reply to Alex Gibson [:agibson] from comment #15)
> > Lee, could I please also have a combined, un-cropped image of the tablet &
> > phone? Thanks again

Thanks Lee, this should work nicely. Do we need a high-res version for this image too? It's pretty large already just at standard resolution, but let me know if you would like to add a high-res version too (either way is fine with me, will just need see if we can compress it well enough). Thanks!

Comment 19

[Lee Tom]

Alex, if it's not too much trouble - can we try to show a high-res version for the more capable displays? Maybe we can get the file sizes down with this: https://tinypng.com/

> Thanks Lee, this should work nicely. Do we need a high-res version for this
> image too? It's pretty large already just at standard resolution, but let me
> know if you would like to add a high-res version too (either way is fine
> with me, will just need see if we can compress it well enough). Thanks!

Comment 20

[Lee Tom]

Alex, here is a vector file of the droid @2x: http://cl.ly/1L3s3k3i1i19
and the optimized devices png (in case you misplace it): http://cl.ly/image/0k410l1R1w1m

Comment 21

[Alex Gibson [:agibson]]

(In reply to Lee Tom from comment #20)
> Alex, here is a vector file of the droid @2x: http://cl.ly/1L3s3k3i1i19
> and the optimized devices png (in case you misplace it):
> http://cl.ly/image/0k410l1R1w1m

Hi Lee, sorry this devices image doesn't seem to be a high-res version? I can export a regular sized one from the PSD fine, but if you would like a high-res png I need one that's @2x the original size (and isn't a huge download).

Also, I don't have illustrator, so i can't open .ai files unfortunately :( Can you please just provide an @2x png for the droid images? In can see to the rest.

Thanks

Comment 22

[Lee Tom]

Alex, Let's go with the devices image that I supplied. I don't have anything larger at this time. 

Here are the @2x pngs of the android graphic: http://cl.ly/24193u382h2W

Comment 23

[Alex Gibson [:agibson]]

I should hopefully have this up on a demo server shortly, but I would like to confirm all the strings are correct as we don't have a dedicated copy doc for this page. As far as I can see the new strings are:

"Get Firefox for Android" (CTA buttons)

"The features you love. The privacy you trust. The most customizable Firefox for Android yet." (sub heading)

"Send yourself a link by SMS" (SMS link)

"Read and save articles easily" (accordion heading)

"Enjoy a more pleasant reading experience with Reader View and Reading List. Access your articles wherever you use Firefox, even when you’re not online." (accordion copy)

"Learn how to open a private window" (privacy link)

"Learn how to share your browser" (guest browsing link)

Matej, can you please confirm or not if this looks complete so we can expose these to our localizers? Many thanks!

Comment 24

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Alex Gibson [:agibson] from comment #23)
> "Send yourself a link by SMS" (SMS link)

Hi Alex, where did you find this string?

We'll be using the Send to Device widget for this page so we don't need the string. Clicks on the CTA will trigger the widget, except for locales which do not support the widget (ref bug 1146982 comment 9). For these locales, we'll be showing the same CTA except link directly to the marketplace store.

Comment 25

[Alex Gibson [:agibson]]

(In reply to Cory Price [:ckprice] from comment #24)
> (In reply to Alex Gibson [:agibson] from comment #23)
> > "Send yourself a link by SMS" (SMS link)
> 
> Hi Alex, where did you find this string?
> 
> We'll be using the Send to Device widget for this page so we don't need the
> string. Clicks on the CTA will trigger the widget, except for locales which
> do not support the widget (ref bug 1146982 comment 9). For these locales,
> we'll be showing the same CTA except link directly to the marketplace store.

See Comment 9

Comment 26

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Ah, sorry Alex. Yeah we no longer need that string anymore.

Comment 27

[Alex Gibson [:agibson]]

(In reply to Cory Price [:ckprice] from comment #26)
> Ah, sorry Alex. Yeah we no longer need that string anymore.

OK, removing :)

Comment 28

[Alex Gibson [:agibson]]

OK this is now up on demo2:

https://www-demo2.allizom.org/en-US/firefox/android/

Comment 29

[Lee Tom]

Heya Alex, 
Any chance we can put enough padding between the features/accordion and the Privacy section so that the blue of the Privacy section doesn't twitch when you interact with the accordion?  That slight jump, coupled with the device/screenshot changing feels a bit jarring.  


(In reply to Alex Gibson [:agibson] from comment #28)
> OK this is now up on demo2:
> 
> https://www-demo2.allizom.org/en-US/firefox/android/

Comment 30

[Alex Gibson [:agibson]]

(In reply to Lee Tom from comment #29)
> Heya Alex, 
> Any chance we can put enough padding between the features/accordion and the
> Privacy section so that the blue of the Privacy section doesn't twitch when
> you interact with the accordion?  That slight jump, coupled with the
> device/screenshot changing feels a bit jarring.  
> 
> 
> (In reply to Alex Gibson [:agibson] from comment #28)
> > OK this is now up on demo2:
> > 
> > https://www-demo2.allizom.org/en-US/firefox/android/

Sure, will see what I can do. It may be unavoidable to an extent, since the accordion changes the height of the page. But we may be able to pad it out a little more without creating too much empty space.

Comment 31

[Alex Gibson [:agibson]]

I've restored the subhead to the previous existing string, as discussed in the email with Cory & Lee.

I've also worked out a simple way to avoid the page height jump when the accordion collapses/expands.

https://www-demo2.allizom.org/en-US/firefox/android/

Comment 32

[Matej Novak [:matej]]

This page is looking great. Are there still any outstanding questions for me?

Comment 33

[Alex Gibson [:agibson]]

Nope, thanks Matej!

Comment 34

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Troy created a copy document here: https://docs.google.com/document/d/109m37p8-3H8qHXkqVS6iJ1KgO1o6MKhW3dTcA33fIIA/edit