How I’m Transitioning 2D designs like a business card into Augmented Reality.
Like many people, I got interested in AR with the release of Pokemon GO in 2016 when they put AR in the spotlight with its outdoor exploratory game. Since then, I’ve been fascinated by that technology and I craved to learn more.
Last year I saw Oscar Falmer’s iOS AR Business card and I was amazed by it. My craving grew and I wanted a version of my own! However, I’ve lacked the expertise to do something similar. Until now.
For the past year, I’ve been learning Unity to practice some game design and programming skills. Unity is known to be an industry standard when it comes to creating games.
One common way to implement AR into Unity is with the use of Vuforia, which easily enables AR capabilities. Even more commonly Vuforia is used for marker-based AR experiences. Marker-based AR uses a target to create and start the AR experience. Anything could be a marker. From a company logo to a pattern. Once the application detects the marker, it brings the AR experience alive.
Like many things in my life, I learn best when I get my hands dirty.
Like many things in my life, I learn best when I get my hands dirty. Before starting I wanted for this project to focus on marker-based AR including animations and interactions. The end goal of this project was to take a traditional 2D design (a business card) and take it outside of the screen into AR. So below will cover my process of doing that.
Process
Since I knew my eventual fidelity would be AR I had to keep a few things in mind. First, I had to make sure the size of the design is appropriate because reading tiny type in AR is uncomfortable. Two, I wanted to extend the functionality of URLs in my design which is normally impossible on a traditional business card.
My Target Marker
Before beginning, I needed to figure out what would be my target marker for the AR card to rise from.
2D Iterations
When working in design I work best when I first have an idea on paper (or digitally). For these 2D iterations, I focused on what features would look & feel good before I transitioned into Unity & AR.
The first iteration lacked any animations and only showed information. It has a place for social links (the ‘S’ icons on the bottom) but not many other interactions.
For the second iteration, I wanted to add some personality to the card that is difficult to do with a physical card.
With the third iteration, I chose to incorporate further interaction by showcasing my 5 past positions.
After these iterations, I felt comfortable with moving forward onto Unity and constructing my 3D elements.
AR Iterations
For the first iteration of the AR design, I wanted to get an MVP out the door as quickly as I could to see if it was even possible with the technology that I had. Fortunately for me, it was glorious!
…I ran it by with another person and they had suggested that it felt kind of bare…
I clearly liked the chat bubble feature a lot. I spent a while trying to figure out how to make it look like the characters were coming alive in real time. This is also where my design deviated from the 2D designs because initially I thought the description about myself was not worth it. I learned otherwise when I ran it by with another person and they had suggested that it felt kind of bare. So I knew I had more work to do.
For my third iteration I wanted to expand on the faults from the previous iteration and focus on animations and interactions. The one I was proud of was the billboard one from pressing on the work history.
For the final iteration I wanted to polish some things out. I also made the work history larger because it was uncomfortable to read in the previous iterations.
I felt like I accomplished a lot with this project and I’m happy about it!
Reflection
I felt like I accomplished a lot with this project and I’m happy about it! I set out to mimic what I saw a year ago with the knowledge and experience I’ve gained thus far. I learned a lot about animations in Unity (not as easy as I once thought) and how to transfer 2D designs into AR. I also got to further develop my experience in C# an object oriented programming language. Although I learned a lot, there were a handful of difficulties I faced throughout the way.
Difficulties
Glare & Camera issues
The target marker I used was a business card I made some time ago. It was printed on some glossy paper thin paper. When dealing with computer vision, it has a difficult time dealing with glares or other light distortions. This made it difficult to test because of the glare from the card. It would either lose tracking often or bounce around. Many people & organizations face this issue or similar and the truth is that the technology has yet to address it. Probably because it is a difficult problem.
In-App browser or External browser
Early on, I had to decide how to showcase interacting with the social links on the business card. Initially I played around with having the website open up directly in AR. I quickly realized this would lead to a poor user experience due to the small medium. Would people actually want to see someone’s portfolio or LinkedIn on 100x300 format? Didn’t think so. I therefore took advantage of the default web browser of the device (Safari in my case) for any external links. Perhaps currently it isn’t the smoothest experience to transition between the web browser and the AR Card, but a lot better than the alternative.
Would people actually want to see someone’s portfolio or LinkedIn on 100x300 format? Didn’t think so.
Does this have a future? kind of..
Early on I realized that this type of application has a very short life span in terms of hitting the market place. I see it as being unfeasible to have a dedicated application that only detects specific markers and another application to detect others. Next thing you know, you may have up to 30 different applications for 30 different markers. One solution is to have a public database of markers that can be detected regardless application (some are out there already). Idealistically I hope device developers further develop the experience natively like they did for QR codes within the camera. Allow people to upload their “designed AR experience online” and have people hook them whenever they detect the marker with default camera.
Thank You!
If you’ve gotten to this part of the page then you must have read everything before it to which I applaud you for doing so. Or maybe you just scrolled past everything to get to the end. Either one is fine. Thank you for spending some time to look at what I created and brought into the world. I have many other projects available on my website vladimirdesigns.me so if you’re interested check me out on there. I sometimes also periodically go on twitter but it is usually to rage at what crazy things some companies & politicians are doing.