Remove Connect Another Device (CAD) Dead-end after login on mobile

[davismtl]

I feel like we've already talked about it but I can't find an open bug.

On Android, after login, we ask people to setup a mobile device to complete setup. This is super confusing.

I'm not sure what the quick win is... Our old confirmation screen would prob be better.

More effort, we tell people to add a second email or setup TOTP.

Crouton bug?

┆Issue is synchronized with this Jira Task
┆Issue Number: FXA-748

[shane-tomlinson]

It's supposed to have a prefix on the body text "Still adding devices? Sign in to Firefox..." There is a bug on this somewhere... The original intent is that some users might legitimately want to add another device.

[shane-tomlinson]

Here's the other issue: mozilla/fxa-content-server#5858

[shane-tomlinson]

Also ref mozilla/fxa-content-server#5434 and mozilla/fxa-content-server#5408, mozilla/fxa-content-server#5262

[davismtl]

Also see:
https://bugzilla.mozilla.org/show_bug.cgi?id=1464762

linked to from here:
https://github.com/mozilla/fxa-bugzilla-mirror/issues/507

[davismtl]

See also, #615

Closing the other one since more context here.

[davismtl]

The mobile team is requesting that we resolve this by July 9th. (mobile trailhead)

https://bugzilla.mozilla.org/show_bug.cgi?id=1548331

[shane-tomlinson]

I left comments in the bug, opening about:home as requested is not possible for us since about: URLs are privileged and we are normal web content. We could however bring back the "Sync preferences" button that @ryanfeeley despised, or send the user to mozilla.org similar to how it's done on Trailhead.

[shane-tomlinson]

Assigning to @ryanfeeley for UX guidance.

[davismtl]

@ryanfeeley is working with Diane since this will be part of her internship project. She's helping us identify these dead-ends and is exploring solutions. She started documenting dead-ends here:
https://miro.com/app/board/o9J_kxH8-SQ=/

Examples of solutions discussed:

• Get user into the product experience as quickly as possible (likely easiest)
• Help user discover a new service
• Teach them to use a feature (e.g. Send Tab)

We could however bring back the "Sync preferences" button that @ryanfeeley despised,

Somehow during the user research from 2 weeks ago, there's a flow that sent users to account or sync preferences (can't remember which) and oh boy did the user look confused about what to do next. This is pretty much a dead end too.

[davismtl]

Oh, I'm also working on a product 1-pager today.

[ryanfeeley]

The basic idea is that we add an additional CAD experience for codes with something that goes deeper (as there is only one screen to worry about):
https://www.lucidchart.com/publicSegments/view/3204285c-ca60-46f8-b8f7-65db6cedf5d6/image.pdf

ACCEPTANCE CRITERIA

1. When the user verifies their first device, they are prompted to connect another device.
2. Upon connecting their second device, the original CAD page transitions to prompt them to send their first tab.
3. When the user signs into subsequent devices, they are always reminded to send a tab.

[clouserw]

This seems reasonable to me.

[clouserw]

@johngruen to comment please

[ryanfeeley]

Final design (zoom out in browser):
https://mozilla.invisionapp.com/share/GQT88RLWXAD#/376556183_Send_Tab_Wow_Moment

SVGs attached:
wow-moments-svgs-optimized.zip

I'll work with @LZoog on animating those SVGs. The first three should simply bob up and down in a loop. The latter needs something more attention grabbing and joyous (that also loops).

@davismtl Any metrics requests?

[davismtl]

We need to resolve this bug for metrics:
#2167

In summary, we need to measure these events to measure the success of this flow:

Send Tab Tutorial Complete
Send Tab Tutorial Skipped
Send Tab feature used

See: https://docs.google.com/document/d/1ppfBNDpALb1ndOJvIlOzakToBAmYuHzN4abxzbCdtCE/edit#

[ryanfeeley]

@davismtl @clouserw With @LZoog and @ericawright’s help, I think we landed somewhere pretty great with the animation. Will this work with our Content Security Policy? https://codepen.io/ryanfeeley/pen/ExYeYJP

[ryanfeeley]

Animation for Fenix https://codepen.io/ryanfeeley/pen/aboaxvV
iOS and desktop coming shortly

[ryanfeeley]

Animation for desktop
https://codepen.io/ryanfeeley/pen/jONvjNX
iOS coming shortly

[ryanfeeley]

iOS https://codepen.io/ryanfeeley/pen/YzKOozV

[LZoog]

@davismtl @clouserw With @LZoog and @ericawright’s help, I think we landed somewhere pretty great with the animation. Will this work with our Content Security Policy? https://codepen.io/ryanfeeley/pen/ExYeYJP

@ryanfeeley Thanks for the animations! I'm going to link them in #2502. That's great, they just need a couple of code tweaks to be ready to ship.

If we directly insert the CSS into the SVG, it complies with our CSP - this is how all of our animated SVGs were previously done and how I did the more recent ones. I've been told when we separate the CSS from the SVG, that's when we violate our CSP which prevents us from reusing our animations and causes some copying/pasting, but since UX prefers being able to see the animation from the link to the SVG in GitHub anyway (which makes sense, and requires the CSS to be in the SVG), it makes sense to leave them that way.

I will point out that mix-blend-mode doesn't work with Edge, but I don't imagine that's a problem. 😛