Implementation: Update /firefox/accounts page conditional states

RESOLVED FIXED

Status

www.mozilla.org
Pages & Content
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: agibson, Assigned: agibson)

Tracking

Production

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [sprint 3], URL)

Attachments

(1 attachment)

(Assignee)

Description

2 years ago
In Orlando we built the /firefox/accounts page for an experiment. This was done in just a few hours, so we cut many corners and the page was never considered "production ready".

We would now like to finish this page and make it fit for localization, which means we need to address the following:

1.) Remove client side redirects for non-eligible users.
2.) Add conditional messaging for non-eligible users (requires new strings for l10n).

- Users already signed into their account.
- Mobile users (Firefox).
- Mobile users (non-Firefox).
- Non Firefox users.
- Out of date Firefox users (do we need this one?)

3.) Expose final strings for l10n extraction.

We also have a home page promo linking to this page that is currently shown to English locales only [1]. We probably want to expose this for localization also as part of this bug.

[1] https://github.com/mozilla/bedrock/blob/master/bedrock/mozorg/templates/mozorg/home/home.html#L121-L131
(Assignee)

Updated

2 years ago
(Assignee)

Updated

2 years ago
Depends on: 1250228
(Assignee)

Updated

2 years ago
Assignee: nobody → agibson
Status: NEW → ASSIGNED
(Assignee)

Comment 1

2 years ago
As discussed with Flod on IRC, we also need to rethink our current usage of the "Firefox Accounts" word mark here: https://github.com/mozilla/bedrock/blob/master/media/img/firefox/accounts/firefox-accounts-wordmark-high-res.png

"Firefox Accounts" should technically be localized:

Flod: "In Italian it's "account Firefox" (lowercase in the middle of a sentence), but several locales completely localize it".

I don't think an l10n image is going to be the most practical solution here, so we need to rethink using a word mark like this (I'm also not sure if this was even an official Mozilla word mark?)
Page modifications for conditional states are as follows. Let me know if you'd like further guidance with mockups. We could take a look at your first pass at these and work together over vidyo to polish up. I've flagged Troy in brackets where copy is needed. 

Users already signed into their account: 
- display iframe contents for signed in user http://cl.ly/3a14033L0R0I
- remove 1-3 instruction steps
- [ Troy ] add “you are already signed in” messaging to page

Mobile users (Firefox - iOS):
- Remove 1-3 instruction steps intended for desktop user 
- [ Troy for link copy ] Display link to SUMO article page with details for this user

Mobile users (Firefox - Android):
- Remove 1-3 instruction steps intended for desktop user
- [ Troy for link copy ] Display link to SUMO article page with details for this user

Mobile users (non-Firefox):
- Remove 1-3 instruction steps intended for desktop user
- [ Troy ] Write one line of copy to set up mobile buttons
- Display app store buttons for iOS and Android

Non-Firefox users on desktop:
- Remove 1-3 instruction steps
- Display Firefox desktop download button

Out of date Firefox users: do we need special content for this use case?
Flags: needinfo?(tpalmer)
(Assignee)

Comment 3

2 years ago
Thanks Holly, I'll start work on this logic so we can drop the copy in when ready.
(Assignee)

Comment 4

2 years ago
SUMO link for Firefox iOS: 
https://support.mozilla.org/kb/sync-firefox-bookmarks-and-browsing-history-iOS

SUMO link for Firefox Android:
https://support.mozilla.org/kb/sync-bookmarks-tabs-history-and-passwords-android
(Assignee)

Comment 5

2 years ago
Hi Holly, 

I've started work on the conditional states in Comment 2 (pending copy from Troy). Do you have any visual direction I should work toward for our meeting on Thursday to review?

I'm happy to wing it, so to speak - but if you have any preferences on where things should appear etc please let me know? Thanks
Flags: needinfo?(hhabstritt.bugzilla)

Comment 6

2 years ago
Hey everyone

