Building an Augmented Reality experience

I made a promise to help a friend out as her business has been badly affected during the pandemic. She runs an independent skincare business and a normal day involves a lot of face-to-face contact which she has been unable to do. One thing she has been able to do is move some of her services online and run virtual sessions, so this year her online presence and foremost her social media has been key to driving her business forward.

We discussed ways in which I could help her out as a designer and came out with a general brief to give the project direction…

The Brief

The project had to fit in with existing social media channels, instagram is their primary method so I focussed on this. The client also wanted it to be fun, the idea being that it would be shareable. They also wanted it to be meaningful, potentially showcasing their products and services. And finally it had to be on brand but also be something new they hadn’t tried before.

Research

I started my research looking at Instagram and the skincare industry, searching for some creative inspiration. My research pointed me towards ‘Stories’, which have better engagement amongst the target market.

The main discovery of my research is that filters are currently the most popular feature for stories on instagram, but I had no idea how they were created…

Teaching myself AR

After some searching online I came across some software called Spark AR Studio, which is the tool used to create filters for Instagram. I downloaded it, watched some tutorials and began to play around with it. After lots of trial and error and testing out what worked and what didn’t I found I was able to create a random answer generator. So this became the focus of my design.

The Concept

I challenged myself to build an augmented reality instagram filter. The design would show a question and upon clicking the user would be shown a randomly generated answer.

I demoed the concept to the client and together we brainstormed ways in which we could use this concept to fulfil the brief.

The final idea we came up with was to recommend to the user one of their products or services. So asking the question “what skincare product or service do I need?”.

The Design

I had sketches of how the concept would work and from this I created a number of graphics that I would need to create the AR experience. All creative elements were designed on brand using the company colour palette and fonts.

Building in AR

Here’s an overview of how the filter works within Spark AR Studio software…

The picture above has a preview on the right of how it will look when viewed on a device, the rest of the picture is where you set-up and manipulate where AR objects will be. For this project I used a plane attached to a face tracker. The plane is basically the graphic I created for the question. I then created a second one for the answer part of the experience — for this I used an animation sequence which shows all 13 possible answers.

With the easy bit out of the way I then had to use patches to program how everything would work…

Starting from the left, the image above shows how the experience runs. First action shows “screen tap” and the section at the top of the patch editor is set up to show the question as the default view and the answer (animation sequence) as the ‘after-tapping’ view. The bottom row of the patch editor is setting all the parameters, for example it is set to run the loop sequence for 2 seconds after the user clicks the screen and it is set to stop at a random place in the sequence between 0 and 13.

The Results

The client was very happy with the AR Experience and felt it met all the requirements of the brief. The filter is now live and has generated a lot of interest from her family in friends and ultimately has increased awareness of her brand.