What’s black and white and scanned all over?
If you guessed “QR code,” you got it!
Let’s dive into how Venmo uses this ubiquitous square-shaped technology to deliver value to our users and merchants. (Will keep the cheesy jokes to a minimum).
To the human eye, a barcode is a set of parallel lines with different widths and spacing between them. The number on the bottom of the barcode is merely a translation of what the bars above mean to a scanner. The lines on the barcode are machine-readable and the optical scanners scan the code and pick up the embedded information.
Whether the barcode represents an item at the store or a patient number in a hospital, these codes are essentially unique identifiers.
Since the advent of these barcodes over 25 years ago, their usage and impact has skyrocketed across the globe. In Japan, years ago, these barcodes were the main tool for indexing goods, and when commerce exploded, the barcodes began running out of their unique 20 alphanumeric character combinations.
(Think of it as the Y2K for barcode numbers before Y2K)
Hara Masahiro, an engineer at Denso, invented the QR Code about 25 years ago. Denso was using barcodes to manage inventory of auto parts. This system became inefficient after some time, because there were up to ten barcodes on any one box. The need for storing more information within these graphical codes became the impetus of the modern QR Code.
tldr; a QR Code is a 2D barcode
Did you know QR stands for “Quick Response” ? The grid’s a 177 pixel square with fixed patterns for orientation and error checking codes for validation. The rest is converted to text, usually a URL, and often UTF-8. It looks like 2D barcodes because that’s exactly why it was invented. The code above is a nice example. The space can account for 31,329 permutations which consists of numeric, alphanumeric, and kanji. The information can be used to represent URLs, digital business cards, plain text, a number to prefill for SMS, an email address, a twitter handle, etc.
- The pixel density is correlated to the amount of information stored and is known as the version of the QR Code.
- Feature points are placed in specific areas of the QR Code that help determine the alignment pattern, margin, timing pattern, and format information.
- The Reed-Solomon algorithm is responsible for the error correction encoding on these QR Codes. Essentially, we can make the code more robust by adding some cushioning information that can be used if the integrity of the QRimage is muddled/compromised. This mechanism for redundancy is also used for CDs, DVDs, Blu-ray Discs, and even satellites. More information about these formulas can be found here. By leveraging Galois Field Arithmetic, which is used to generate ISBN book codes, we can observe four predominant error correction levels:
Naturally, the higher the error correction, the lesser storage capacity we have available.
Here at Venmo, we use QR codes in a few ways. Users can scan the QR code of another user to quickly find their Venmo profile. And merchants can print the code—or have customers scan the code on a device—for easy, touch-free payments.
Now that we’re somewhat acquainted with these symbolic images, let’s take a look at how they’re used in the wild.
I was at a camping event this past weekend with friends and there were merchants scattered throughout the camping grounds in Lakewood, Pennsylvania. If you’ve never had a Smoked Jackfruit sandwich, there’s still time to enlighten your taste buds on this heavenly dish as @cashonlybbq does catering, can be seen around NYC with their signature truck, and sells some items online. Despite their username tag, @cahsonlybbq preferably take Venmo as a form of payment. With social distancing measures, masks, reduced hand-to-hand interactions, and heightened health precautions, the line of hungry customers still moved like clockwork. The only thing really needed for this system to run was internet (the merchant had a convenient hotspot for all the patrons), and the Venmo app.
Here the full menu of @cashonlybqq offerings:
- Brisket Melt 🐮
- Pulled-Pork Sandwich 🐷
- Cuban Sandwich 🇨🇺
- Smoked Bahn Mi 🌾
- Pulled Chickenm Sandwich 🐔
Their vegetarian counterparts substitute everything for Jackfruit. 🍈
While the line kept moving along, there was an inefficiency manifesting. Despite having a pre-defined selection of a handful of items, the buyer would always have to scan the code that routes to @cashonlybbq’s profile, then the merchant would instruct the buyer the exact amount, and then the transaction would have the right information to be completed. This layer of friction was tedious and becomes analog labor for both parties. We are working on something to remedy just this. Programmable QRC is our initiative to allow a merchant to set a pre-filled amount to a given QR Code. This means that for @cashonlybbq, there can be 5 QR codes displayed, one for each item sold, and this would help reduce the amount of effort, human input error, and save time. The merchant would also have more insight into which one of their items is being scanned/purchased more often than others.
We have another flow at Venmo, show-to-pay is when the merchant scans the buyers code and is responsible for initialing the transaction. Our friends at CVS have been working diligently with us on this implementation of making a purchase at the counter between the Venmo user and the barcode scanner at their retail locations.
Unlike the scan-to-pay counterpart demonstrated above, our show-to-pay scren here needed some improvement. The above image is original implementation of this screen, wchuch used a white-on-blue contrast, and the size of the barcode is aligned with the width of the QR code. We learned that this combination of contrasts, colors, and barcode width didn’t yield the outcome we’d hoped for.
Here’s an attempt at a payment at CVS with this current design:
**To no avail, the scanner could not pick up our codes and we needed to improve the legibility.
We then made the following changes:
- We inversed the colors of the QR Code to now use blue on white.
- We increased the error correction on the QR Code from “Q” to “H
- We changed the barcode contrast to black on white and increased the width
- We used dots instead of squares
☝️ The most important and technically challenging aspect was changing our > QRCode design to use circles. Here’s how we did it:
Apple provides really straightforward APIs for creating these QRCodes, we just need to pass an encoded string to a filer, then get an image out of it:
Now that we have our QRCode image, we need to transform the asset into a grid of pixels that we can iterate over.
With some reference logic from: https://github.com/EFPrefix/EFQRCode , we were
able to modify the original code that worked in a
class and migrated this core
component into a swift
CIImage. Since our QRCodes will always
NxN Squares, the
height values are somewhat interoperable
- After obtaining our grid of pixels, applying a circular mask was as simple as: ✨
Alternatively, we can draw other shapes, as well. Here’s a snippet that draws triangles: This outputs the following:
We can go also go from diamonds:
Ad Astra ⭐ :
Eat your heart out 😉 :
This is our new “show to pay” screen with our signature aesthetic and branding and circular QR code finish. We took this new design and the difference in scan legibility was night and day.
Keep an eye out for our shiny new QR codes the next time you pay a friend or small business!