A business card that is an app
We replaced our paper business cards with one web address per person: a profile, a pocket card the QR code opens, and an installed app that shows the QR — even without signal. No app store, no NFC, nothing for the other person to install. How it works, and the small details that decide whether the phone says “Add contact”.
- Published
- Reading
- 4 minutes
- Topics
- Product
Web Engineering
Engineering - Written by
- Pedro Thomaz
- Discipline
- Webdesign & Engineering
- Share
Paper business cards have three problems. They run out exactly when you need them, the other person has to type everything in by hand, and the one that does get kept is usually out of date. The usual digital alternatives each fix one problem and add another: an app the other person has to install, an NFC card that some phones read and some don't, a link-in-bio page that is not a contact.
So we built our own, on top of the website we already run. It took a day. Here is how it works — you can see mine at amplifiedcreations.com/equipa/pedro.
One address, three views
Each person on the team has one address, and it shows something different depending on who is looking:
- The profile is the normal page: name, role, a short introduction, a photo, contacts and a few lines about the studio, in the same design as the rest of the site. On a wide screen it also shows a QR code; on a phone, where nobody is going to scan it, the QR disappears and a big "Save contact" button takes its place.
- The card is a compact contact pass built for phones. This is where the QR code always points, so whoever scans it lands on something small and useful, not on a web page to scroll.
- The owner's view is the same address opened as an app installed on my own phone. Instead of my contacts, it shows the QR code, big, on a dark screen that stays awake. I open it, turn the phone around, and the other person scans.
The rule that ties them together: the person who scans the QR never sees a QR.
The details that decide whether it works
Most of the work was in small things that are invisible when they are right and infuriating when they are wrong.
- "Add contact", not "download file". The contact is a vCard, and phones only offer to add it to your contacts if the server says, precisely, that it is one. A static
.vcffile served with whatever type the server guesses often just downloads. Ours is generated by a route that always answers astext/vcard, with the photo embedded and the long lines folded the way the format expects. - WhatsApp, labelled. Some of us prefer WhatsApp to calls. The number goes into the contact labelled as WhatsApp, with a direct link, and a note that says "WhatsApp only · no regular calls" — so it is clear before anyone rings.
- The photo is never cropped. Only resized. A face cut in half by an automatic square is worse than no photo.
- The app icon is always our logo. Never the person's photo. A home screen full of faces is confusing; a home screen with our dot on it is not.
- It opens without signal. Meeting rooms in basements and trade-fair halls are where you hand out cards and where the network dies. The installed app keeps a copy of itself on the phone and falls back to it when there is no connection, so the QR always opens.
- It speaks your language. The page follows the language of the phone reading it — Portuguese or English — with a switch to change it. We decide that in the browser, not on the server, so a cache can't serve the first visitor's language to everyone after.
What we left out on purpose
No tracking of who scanned what. No sign-up. Nothing to install for the person receiving the card. The pages are public but kept out of search engines, and the data behind them — name, role, email, number — is the kind of thing that would be printed on paper anyway, kept in the site's CMS, separate from any login.
We also did not add a dependency to draw the QR code. It is a few hundred lines of our own code, and we checked that every size it produces scans. For something that is going to sit in front of every client we meet, fewer moving parts is the point.
Why a studio bothers
Partly because it is useful: it is already the fastest way we have to hand someone our details. Partly because it is the kind of thing we build for clients — small tools that fit into the way people already work instead of asking them to learn something new. The same approach works for a sales team, a clinic, an event, anything where people meet and need to stay in touch.
And partly because a business card is a first impression. It seemed right that ours should be something we made.