Bedrock: Redesign Send-to-Device Widget

[maxxcrawford]

Description

Epic #9864

Task: Design a new widget -- it should include email, QR code, and app-store badges

Notes:

• Include error/success states
• Consider L10N length/copy
• Consult @pmac about how to improve QR code generation
• Confirm we can measure performance between QR Code and Email
• Reduce size of QR code
• Make App-store badges optional for pages like /mobile where they are elsewhere on the page
• Handle horizontal and vertical orientations. (🍔 vs 🌭)

---

Success Criteria

• [ ] UI that accounts for all the notes above, while maintaining Protocol design guidelines
• [ ] Approved by … others? (TBD)

Screenshots

QR Code Widget in Hero: (https://www.mozilla.org/it/firefox/mobile/)

QR Code Widget (above footer) (https://www.mozilla.org/it/firefox/mobile/)

SMS/Email Widget in Hero: (https://www.mozilla.org/en-US/firefox/mobile/)

SMS/Email Widget in Hero: (https://www.mozilla.org/en-US/firefox/mobile/)

[pmac]

I should be able to provide a template helper method that can take some data (a URL most likely) and replace it with SVG data that will be embeded into the page using the qrcode library.

[stephaniehobson]

List of pages currently using the S2D widget:

http://localhost:8000/en-US/firefox/mobile/
http://localhost:8000/en-US/firefox/mobile/get-app/
http://localhost:8000/en-US/firefox/whatsnew/all/
http://localhost:8000/en-US/firefox/79.0/whatsnew/all/
http://localhost:8000/en-US/firefox/80.0/whatsnew/all/
http://localhost:8000/en-US/firefox/81.0/whatsnew/all/
http://localhost:8000/de/firefox/85.0/whatsnew/all/
http://localhost:8000/en-US/firefox/welcome/4/
http://localhost:8000/en-US/firefox/welcome/5/ (for Lockwise, not Mobile)
http://localhost:8000/en-US/firefox/welcome/6/

[stephaniehobson]

The default display for the macro is "horizontal" but we are over-riding with "vertical" everywhere we use it. So, a testing page will need to be made to test the horizontal layout (or maybe we can remove it?)

[pmac]

I've got a PR in for a code generator template helper function. Y'all give it a try and let me know if it's working the way you need it to https://github.com/mozilla/bedrock/pull/9877

[maxxcrawford]

The default display for the macro is "horizontal" but we are over-riding with "vertical" everywhere we use it. So, a testing page will need to be made to test the horizontal layout (or maybe we can remove it?)

Adding the different orientations to the considerations list.

[maxxcrawford]

Opt A:

• Allows for app store badges to be turned on/off

---

Opt B:

• Compact version of A, with app badges given the same hierachy as QR/email.

---

Option C (Two-part):

The idea behind this one is that we'd A/B test/coin flip which page its on when the user lands. (QR vs Email)

[alexgibson]

There's also this URL (you may need to update your master branch as it was only just added recently)

http://localhost:8000/de/firefox/85.0/whatsnew/all/

[Aayushap1]

I would like to work on this project. Please assign to me

[hoosteeno]

@justinkropp Can we call in a favor? Would you review the variations in https://github.com/mozilla/bedrock/issues/9875#issuecomment-769418011 and give us any feedback?

[justinkropp]

Happy to. Feedback below (to be taken with a grain of salt ;) ):

Opt A

• the proximity between the QR code and the email input field feels too close
• if the idea is to gauge performance of email vs. QR code, or to just simply give the user a choice, this option feels problematic
• I could imagine a user entering their email and then questioning whether or not they need to also do something with the QR code

Opt B

• visually, this feels like it has the right balance of separation between the QR code and email
• however, if you going to place the QR code next to the app store badges you might want to be more explicit with the language; something that speaks to both the code and the badges
• "Scan the QR code or click on the app store badge(s) to get started..."

Opt C

• While I like these options for their ability to even further separate out email vs. QR code, I question whether or not users will understand that they can click into those different tabs
• And if they do understand, will they? User are pretty lazy

Does this help? Between them all, I like B. Also, nice work @maxxcrawford!

[maxxcrawford]

@justinkropp Thanks for the feedback! I agree – Option B feel like the right balance. The app store links are optional to the widget, so they may or may not be there.

Changes made:
Swapped QR code to first/top action. By moving the email address below, the privacy disclaimer acts as a floor/spacer between either action and the app store links.

Opt B - App Links Turned Off/Hidden

Opt B - App Links Visible (Alt Layout)

[maxxcrawford]

@stephaniehobson @craigcook Are there height restrictions we should be concerned with? These widgets are getting tall.

[stephaniehobson]

This is looking great.

I am worried about the height as well since user testing show it works best embedded in a page instead of in a modal. I liked how you had the buttons next to the QR code in the first one, so maybe we can just massage the copy? Or remove it completely.

[maxxcrawford]

We should consider how other services are also handling this friction.