Laurier Face Filter Using Spark AR


image displaying a phone and Spark AR logo

How Did I Get Here?


I know I know, as a student studying UX design I'm probably supposed to have projects that include research, mockups, personas, UI designs and other "UX" related things. That being said, I'm still super early in my "career" and so I value experimentation!

In the last month or so I've been heavily invested in Augmented Reality, starting with developing small projects in Xcode, to markerless overlays using Unity, and now to Spark AR to create face filters. Cool. So what sparked the completion of this project? Since all I've been doing lately is talking about AR, A friend of mine challenged me to create a filter for Laurier University that was to be used at the Brantford campus homecoming. Naturally, I accepted the challenge.

image displaying my Spark AR project screen

From Idea to Deployment


Joel (the previously mentioned friend), wanted a face filter that added Laurier Goldenhawk stripes to people's faces and so I started by creating the stripes in Sketch and exporting the PNG. After adding all the necessary components (focal distance, face tracker, face mesh) I added the PNG file as a texture and the project came to life!



It was used!


After going through the process of making the filter live, it was awesome to see people actually using the filter that I created! After Homecoming, the filter had almost 7,000 impressions and I couldn't have been happier with the projects success.



image displaying my Spark AR project screen