1370574 - Create Send Tabs landing page

Status: RESOLVED FIXED

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

Description

[kirby]

We want to fork the Sync page (https://www.mozilla.org/en-US/firefox/sync/) to create a page that describes the Send Tabs feature and recognizes these three user states:

-Using Firefox and logged in
-Using Firefox and not logged in
-Not using Firefox

Copy and design forthcoming.

Comment 1

[kirby]

Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1359894

Comment 2

[kirby]

Not a duplicate.

This bug is for landing page creation.

https://bugzilla.mozilla.org/show_bug.cgi?id=1359894 is to surface the Send Tabs feature to all users.

Comment 3

[kirby]

Here is the copy for all three user states:

Using Firefox and logged in
Headline: Logged in? ✅ Connected? ✅
Subheader: You’re in the clear to start device-to-device tab sharing.

Using Firefox and not logged in
Headline: You’re a hop, skip and a jump away
Subheader: Sign in to your Firefox Account to start sharing tabs between devices.

Not using Firefox
Headline: Up your browser game, up your tab game
Subheader: Download Firefox to send your open tabs to any connected device.

Universal Text

Headline 1: Still emailing yourself links?
Body Copy 1: Send tabs seamlessly from one device to another.

Headline 2: Device hop with ease
Body Copy 2: Start browsing in one place, pick up somewhere else.

Headline 3: Right tab, wrong device?
Body Copy 3: Share without a care knowing your data is protected.

Comment 4

[kirby]

Lee Tom was working on graphics for the Sync page (Bug 1370587).

Did Lee submit final graphics for the Sync page? Does moz.org have another design resource who can adapt the Sync graphics for the Send Tabs page?

Comment 5

[Eric Renaud [:erenaud]]

We are not able to find, as of now, the original image assets for the Sync page.  We do have a jpg of the design mock up from which Christa will try to pluck those images.

Jenny D. indicated that Ty Flanagan will be creating the images (the 'hero' and 3 images for each feature) for the Send Tabs page. Ty was out sick today (7/5)

Comment 6

[kirby]

Great. Does that mean Ty will also need to create images for the Sync Page? (Bug 1370587) Or can Lee's image assets be used for the reformatted Sync Page?

Comment 7

[Eric Renaud [:erenaud]]

We found the sketch files that Lee handed to Ty.  The images in question can be used in the Sync page.

Comment 8

[Eric Renaud [:erenaud]]

Ty - when image files are approved by design functional team, please upload those here and needinfo :jpetto

Comment 9

[Eric Renaud [:erenaud]]

Kirby, what is the requested URL - 

https://www.mozilla.org/firefox/features/sendtabs/ 

or

https://www.mozilla.org/firefox/features/send-tabs/

Comment 10

[kirby]

https://www.mozilla.org/firefox/features/send-tabs/ 

Because there's a space between the two words in the feature name.

Comment 11

[Edouard Oger [:eoger]]

Adding the desktop implementation bug as a "see also" to keep us in the loop.

Comment 12

[Ty Flanagan]

Attachment: Images-SendTabs.zip

Comment 13

[Jonathan Petto [:jpetto]]

Open questions on page layout and copy:

1. I'm pretty sure emoji's aren't a great idea to place in copy that will be translated. Can we get an alternative to "Logged in? ✅ Connected? ✅"? Maybe something like "Logged in and connected!".

2. Assuming we're keeping the possible states currently used on the recently updated Sync page, we need copy for old versions of Firefox, and Firefox for Android/iOS. We can use the same copy from the Sync page for both to make things easy.

    a. Old Firefox: "It looks like you’re running an older version of Firefox."

    b. Fx Android or Fx iOS: Same copy as up-to-date Firefox (signed out).

3. Assuming "Universal Text" from comment 3 refers to the 3-up image + copy section, which image should go with each bit of copy? (Screenshot of 3 images will be attached in the next comment.)

4. Missing copy:

    a. Page title
    b. Page description
    c. Hero headline ("Firefox Send Tabs"? "Send Tabs"?)
    d. Hero sub-head (if needed, we don't have one on Sync page, but do on /features/fast)
    d. In-page sub-heads (white text on black bar, e.g. "Sync" and "Features" on current Sync page)

5. Where on /firefox/features/ should the icon/text for this new page be placed? Maybe directly after Sync (and before Fx for Android)? Do we need/have a separate image for this, or should we re-use the hero image provided?

6. Do we want to keep the same CTAs as used on Sync?

    a. Mobile download buttons for up to date and signed in
    b. "Get started with Sync" for up to date and signed out
    c. Download button for non-Fx and old Fx
    d. No CTA for Fx Android/iOS

7. Finally, how tightly coupled should this page be to the current Sync page? In other words, should they have a hard connection to a base template (meaning if we change one layout, the other must change as well), or should this new page be a copy, allowing us to tweak both Sync and Send Tabs independently? I'm guessing the latter.

Comment 14

[Jonathan Petto [:jpetto]]

Attachment: Screen Shot 2017-07-17 at 4.43.13 PM.png

provided 3-up images

Comment 15

[Alex Davis [:adavis]]

:jpetto any chance you could could put the page up with "under construction" on it (any type of placeholder would do) while this page is under construction and you work out details with Kirby?

:eoger needs to merge his code on nightly that will link to this page (before soft freeze) so that the feature can be tested before the merger to beta in two weeks. We're OK with the page being "under construction" or "in progress" for a few days since it still allows us to test. We just want to avoid the 404 not found. We're confident you'll have the page done by the time the merger happens.

Thanks in advance for looking into this.

Comment 16

[Michele Warther]

:jpetto - Kirby is out this week, so jumping in with a few answers for her...this should give you everything but one (page title)

1. "Logged in and connected!" YES

2. We can use the same copy from the Sync page for both to make things easy.YES

3. Image #1 still emailing...
   Image #2 device hop...
   Image #3 right tab...

4. Missing copy:

    a. Page title - send tabs anywhere
    b. Page description - TBD
    c. Hero headline - share your tabs from one device to another
    d. Hero sub-head - Add Firefox on your personal devices to get your bookmarks, open tabs and passwords anywhere. Get secure access to everything you need when you sign into Firefox Account.
    d. In-page sub-heads - just features (i.e there is no "sync" on this page)

5. Right after sync and same hero image

6. Do we want to keep the same CTAs as used on Sync? YES

7. Tweak both Sync and Send Tabs independently

Comment 17

[Eric Renaud [:erenaud]]

FYI - I asked Krishna to provide the metadata (title & description) in this doc - https://docs.google.com/document/d/10hv9sYVbdcbDbmjiMAQnOPhqWDMzo4hi8X7z0TN1hUY/edit#heading=h.ltiqu18114e

Krishna, when done, please needinfo :jpetto here.

Comment 18

[Krishna]

Metadata title and sub has been added to the doc: https://docs.google.com/document/d/10hv9sYVbdcbDbmjiMAQnOPhqWDMzo4hi8X7z0TN1hUY/edit#heading=h.zasgwkju5d16

Comment 19

[Jonathan Petto [:jpetto]]

(In reply to Alex Davis [:adavis] [PM FxA+Sync] from comment #15)
> :jpetto any chance you could could put the page up with "under construction"
> on it (any type of placeholder would do) while this page is under
> construction and you work out details with Kirby?

I'd rather not have an incomplete page live on moz.org. Could we instead instate a temporary redirect from /firefox/features/send-tabs/ to /firefox/features/sync/?

Comment 20

[Alex Davis [:adavis]]

:jpetto works for me!

Comment 21

[Jonathan Petto [:jpetto]]

The changes are up on my demo server:

https://bedrock-demo-jpetto.us-west.moz.works/en-US/firefox/features/
https://bedrock-demo-jpetto.us-west.moz.works/en-US/firefox/features/send-tabs/

I have a few concerns:

1. The head/hero copy is pretty long. We can drop the font size, but then our font sizing would be inconsistent between feature pages. I'm never one to advocate for design over content, but this may be a case where we should look at shortening the copy.

2. Not having a heading above the contextual copy (e.g. "Logged in and connected!") looks a bit odd. Can we add a heading that just reads "Send Tabs"?

3. The image on /firefox/features/ has a transparent background (which allows the placeholder grey to shine through), which is inconsistent with the rest of the thumbnails. It's not horrible, but would be nice to get a gradient background behind the devices for consistency. (This is admittedly a minor concern.)

Comment 22

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/7c40b2afb73461d8035f87b24f2c9c947cb6c86b
[fix bug 1370574] Add temporary redirect for send tabs page.

https://github.com/mozilla/bedrock/commit/246ed95f664974a08942ace47226869f4696f578
Merge pull request #4984 from jpetto/bug-1370574-add-redirect-for-send-tabs-page

[fix bug 1370574] Add temporary redirect for send tabs page.

Comment 23

[Michele Warther]

:jpetto - Yes, the head/hero is really long. I misunderstood when you asked for hero headlines over the regular head lines. How about we amend to include your recommendations

Using Firefox and logged in
Headline: Firefox Send Tabs
Subheader: Logged in and connected. You’re in the clear to start device-to-device tab sharing.

Using Firefox and not logged in
Headline: Firefox Send Tabs
Subheader: You’re a hop, skip and a jump away. Sign in to your Firefox Account to start sharing tabs between devices.

Not using Firefox
Headline: Firefox Send Tabs
Subheader: Up your browser game, up your tab game. Download Firefox to send your open tabs to any connected device.

I'd move the current headline copy below the hero image. "Share your tabs from one device to another. Add Firefox on your personal devices to get your bookmarks, open tabs and passwords anywhere. Get secure access to everything you need when you sign into Firefox Account <link>."

Comment 24

[Jonathan Petto [:jpetto]]

It's tough talking about content areas using text only...

I don't think moving the contextual copy to the hero area would be good UX, as the contextual CTAs are below the hero image. For example, if the user is not logged in to Sync, the "Get started with Sync" CTA would be quite a ways from the "You’re a hop, skip and a jump away. Sign in to your Firefox Account..." contextual copy. The closest CTA would be the download button, which isn't the action we'd want them to take.

We could consider moving *all* contextual content (copy and CTAs) up into the hero area, but that's a larger conversation, and would lose consistency with other features pages (that all have the download button in the hero area).

To keep things simple, I recommend keeping the model we used on the Sync page - hero copy is consistent for all page states, while contextual copy & CTAs are kept below the hero image.

Krishna (our moz.org copywriter) is happy to jump in to help us out here.

If that can't work, we'd probably need a UX/design phase.

Comment 25

[Krishna]

Hi All -  Taking a pass at this copy, and have a few thoughts.

1. We've got two different CTAs in the hero (download Fx onto devices and create a Fx account), which are later repeated in the user state copy below. This may be confusing to visitors. I'm working on simplifying this statement to the takeaway (i.e.,you can share tabs with Fx). Copy to follow tomorrow AM. 

2. The current layout of the user state copy is easy to miss (sandwich meat placement and tiny font). Is this intentional?

3. New, non-fx users should get a bit of education on how to actually send tabs. ex. download fx, add sync plug-in, create a fx account, etc. What is the logical next step for them? Is it to just download Fx? Will it be clear for them post-download how to do this or do we require a mini-copy road map? 

Thanks,
Krishna

Comment 26

[Krishna]

All - Revised copy here: https://docs.google.com/document/d/1RhkYxRlTduroW0VNSojxxZpF2e5QBcnht2qe-Pa4mac/edit#heading=h.30d0eo35o60v

Comment 27

[Jonathan Petto [:jpetto]]

(In reply to Alex Davis [:adavis] [PM FxA+Sync] from comment #20)
> :jpetto works for me!

The redirect is now live:

https://www.mozilla.org/firefox/features/send-tabs

Comment 28

[Jonathan Petto [:jpetto]]

Attachment: GitHub PR

Comment 29

[Jonathan Petto [:jpetto]]

Peter -

We previously discussed the changes required here in relation to the ordering of features on /firefox/features. Specifically, we talked about changing the "data-link-position" attribute to reflect ordinal position of the feature. Send Tabs is sliding in between Sync and Android, which means increasing the "data-link-position" for all following features.

The wrinkle I missed the first time around is that the /firefox/features/ page is now localized, which means we will conditionally show the Send Tabs feature only to those locales that have the strings translated. Finally to the point, this means that "data-link-positions" will have different content for different locales. For example, at launch, in en-US, Android will have "data-link-position=6", whereas for all other locales, it will have "data-link-position=5".

Do you see a problem with this?

Comment 30

[pgerman]

It is not an issue for the same feature to have a different data-link-position in different locales as long as the data-link-name is in English for all locales.

Comment 31

[Ty Flanagan]

Attachment: Images-SendTabs-replacements.zip

Comment 32

[Jonathan Petto [:jpetto]]

Got 'em in the PR. Thanks Ty!

Comment 33

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/170ddfde8779111bc44863af9d3140b3622fd388
[fix bug 1370574] Add send tabs feature page.

https://github.com/mozilla/bedrock/commit/1eea99e8d16da929e533df3da53be1574982481a
Merge pull request #4988 from jpetto/bug-1370574-add-send-tabs-feature-page

[fix bug 1370574] Add send tabs feature page.