Making QR codes more user-friendly

Ross Malpass
Design Lead of Ombori Apps AB

So often, when doing UX and UI work, it’s the tiny details that make all the difference. Here’s a classic example.

The Ombori Selfie Mirror, Sales Remote and Customer Remote all use QR codes to transfer information to a customer’s mobile device. This could be product info, a coupon, or simply to enable them to take control of the screen. In theory, it’s super simple. Point your phone camera at the screen, and bam! The QR code does its thing.


In reality, though, it doesn’t always work quite that smoothly.

A QR code is basically a URL encoded into a simple binary visual format: black and white squares. The longer the URL, the more pieces of binary data it takes, and the more complex the QR code has to be. Once you throw in the added complications of shop store lighting and reflections, some phones, especially older ones, have a hard time reading the code. That pretty much negates most of the functionality of the devices.

So, how to make the QR codes easier to read? Well, the obvious answer is to make them bigger. But aesthetically, that was just horrid. So instead, we had to find a better way to make them display better.

If only there were a magic way to make the URLs shorter, then the QR codes would be easier to read…

Oh. Yeah. Right. The answer turned out to be super simple.

Now we run all those URLs through a URL shortener, and the QR codes work so much better, especially in real-world conditions. Even better, since our use-case is very specific, we can use very short lived URLs which expire after a few minutes, and thus only keep a very small amount of links in the database at any given time. This enables us to always have extremely short URLs, with a path of just a few characters.


Before... way too many pixels.


And after... much simpler.

We can file this one under so-obvious-when-you-think-about-it!

Reach out to Ombori