Here is a doc for the proposed conditional states copy:

https://docs.google.com/a/mozilla.com/document/d/1lwpVqrh4PQK3TAF2ZFsddzSQBr4ttnY13r0atw44ygo/edit?usp=sharing


(In reply to Holly Habstritt Gaal [:Habber] from comment #2)
> Page modifications for conditional states are as follows. Let me know if
> you'd like further guidance with mockups. We could take a look at your first
> pass at these and work together over vidyo to polish up. I've flagged Troy
> in brackets where copy is needed. 
> 
> Users already signed into their account: 
> - display iframe contents for signed in user http://cl.ly/3a14033L0R0I
> - remove 1-3 instruction steps
> - [ Troy ] add “you are already signed in” messaging to page
> 
> Mobile users (Firefox - iOS):
> - Remove 1-3 instruction steps intended for desktop user 
> - [ Troy for link copy ] Display link to SUMO article page with details for
> this user
> 
> Mobile users (Firefox - Android):
> - Remove 1-3 instruction steps intended for desktop user
> - [ Troy for link copy ] Display link to SUMO article page with details for
> this user
> 
> Mobile users (non-Firefox):
> - Remove 1-3 instruction steps intended for desktop user
> - [ Troy ] Write one line of copy to set up mobile buttons
> - Display app store buttons for iOS and Android
> 
> Non-Firefox users on desktop:
> - Remove 1-3 instruction steps
> - Display Firefox desktop download button
> 
> Out of date Firefox users: do we need special content for this use case?
Flags: needinfo?(tpalmer)
(Assignee)

Comment 7

2 years ago
Link to screenshots of HTML mock-ups for reference: https://docs.google.com/document/d/1LYZyrStyDttDy1zgxftdEh2zG9qPd5r2eOAj_4uTf18/edit
(Assignee)

Comment 8

2 years ago
Clearing needsinfo from Holly since we managed to work things out using the google doc.
Flags: needinfo?(hhabstritt.bugzilla)
(Assignee)

Comment 9

2 years ago
Created attachment 8724661 [details] [review]
GitHub pull request
(Assignee)

Comment 10

2 years ago
Branch is now up on demo2 for l10n: https://www-demo2.allizom.org/en-US/firefox/accounts/
(Assignee)

Comment 11

2 years ago
Hi Gareth,

As mentioned in our sprint planning meeting, we're currently in the process of updating this page with the conditional states outlined in Comment 2. Please let me know if you would like to capture any/all if these specifically in GA?

This PR also cleans up some naming conventions from the old test. It will update the GTM dataLayer events from:

{
    'event': 'mau2account',
    'interaction': type
}

to:

{
    'event': 'accounts',
    'interaction': type
}

We'd like to make sure we don't miss any data capturing in this process.

If you would like to meet to discuss any of the above, feel free to ping me on IRC. Thanks!
Flags: needinfo?(garethcull.bugs)

Updated

2 years ago
Whiteboard: [sprint 3]
(Assignee)

Comment 12

2 years ago
Gareth, just a heads-up that we're going to move forward with merging this page without adding additional GA event tracking. We can follow up to get tracking finished up when you have more time (I'll open a follow-up bug). Thanks
Flags: needinfo?(garethcull.bugs)
(Assignee)

Comment 13

2 years ago
Filed Bug 1255405 for GA measurement which we can use to follow up once this page goes live.
See Also: → bug 1255405

Comment 14

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

https://github.com/mozilla/bedrock/commit/8b6b52548f43699007d336ae1a8f073b471321f3
[fix bug 1250433] Update /firefox/accounts/ page conditional states

https://github.com/mozilla/bedrock/commit/7ed115ef4da88356127847d944667f0a0c363d18
Merge pull request #3913 from mozilla/bug-1250433-update-firefox-accounts-page

[fix bug 1250433] Update /firefox/accounts/ page conditional states

Updated

2 years ago
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.