ar business card

business card

Go Back To All Projects
Composite showing an augmented reality business card being viewed through a smart phone.
Composite showing how the digital model is overlaid on a physical card to create the AR experience.


As one of my first augmented reality explorations in Unity, the goal of this project was to work with many types of assets to understand how different media can be used to bring out Unity's fullest potential.

The experience uses AR Foundation's image tracking features to display a digital model on a physical card, and offers clickable links that can be used to visit my social accounts and website.

The final product also incorporates video animations, particle effects, and an animated avatar to achieve a futuristic look.



The initial inspiration for this project was a post on social media with a similar concept. This example was pretty basic, but it gave me a lot of interesting ideas about what the full potential of an AR business card could be.

A lot of my interest in augmented reality surrounds applications with real utility, and this project card seemed like a great first step into the AR space.

Storyboarding process in Procreate.

storyboard & user flow

I started with some quick sketches in Procreate to develop a storyboard that outlined my initial thoughts on the experience. I tried to stay conscious of usability from the start, considering text and button size as well as where a user might want to grab the card.

The ideal user flow I imagined is shown below. In the end, it wasn't feasible to host the project on the web due to prohibitive costs of hosting platforms, but the rest of the diagram gives a good sense of the experience.

A user flow diagram explaining how a user would navigate through the experience.
Early Figma Mock-Up


To dial in the design with a higher level of fidelity, I mocked up my ideas for the digital part of the experience in Figma. At the same time, I began designing the physical card with Illustrator and Photoshop.

It was important to create these initial mock-ups, because it allowed me to bring my ideas into Unity and do some early testing to ensure the basic functionality of my experience.

This turned out to be valuable because my early design for the physical card did not have enough identifiable features to work smoothly with image tracking. I used what I learned to work through a few iterations and optimize the image for better performance.


With a functional base for my prototype, I was excited to move on to the animations, effects, and interactions that would make this project stand out. Referencing my initial storyboard, I strategized how I would achieve the desired result.

I used a combination of familiar and unfamiliar tools, hoping to learn new techniques, but also how to incorporate tools I had experience with into the Unity workflow.

GIF showing a spawn animation for an avatar.
Custom particle effects made with sprites created in Figma.
GIF showing process of animating an avatar in Blender.
Avatar made in Ready Player Me, animated with Blender.
GIF showing animation of the edge of the card.
TouchDesigner and After Effects animations.
GIF showing animation of social links.
Clickable buttons with links to social media and websites.
Diagram showing workflow between all the programs used to create this AR business card.


I brought each asset into Unity and used the built-in timeline to create the animation sequence I had outlined. To program the interactions, I used the UI event system.

With all these pieces together in one place, I finally had a full prototype of my idea to test and refine.

user testing

To reveal any weak points in my design, I put it to the test, allowing others to demo my prototype. Here are a few key takeaways from that process:

The key parts of the experience included:

  • Custom particle effects made with sprites created in Figma and Illustrator
  • An avatar created with Ready Player Me and animated with Blender
  • Video animations created in TouchDesigner and After Effects.
  • Clickable buttons with links to relevant social media and websites.
GIF showing process of animating an avatar in Blender.
View showing animation process in Blender.
  • The white text I chose can become hard to read in environments that are light in color.
  • The depth clipping on the AR camera prevented users from holding the card close to the phone's camera.
  • Some users were not aware the buttons were clickable.
  • Post processing effects affect the entire frame of view and can produce undesirable effects in certain environments.
  • Human occlusion is not accurate enough to work at this small scale with such subtle differences in depth.


While some of these issues are a quick fix in Unity, others will require a more thoughtful approach and continued testing to validate.

For example, the choice to use white text with a transparent background shaped a big part of the overall design. To preserve that style, it would be worth experimenting with a darker gradient as a backdrop to improve contrast.

Another interesting problem is the users' understanding of the buttons. Without hand tracking and the ability for hover animations, I think a good clue could be a subtle button animation every couple of seconds.

Whether I decide to do another prototype for this project, or use my findings to improve the next one, I'm really satisfied with my result and what I learned in the process.

I'm looking forward to applying these lessons and continuing the ongoing loop of iterating, learning, and applying my knowledge to build better AR experiences in the future.

Exploded isometric view showing each layer of the AR business card.