How to Create an Interactive AR Business Card In 3 Hours Without Code

Augmentop’s business card turns into an interactive AR experience when the QR code on its back is scanned by a camera phone

Are business cards dead?

When was the last time you’ve exchanged business cards with someone?

And how long did you keep the other person’s card for? Did you take a snapshot of it with your camera phone and tossed it away?

What if you can create a business card that people would keep and remember for a long time? What if your business card is something they show off to their friends and coworkers because of how cool it is?

How would that impact your ability to network with others, create a memorable brand, and leave a great first impression?

At Augmentop, we are breathing life back into the dying business of business cards, brochures, mailers, and magazine ads by turning them into interactive augmented reality experiences that showcase your work and brand in an engaging and memorable way.

Over the past couple of months, we’ve experimented with various ways of augmenting print marketing material with interactive animated experiences that run natively in the browser, and we created several prototypes to validate our vision for the future of print marketing.

We were mostly blown away by the response we got when we shared a video of our interactive AR business card on social media, and the dozens of emails we have received from people asking us to mail them our card so that they can “play with it”. (When was the last time someone emailed you asking for a copy of your business card?)

The AR experience shown in the video above runs fully in the mobile browser and requires no additional apps to be installed. And it was created without writing a single line of code.

In this article, we will share our step-by-step process for how to make an AR business card, as well as the assets and templates we’ve designed so that other AR designers and developers can create similar experiences for their business cards.

This tutorial uses the business card templates we have created for Sketch and Reality Composer. You can use the same templates to save 4 days of work by customizing and exporting the AR experience in a few hours instead

If you are unfamiliar with Reality Composer yet, follow this step-by-step tutorial to learn how to build an interactive AR experience in one hour without code.

And if you would like to create an interactive AR experience for your business card or print marketing, check out our offerings here.

AR Business Card Sketch template
AR Business Card Reality Composer Template

You can download Reality Composer for free for macOS, iOS or iPadOS from the Apple App Store. We created our AR business card using the macOS version, which comes with Xcode, but the workflow on other platforms is almost identical.

Step 1: Design your AR business card in Sketch

Think of your AR business card as a mini-website: what information do you want to communicate to your new connections and potential clients or customers? How do you organize that information into sections? And how would people navigate between those sections?

For Augmentop’s business cards, we wanted to include information about who we are, what we do, how we do it, and where we are.

And we designed the back of the business card with isometric 3D blocks that become AR navigation menu items, and that acted as a good quality image anchor for AR tracking.

We then created a QR code online that pointed to the location where the AR experience will be hosted on our website.

Here is how the front and back of our AR business card look like:

Front and back of our AR business card

One of the hard tasks in designing your AR business card is to create or find a design that acts as a good image target for AR tracking. Here are some guidelines and best practices for what makes a good AR image target.

Step 2: Export assets from Sketch

Your goal is to create a seamless transition between print and AR, so that people believe that your print design is coming to life and animating in AR.

For that to happen, you need to export every layer that will be animated in AR as a separate image from Sketch, and to import it individually in Reality Composer.

Here is how the full Sketch file for our AR business card looks like:

AR Business card assets in Sketch

Step 3: Import images into Reality Composer

Create a new Reality Composer project, choose Image Anchor as your tracking target, and use the image of the back of your business card as that anchor. For a standard business card, set the physical dimensions of image anchor to 5.08 cm by 8.89 cm.

Then import all the images you’ve exported from Sketch, and position them in Reality Composer, so that they align with the graphics on the back of the card, creating the main navigation menu.

This is the most time-consuming task because you need to specify X,Y and Z positions for every image you import individually and make sure they are all positioned properly in 3D.

This is what the menu scene looks like in Reality Composer:

Menu icons layered on top of image anchor in Reality Composer

If you are using our AR business card template, you can skip the layout process, and simply replace existing images in the Reality Composer template file with your own. You accomplish that by right-clicking an image, selecting replace, then import. All existing behaviors and animations on the original images are automatically applied to the new ones.

And if you’d like to add 3D text on top of your AR business card, we recommend creating a semi-translucent background to super-impose on, so that your text is more readable.

It is a good practice to export and test your project frequently, to see if things look similar in reality than they look in Reality Composer. If you are using the iPadOS or the iOS version of Reality Composer, you just press the Play button on the toolbar and test the scene. No export needed. You will need to print the back of your card to test the experience, but you can also load up that same back image on your iPhone and use it for testing purposes.

Step 4: Create remaining AR scenes

Create a new scene for each section of your AR experience, and use the same image anchor in every scene.

Import the Sketch images corresponding to that scene, and lay them out over the image anchor.

If you’re adding text to your experience, I recommend creating 3D text directly in Reality Composer, instead of importing images with text from Sketch, as the former is more legible and faster to load.

We have also experimented with adding voice narration and background music to AR business cards, but found it to be simpler and faster to have a silent experience with text and graphics instead.

Here are all our AR business card scenes in Reality Composer:

Various AR business card scenes in Reality Composer

Step 5: Create transitions and animations between scenes

Link different scenes together so that when users tap on an image in the main navigation menu of your card, they transition to the corresponding scene. Make sure you also add a “back” menu item to return to the main navigation scene.

Animate those transitions so that they are more engaging and contextual. You can learn how to create scenes transitions and animations in Reality Composer here.

Step 6: Export and host your file online

After finishing and testing your experience, export a .reality file from Reality Composer, and host it on the page that your QR code points to so that Safari opens that page when someone scans that code with their iPhone camera.

You need to tell Safari on iOS that you want to load an AR experience on that page, and to do that, you need to add rel=”ar” when linking to your .reality file, as follows:

<a rel=”ar” href=”card.reality”> <img src=”card.png” alt=””></a>

Step 7: Print your business card

The hard part is now over!

You just need to send your business card to the printer, and whenever you give it to someone, ask them to scan the QR code on the back with their camera phone, and watch the expressions on their faces.

Your turn

Turning your business card into an AR experience is one of the best ways to stand out from the crowd, and to make people remember you, your business, and your product.

And now that you are familiar with Reality Composer, you can create your own AR business card in a just couple of hours using our AR business card templates.

And if you would like Augmentop to create and host a custom AR business card experience for your business, learn more here.