Project UNLOCK : An alternative to QR codes
QR codes have been around for 20+ years now, but have never really taken off. If you’re reading this, you probably agree that they’re not satisfying… This article suggests an other solution.
I’ve been involved in tech and culture for a while (I even co-founded a non-profit in Montreal called Techno Culture Club), and the question of blending digital and physical is something that I’ve tinkered with a lot.
We had the same need when I was working at thecamp — an innovation campus in the South of France. We needed to make it easy for visitors to access digital content linked to the physical space (ex. a video of a prototype, the webpage of a project, etc.).
In July 2018, I ran a two-day creative prototyping workshop to try and prototype different solutions. I invited my friend Julien Debyser to work with me on this subject. That’s where we came up with the first prototype of UNLOCK.
The brief: how might we enable visitors on the campus to access digital content easily, using their mobile phone?
Project philosophy
From the beginning, here’s how the project was conceived:
- Simplicity → We need a directory to point to online content. And that’s about it. Everything needs to be kept as lightweight and as intuitive as possible. Added functionalities better be added on the external ‘apps’ than on the main directory.
- Decentralization → Content can be anywhere on the Internet. And take any shape. Let’s not block ourselves by only including specific types of contents (Youtube video, Medium article, SoundCloud sound bite, etc.). Hosting is better done elsewhere.
- Discovery → We want to encourage exploration of the physical campus. No map lists all the info points. The user has no way to know how many contents are actually available. No linear path is forced.
- Learning → The web is an amazing place to learn new things and experiment. We want to be able to use content creation as a pretext to learn and share new skills. And it works the other way around as well: we want to value what is being done by visitors by making it easily accessible.
The solution : UNLOCK
UNLOCK is a directory of web links that can be ‘unlocked’ by the user when entering the corresponding code, or pattern. When the user sees a pattern on the campus, they replicate it on a given web address (http://plus.thecamp.fr in this case), and it points them directly to the webpage where the digital content is hosted.
Patterns are inspired by the Android home screen lock: they use a 3x3 grid with some dots linked. Each pattern corresponds to a number (the one on the picture above is 758369).
Because the recognition system is actually based on the human looking at it (and not your phone’s camera), patterns can take many shapes and forms. Some are very easy to find but others are hidden. They point to a great variety of digital contents (from simple audio files to videos, or even complete games).
OK but why is it better than QR codes?
- Nobody uses QR codes
- They can take any shape you want (huge, painted, DIY, etc.) because they’re isn’t any image recognition involved. (You can even just describe it with words, or explain it with movements)
- You can make a pattern that is visually linked to your project (a letter, a number, an arrow, etc.)
- The user can keep a trace of what they’ve found with a history
- It’s fun to ‘unlock’ content with gesture
Number of possibilities
One thing people are always concerned with is the total number of possibilities. In our case, we decided to restrict the possibilities in two main ways:
- Patterns are the same in both directions (12345 = 54321). Obviously, this devides the number of possibilities by half.
- Patterns can not curl onto themselves. We can’t use the same number twice. This also divides the number of possibilities (from infinite to finite).
Both choices were made to keep the pattern drawing as simple as possible. If patterns had a direction, then we would have to add some kind of arrow on the pattern to tell the user in which sense to draw it. This goes against the ‘simplicity’ principle.
That being said, there are still quite a lot of possibilities. With the help of a friend, here are the numbers we came up with:
So what to make of that? If you run a museum or a small innovation space, it should be plenty enough for you. But if you plan to run a large scale operation, you’ll run out of possibilities quite quickly. One option is to add one or two rows to the matrix. Obviously, if you have a 3x4 or 4x4 (or more) matrix, you’ll get a lot more possibilities…
A more in-depth look at patterns and contents
Types of contents
So UNLOCK can point to any content as long as it’s hosted somewhere on the Internet. Still, it is important to remember that visitors will be using their phones to access the content. Everything has to be built mobile-first.
Here are the types of contents that we’ve tried so far:
- Video (hosted on Youtube) → Videos are pretty straight-forward: interviews, project presentations, inspirations, construction timelapse, etc. We’ve also started producing dedicated content with portrait formats.
- MP3 → We tried with Soundcloud but it wouldn’t let user play it without installing the Soundcloud app. So we just host the MP3 somewhere and point directly to it. Modern browsers know how to play sound files and direcrtly include a player.
- Interactive presentation → We used Webslides to make some responsive, nice looking presentation. Self hosted.
- Glitch mini-apps →A number of mini-apps are hosted on Glitch. It’s a great way to host simple projects and encourage modifications.
- Timelines → We used Knightlab’s awesome Timeline.js to make some simple mobile-friendly timelines, with all the info stored in a Google Spreadsheet.
- Forms → We created feedback forms using Typeform. Different patterns are scattered on the campus in strategic places.
- App link → To link to a specific downloadable app, we built an intermediate webpage that sends the user to the App store or Play store according to the make of the phone (Apple or Android).
We’ve only scratched the surface of what’s possible. Here are a few other ideas that we haven’t tested yet:
- Real time data → Smart buildings are creating a lot of data. It could be interesting to give users access to some of it… How many visitors in a museum at a given time? Energy consumption over time?
- Interactive space → It could be possible to use a webpage to control a physical object. Switching light color? Leaving messages on a screen? Snapping a picture?
- Chatbot → OK, the chatbot fever has aged a bit, but there’s still fun interactions to imagine in a creative space.
- Threshold content → Some content could only be made available if enough people connect to it at the same time. It could be simple games, quizzes, or even videos…
- Commons → In an innovation space, it could be really interesting to encourage visitors to contribute to something that is shared and accessible for everyone…
- Augmented Reality → We also made some quick crude tests with AR.js. It wasn’t very conclusive because we didn’t spend enough time on it, but there would be a really nice logic to use the same pattern for tracking as for ‘unlocking’.
A specific app example: the treasure hunt
Patterns can point to all kinds of webpages. One of them that we developed at thecamp is a kind of treasure hunt around the campus. Visitors are put into teams and given a list of clues. Those clues help them find patterns that are all linked to different challenges. Challenges can be answered by taking a picture, recording a sound, writing some text, entering a code, etc. There are around two dozen challenges scattered on the campus. And the patterns ensure that the teams have actually followed the clues and found the challenge.
All the teams productions then end up in a Dropbox folder (using Dropbox API) and the facilitator builds a presentation with the content. Everyone meets up at the end to see what they’ve done.
Technically, we use the phone’s local storage to record the team name and the list of challenges that have been validated. But UNLOCK and the treasure hunt are treated as separate projects and the game is just one of the many possible applications…
It’s a great way for visitors to get accustomed to the UNLOCK system when arriving on the campus. They will be more inclined to use it when they see other patterns during their stay.
Patterns in the wild
Because patterns don’t rely on your camera’s phone to be recognized, they can take many shapes. There are some simple examples below. But it could go even further. A pattern can be described with words (“draw a big M” = code 7415369), movement (“4, up, right, right, down” = 41236) or even coordinates (“N, NE, E, SW” = 2367).
You can try some of these patterns by going to http://plus.thecamp.fr on your mobile phone (as I don’t work there any more, I can’t guarantee that they’ll all be active).
Getting technical
Technical stack
The prototype we built was based on Patternlock, a framework that reproduces the Android screen lock system (there are others). All the patterns were simply stored in a simple json file. Because we wanted the links to be available in French and English, here is how the content was organized:
{"code": "123",
"language": {
"fr": { "title": "Le titre",
"url": "http://"
},
"en": { "title": "The title"
"url": "http://"
},
}
}
All validated patterns were stored in the phone’s local storage, to not have to deal with user accounts.
thecamp experimentation — going further
It’s been on for about a year. Here’s what we’ve learned:
- Home screen → The webapp behaves sligthly better when you add it to the home screen. unfortunately, this adds a level of complexity for users (it also changes according to the OS and browser they’re using) and we’d need to find a better way to explain it (maybe using in-app onboarding)
- Finding new codes → The more patterns you have, the harder it gets to find codes that haven’t been used when you want to add new content. Ideally, some back-office could suggest unused codes when you want to create a new one.
- Content framing → It’s tempting to keep things super light and just point to content. Modern browsers can read an MP3 file natively for example. But it means you don’t get much control over the way the content is shown. Going further, it could be interesting to use templating for some types of contents and display them within the webapp (iframe-style).
Known limitations
Apart from the limited number of patterns available, there are two main limitations:
- Security → There is nothing preventing people from trying out random patterns (they usually do) and finding one that works by chance. If it poses a problem, it would be possible to add a function that locks the screen for a few minutes when they’ve tried 3 unknown patterns in a row.
- Alternative → Because the patterns are not tied to a specific instantiation of UNLOCK, someone could make a parallel version of your app (available through another URL) and use the same patterns to send to different contents. It’s probably quite unlikely to happen, and if someone puts that much effort into your space, you should probably listen to them. You can also use that to your advantage, by having different ‘contexts’ (one for adults and one for kids for example).
What’s next?
By now, I hope you’re convinced that we can do better than QR codes. And maybe you’re already thinking of potential uses for UNLOCK in your own context…
When I was still at thecamp, I pushed for the project to be open sourced, but it didn’t get much support. And anyway, the version we developed isn’t much more than a glorified prototype. You can probably do it in 2 or 3 days of work. If that’s something you’d be interested in doing, please let me know! Use the comments below… I’d love to see the idea used more widely in all types of spaces. And maybe give the project a new, more open, beginning.
