top of page

The Vanity

Everyone dreams of bold, new hairstyles, so why do we tend to play it safe?

The Vanity is an online platform that allows user to digitally try on 3D-rendered hair styles

My role: User research, prototyping, UI design, development in Spark AR and Cinema 4D

Catering to Salon-Goers and Hair Enthusiasts

Everyone has suffered through a bad hairstyle. Whether it was a crooked airline or bangs that were cut too short, at some point we all have had to patiently wait for our hair to grow out in order to get back to normal. Millennial and Generation Z women have the privilege of watching thousands of Youtube videos to see reviews of wigs and styles before they try them, but it's still hard to experiment with new hair. 

 

While conducting research on hair salons, many women said even with the countless hair review videos, they wished there was a way to know what a style looked like before they officially got it. The risk of embarrassment or wasting money is still too high when it comes to being adventurous with hair, so women generally stick to what works without deviation.

Style Testing Currently

Unfortunately, while there are several apps that copy and paste hair onto users’ selfies, there aren’t any that allow you to move with the hair. The closest there has ever been to this idea was the short-lived Great Clips wacky hair lens on Snapchat. This lens allowed users to flip through 3 styles: the Bunshine, the Power Pomp and the Ultimullet, complete with the matching mustache. It’s possible to get a somewhat realistic image using this lens, but just like the hair apps it’s still a pasted image onto a moving head. As soon as you turn your head either way it looks as though you’re wearing a well manicured cardboard cutout.

The Vanity invites women to try on 3 Dimensional renders of multiple hairstyles

As an extension of the House of Renewal project, this experience can be found fully mocked up on the salon’s app. The hairstyles are categorized by type and can be horizontally scrolled through like on Instagram or Snapchat. What makes these filters stand out as more than its predecessors is the ability to customize the color of the hair in the top right corner of the screen. 

 

This experience can and should be used for all hair salons. Many salons offer free consultations with a stylist, but unless the guest is exceptionally confused about their intended stye a consultation is only slightly helpful at most. A stylist can only describe the process and show past work, but in the end a guest still has no idea how they will look, specifically. The Vanity would be a reliable asset to salons as a feature on salon apps or an added element during in-person consultations.

Bringing The Vanity to life

To create a new hair testing experience, I first started in Cinema 4D. I quickly learned how to render different types of hair from afros to blowouts. From there, I attempted to import the hair into Snapchat Lens studio and Facebook Spark AR. After many attempts, the rendered hair finally started to work in Spark and were later exported directly to Instagram as filters.

User testing

After getting hair filters onto my Instagram, I invited my class and professors to test them out and choose their favorites. The filters were met with rave reviews, everyone had a great time trying out styles that they never would've seen on themselves otherwise. Take a look!

Moving on up...

The Vanity was a learning experience in every way! When I first had the idea to create a mobile hair tester, every program I needed was new to me: Cinema 4D, Snapchat Lens and Spark AR. With a large amount of diligence and a few frantic emails for assistance, I was able to conquer these technological beasts and see my idea through. Moving forward, I know that if I approach a task that I'm not 100% knowledgable about, the answer is just a tutorial away. I'd like to dive deeper into AR filters to make sure their potential in digital experiences if fully realized. If you'd like to see the first few filters I've made in my free time, click here!

bottom of page