1737713 - Prototype QR code UX in "More from Mozilla" preferences panel for 96

Status: RESOLVED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Dan Mosedale (:dmosedale, :dmose)]

Punam is working on a "More from Mozilla" preferences panel. Product is interested in putting in a QR code / SMS UX to allow people to very easily download Firefox Mobile (see the bottom of https://mana.mozilla.org/wiki/display/FPS/More+from+Mozilla+-+Fx96).

I'm prototyping and have a few discussions to see what the options look like.

Comment 1

[Dan Mosedale (:dmosedale, :dmose)]

Attachment: WIP: Bug 1737713 - Add QR code linking to mozilla.org mobile page

Comment 2

[Dan Mosedale (:dmosedale, :dmose)]

Attachment: prototype, perhaps not exactly the layout we want just yet :-)

Comment 3

[Dan Mosedale (:dmosedale, :dmose)]

As implemented, this does what the Firefox Accounts Pairing code does -- it reaches into devtools/ directly and loads the QR code generator from there, which seems a bit fragile.

I suspect that what really wants to happen is that this code and markup wants to be abstracted into a web-component that lives in toolkit, but I don't know that for sure, because I haven't looked at how devtools uses it. That might mean switching out the (small bit of) XUL markup for XHTML.
So I suspect the more pragmatic thing to do would be to either do what FxA does or potentially fork the QR code generator.

:Honza, do you have any opinion on the above?

Comment 4

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Yes, I agree that the QR encoder/decoder logic can be moved to toolkit (or any other better place) since DevTools don't use it (at least I don't see any dependency).

Comment 5

[Vtay]

A question - this QR code we have generated. Does it have the ability to track its performance? Is it dynamic? I was checking out Beaconstac and was wondering if it might be worth looking into.

Comment 6

[Dan Mosedale (:dmosedale, :dmose)]

Venetia: it's just a URL. We can make it point to what we want. Which is to say we can put utm codes or whatever other info we want in the URL, potentially on a per-user basis. In other words, from what I understand from Beaconstac's web page, we should be able to do what they do without much trouble. That said, what we communicate back is subject to the usual Firefox Data Collection policies. Did you have something specific in mind?

Comment 7

[Vtay]

I am thinking ahead (maybe not for this experiment) if integration of Google Analytics to get a sense of the user (e.g. devices, countries, interests (maybe?) etc -- also making sure within our data collection policies) might be valuable for the mobile team. I'm chatting with Vesta & John today.

Comment 8

[Vtay]

FYI. we might be able to send a link that routes through bedrock and straight to the app store/GooglePlay (so that the user doesnt have to land on a bedrock page.) -- this way google analytics can still capture the data. Checking with a bedrock developer and will update.

Update: We can use Adjust links

Comment 9

[Vtay]

The Adjust link to be embedded in the QR code is this: https://app.adjust.com/2uo1qc?campaign=firefox-desktop&adgroup=about-prefs&creative=morefrommozilla&fallback=http%3A%2F%2Fmozilla.org%2Ffirefox%2Fmobile%2F

Comment 10

[Dan Mosedale (:dmosedale, :dmose)]

Since we've totally shifted tactics here and are going to use a static image, I've cloned this bug into bug 1740393, and will close this one out, as it's already got a bunch of (now unused) prototype work in it.

Comment 11

[Vtay]

RyanC updated the figma with the QR code + fox:
(He used a QR code generated that is open source -- https://www.figma.com/community/plugin/963138214942646066/QR-Coder)

FWIW, the shorter the URL the simpler the QR code. So one thought would be to use a URL shortener for these -
Option 1: https://www.figma.com/proto/dRT7zeJsSeYmAxfWnWGl4u/More-from-Mozilla?page-id=763%3A1467&node-id=763%3A1468&viewport=327%2C48%2C0.41&scaling=min-zoom
Option 2 - with URL shortner (Bit.ly): https://www.figma.com/proto/dRT7zeJsSeYmAxfWnWGl4u/More-from-Mozilla?page-id=763%3A1467&node-id=763%3A1595&viewport=327%2C48%2C0.41&scaling=min-zoom

Not sure if either has impacts on QA/ ease of use based on age of phone though..
Option 2 "looks" better though

Comment 12

[Dan Mosedale (:dmosedale, :dmose)]

After some searching, I found some discussions of QR code quality and scan reliability:

https://www.qrcode-tiger.com/qr-code-scanning-problems
https://www.sproutqr.com/blog/qr-code-wont-scan

Of course, both of these are from QR code vendors, so there is some vested interest here.

Interestingly, one of them (QRCode Tiger) claims that for some reason PNG is better to use for digital assets, though it fails to explain why they believe this.

Another thing I found, https://blog.free-qr-code.net/2020/10/qr-code-png-eps-vector/ suggests that it doesn't make any difference.

I would expect an SVG version should generally handle different sizes better than PNGs, so I'd be inclined to do that, though it may well be that it doesn't really matter that much either way.