Create Send Tabs landing page

RESOLVED FIXED

Status

RESOLVED FIXED
a year ago
4 months ago

People

(Reporter: kirby, Assigned: jpetto)

Tracking

(Depends on: 1 bug)

Production

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments)

(Reporter)

Description

a year ago
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.
(Reporter)

Updated

a year ago
Summary: Create Send Tabs landing pages → Create Send Tabs landing page
(Reporter)

Comment 1

a year ago
Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1359894
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1359894
(Reporter)

Comment 2

a year ago
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.
Status: RESOLVED → REOPENED
Resolution: DUPLICATE → ---
Depends on: 1365013
(Reporter)

Comment 3

a year ago
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.
(Reporter)

Comment 4

a year ago
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?
Flags: needinfo?(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)
Flags: needinfo?(erenaud)
(Reporter)

Comment 6

a year ago
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?
Flags: needinfo?(erenaud)
We found the sketch files that Lee handed to Ty.  The images in question can be used in the Sync page.
Flags: needinfo?(erenaud)
Ty - when image files are approved by design functional team, please upload those here and needinfo :jpetto
Assignee: nobody → jon
Flags: needinfo?(tflanagan)
(Reporter)

Comment 10

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

Because there's a space between the two words in the feature name.
Flags: needinfo?(kirby)
Adding the desktop implementation bug as a "see also" to keep us in the loop.
See Also: → bug 1359894

Comment 12

a year ago
Created attachment 8886675 [details]
Images-SendTabs.zip
Flags: needinfo?(tflanagan)
(Assignee)

Comment 13

a year ago
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.
Flags: needinfo?(kirby)
(Assignee)

Comment 14

a year ago
Created attachment 8887240 [details]
Screen Shot 2017-07-17 at 4.43.13 PM.png

provided 3-up images
: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.
Flags: needinfo?(jon)

Comment 16

a year ago
: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
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.
Flags: needinfo?(kpurohit)

Comment 18

a year ago
Metadata title and sub has been added to the doc: https://docs.google.com/document/d/10hv9sYVbdcbDbmjiMAQnOPhqWDMzo4hi8X7z0TN1hUY/edit#heading=h.zasgwkju5d16
Flags: needinfo?(kpurohit)
(Assignee)

Comment 19

a year ago
(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/?
Flags: needinfo?(jon) → needinfo?(adavis)
:jpetto works for me!
Flags: needinfo?(adavis)
(Assignee)

Comment 21

a year ago
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.)
Flags: needinfo?(mwarther)

Comment 22

a year ago
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.

Updated

a year ago
Status: REOPENED → RESOLVED
Last Resolved: a year agoa year ago
Resolution: --- → FIXED
(Assignee)

Updated

a year ago
Status: RESOLVED → REOPENED
Resolution: FIXED → ---

Comment 23

a year ago
: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>."
(Assignee)

Comment 24

a year ago
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

a year ago
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
Flags: needinfo?(jon)
(Assignee)

Comment 27

a year ago
(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
Flags: needinfo?(jon)
(Assignee)

Comment 28

a year ago
Created attachment 8888371 [details] [review]
GitHub PR
(Assignee)

Comment 29

a year ago
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?
Flags: needinfo?(peter.german.bugs)

Comment 30

a year ago
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.
Flags: needinfo?(peter.german.bugs)

Comment 31

a year ago
Created attachment 8890478 [details]
Images-SendTabs-replacements.zip
Flags: needinfo?(jon)
(Assignee)

Comment 32

a year ago
Got 'em in the PR. Thanks Ty!
Flags: needinfo?(jon)
(Reporter)

Updated

a year ago
Flags: needinfo?(kirby)

Comment 33

a year ago
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.

Updated

a year ago
Status: REOPENED → RESOLVED
Last Resolved: a year agoa year ago
Resolution: --- → FIXED

Updated

4 months ago
Flags: needinfo?(mwarther)
You need to log in before you can comment on or make changes to this bug.