Customer Home: Add Email Me A Login Link Button to Go Mobile Card

[gwwar]

Alternative to #38949 and fixes #38861. Note that I'm avoiding SMS for now until p3btAN-1c0-p2 is resolved.

Folks are welcome to modify styles directly in this branch if folks had any suggestions/tweaks for the various viewports.

This moves the GoMobile card into it's own component, and also adds a button that will email an app download link and magic login link.

Desktop

Large Desktop Viewport	Small Desktop Viewport	IPhone	Android

Sent Email

Testing Instructions

• Create a new site (or visit a site created after Aug 2019)
• Visit http://calypso.localhost:3000/home/yoursite
• In Desktop, GoMobile Card is last. Clicking on the Email me a login link appears like the gif.
• We see the following analytics event

• Using Chrome devtools or a native device

• Repeat steps above simulating an Android and iOS device
• Verify that only one app badge renders at a time
• The email button should work
• Verify that the login link sent from the email works.

[matticbot]

Test live: https://calypso.live/?branch=add/go-mobile-email

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~882 bytes added 📈 [gzipped])

name  parsed_size           gzip_size
home      +3281 B  (+1.2%)     +882 B  (+1.3%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[megsfulton]

Testing in latest Chrome:

1. The email button doesn't work, I get a message that says "Sorry, we couldn’t send the email."

2. At viewports with a width from ~1035-1400 the store buttons get a little wonky

Screenshot taken at 1072:

3. I think the mobile and smaller views could benefit from having an illustration and alignment similar to the support card. @sixhours or @lcollette - could I get your feedback on adding an illustration to the mobile card on small screens?

If an illustration isn't appropriate, another option could be pulling the email button up to the same line:

4. Should the copy on the button read something more along the lines of "Email app download link"? The /me/get-apps page has more explanatory text and without that additional context "email me a log in link" doesn't feel like a very clear call to action.

[lcollette]

@megsfulton Thanks for the feedback and mocks! I'm open to either, but leaning toward the one without the illustration to start, given the card's placement and the available vertical space.

Should the copy on the button read something more along the lines of "Email app download link"? The /me/get-apps page has more explanatory text and without that additional context "email me a log in link" doesn't feel like a very clear call to action.

Oh, good catch! @obi2020, what are your thoughts?

[mmtr]

I tweaked the styles in 3c48066 and brought back the right-aligned banner approach we took in #38940, which should address also @megsfulton's feedback:

Before	After

[mmtr]

Thanks @gwwar! This is indeed a better approach than #38949.

Feel free to land this once folks come to an agreement on the final copy for the button #38960 (comment)

[danhauk]

I'm wondering if we need the "email me" button at all on mobile? It totally makes sense and adds usefulness on desktop. But it's a duplicate action of the app store badge button on mobile.

Could we safely remove the button on mobile since the app store badge will open the app store to download? This saves precious screen real estate and complexity for the user.

[obi2020]

@lcollette @megsfulton I think it's still clear if you remove "app"

• Email download link
• Send download link (sounds better but maybe not as clear, if it auto sends to wp.com acct email)

What will the button say or do after it's been clicked?

[mmtr]

What will the button say or do after it's been clicked?

It shows a global notice indicating the email has been sent and can be checked in the mail app:

[gwwar]

The email button doesn't work, I get a message that says "Sorry, we couldn’t send the email."

@megsfulton I believe we don't allow email logins with a8c accounts

I'm wondering if we need the "email me" button at all on mobile? It totally makes sense and adds usefulness on desktop.

@danhauk The most useful flow is when I'm visiting WordPress.com on a native mobile device in a web browser. The email login link is for the native app. On Desktop we're already logged in to WordPress.com. Does that make sense?

[gwwar]

Note that the global notices are shared. I'm happy to update copy but wanted to note that this will also affect messaging on the /me/get-apps section

[gwwar]

Thanks for reviews folks! I'll keep this open for another day or so to see if y'all had any other feedback. We're mostly code complete here unless we have any other changes in design. (I also verified that this works well on a clean indexedDB cache).

@megsfulton @lcollette with @mmtr's updates it now looks like following. Does this look okay? Did we have any other copy changes to make for the call to action or global notice messages?

I know we wanted the app icon to be in the same row as the button, but with the amount of CTA text here it's likely to overflow to two lines for the button.

#38960 (comment)

[lcollette]

I'm wondering if we need the "email me" button at all on mobile? It totally makes sense and adds usefulness on desktop. But it's a duplicate action of the app store badge button on mobile.

@danhauk I think these are two distinct actions. The badge is to download the app while the button sends an email with a magic link for logging in? Now I see the email actually contains links for the app AND to log in.

The goal of this card is to encourage downloading the app, yeah? I don't know that the login link button makes enough sense within that scope or without the additional contextual copy. I'd vote to remove it for now, assuming the badge will drive downloads. That feels better than having two similar yet slightly different CTAs.

[gwwar]

I'd vote to remove it for now, assuming the badge will drive downloads.

@lcollette this was direct feedback from @elibud to update placement and add either SMS or the email login.

If we'd want to have a single CTA, I'd think it's more useful to remove app badges in favor of the email, with different copy.

[mmtr]

@lcollette this was direct feedback from @elibud to update placement and add either SMS or the email login.

I think @elibud was referring to desktop viewports only (see #38861 or pbAPfg-10-p2#comment-37):

provide the option to SMS or email a link when the user is visiting on a desktop device.

I agree with @lcollette that the goal of this card is to encourage downloading the app, so on a desktop device I think we should display the email link button with maybe a different copy that emphasizes the download action (I like something like "Email download link" as suggested by @obi2020 above). I know the email will come with a log in link as well, but users would be likely more interested in the download link.

On mobile devices, folks are used to go to stores and download the apps there rather than getting emails with links to download them, so I think it makes sense to focus on the store badges and hide the email link button. As pointed out by @danhauk, this saves screen space and complexity for the user (they know what they will get from the store badge but they might get confused with the email link).

[gwwar]

Cool, I double checked with Eli, and we'll go with additional SMS/email options only visible in desktop views. I'll update / redo summary pics

[gwwar]

Note that any of the lib/viewport (isDesktop/isMobile) checks only measure during page load, so resizing the window will have slightly different behavior.

[gwwar]

This is ready for re-review, folks are welcome to make changes directly to the branch if y'all had additional feedback. If it's approved while I'm offline feel free to

[mmtr]

Thanks @gwwar for the update!