Atlassian: AR Filters & WebAR Use Case

The successful execution of the project would have been impossible without a clear understanding of Atlassian’s goals. Even when plans had to be changed due to the lockdown, we remained in touch with the company’s team to find a suitable solution.

We designed the Atlassian masks using Spark AR Studio. The SparkAR Studio is a platform that allows users to develop AR effects for mobile cameras. However, this technology is updated frequently (sometimes even weekly), so we had to put in more effort to keep up with the updates and level up our expertise.

Our first idea was to create an ‘inverse’ mask. The AR experience was to be activated by the rear camera of smartphones rather than front cameras. 

Once the experience began, a gummy bear would appear on the shoulder of the person in the camera. The person would then try to win a guessing name known as ‘Tap the Bear’.

A participant wins by guessing the shoulder the bear is sitting on correctly. But since shoulders couldn’t be tracked, users were to position the gummy bears by adjusting their phone’s angle.

We designed a portal that users can go through to enter a 360-degree video using WebAR technology. Also known as web-based augmented reality, this technology allows users to share AR experiences through their browsers. Hence, no application has to be installed. 

We faced two challenges at this stage. First, the animated doors had to be built using JavaScript. We don’t have much expertise with this technology since we mostly use Unity for our projects. Luckily, we had an expert on the team who got the job done.

Another issue we encountered was that Atlassian wanted high-resolution videos which were too large to support WebAR technology. As a result, we had to utilize the optimal video codec and the file size to satisfy the client’s needs.

Unfortunately, the offline event had to be canceled due to the lockdown. So, we had to develop solo experiences for the participants.

The gummy bears remain on the shoulders of the users, but this time, they have a superpower. They shoot beams out of their bellies, and when the users click on them, they move along with the company’s logo.

Additionally, the speed of the beam increases with every click (up to four or five times before starting over). Atlassian designed the custom background used in the filter.

Sounds very interesting, right? But that’s not the end of the fun. We created another filter that utilized head tracking for a game!

In this game, users are required to collect letters by flying rockets over them. The rockets fly as the users tilt their heads left and right. A point is rewarded for each letter a user collects, and the game continues until there is an unsuccessful flight.

Before presenting the final product to our client, we carried out several quality tests. The importance of this test was to ensure that it performs smoothly and meets all the requirements of our clients.