Cases Atlassian

Atlassian: AR Filters & WebAR

Unbearably cute networking 
with AR
2020
Year
AR
Tech
Atlassian
Client

What're AR Filters & WebAR?

They are immersive solutions for Atlassian’s offline event built using SparkAR, WebAR, and JavaScript technologies. Masks with a gummy bear and WebAR portal were used to create an interactive environment for the event attendees.

Learn more about Atlassian

Client's Wants & Needs

An Immersive Solution for an Offline Corporate Event

Atlassian needed something extra for an offline corporate event it was planning. So they came to us in search of an immersive solution.

Fun, Networking, and More Fun

The company wanted the product to create an interactive environment for people that attended the event. The purpose of this was to prevent the guests from becoming bored before the main event began.

Improving Brand Awareness

The product was also required to provide participants with an insight into the brand’s identity. This would then create a better connection between the company and its employees.

Bringing Gummy Bears into the Corporate World

To achieve its goal, the company gave us a mascot for the event — a gummy bear. What roles did the gummy bears play? Did they have any superpowers? The WeAR team took Atlassian’s ideas and brought them to life in the cutest way possible.

How We Did It

01
Client's Needs

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.

02
Creating Masks with SparkAR

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.

 

03
WebAR Portal

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.

 

04
Adapting to Lockdown

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.

 

05
Testing Process

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.

Challenges We Overcame

Identifying the initial goals of our client

Adjusting our solution to the reality of lockdown

Creating high-resolution videos with optimal video codec

Designing the animated doors using JavaScript

Playing with materials and shades of the portal to make them look real

Project Results

Despite the challenges we faced during the execution of this project, we managed to exceed Atlassian’s expectations. The numbers speak for themselves:

4000+
WebAR activations
800+
masks activations

Thanks to the success of this project, we have been rewarded with the opportunity to work with Atlassian again

Other Cases

See All Cases
See All Cases