Want to create custom face filters for your app or website? Explore our Face Filter SDK!
The idea of a fascinating AR filter may come as a result of pure inspiration. However, when you need to make dozens of engaging filters for your app, you can’t rely on a hit-or-miss approach.
At Banuba, a company that designs AR filters for 4 years, we know firsthand that making quality Face AR experiences requires time, efforts, a dose of creativity and practical knowledge of the process.
This guide will provide your with insights into the world of Face AR design. It'll help designers, AR creators, art teams, product and marketing managers to understand the general workflow of face filter development process.
What are face filters?
Face filters are augmented reality effects enabled with face detection technology that overlay virtual objects on the face. Introduced by Snapchat back in 2015 as a fun way to dress-up your selfie, today face filters have become a meaningful tool to improve digital communication and interaction.
You can superimpose 3D objects onto the face or backgrounds, animate facial expressions, try on virtual products, add AR makeup and much more. Augmented reality lets users transform themselves into anyone or anything they please, turning selfies into a storytelling adventure.
AR filter with 3D animationSnapchat-like face filter Face morphing effectBeauty and face touch up filterCartoon-like AR filter
Augmented reality filters find its application in:
- Social networking apps
- Video conferencing and video chat apps
- Photo and video editing apps
- Live streaming
- AR commerce and product try on
- Virtual makeup sampling
Why to create face filters
Face filters are now a promising opportunity and powerful marketing tool. Using AR filters, you can engage the audience, empower people to self-express creatively, create and share marvelous photos and videos on social networks and drastically boost the enjoyment of using the app.
Brands develop custom filters to:
- Increase brand awareness with custom filters that reflect its values, idea or products.
- Reach out to millennials on mobile and social networks with innovative AR experiences.
- Allow consumers virtually try on glasses, jewellery and make-up at home to see how products look.
- Reduce returns and increase satisfaction, as filters personalize the shopping experience.
- Сreate AR advertising campaigns on web, mobile and outdoor that are creative, unique and effective.
- Inspire consumers to take and share photos with branded filters and spread the word.
Developers use face filters in their apps to:
- Boost user engagement and content sharing using Snapchat-like lens and AR face filters
- Increase user sessions in the app with interactive facial animations and Face AR games.
- Bring organic traffic as AR filters inspire user-generated content (UGC) and shares.
- Improve retention keeping users engaged with new filters updated daily, weekly or monthly.
- In video communication apps, bring more comfort allowing users to overlay face touch up filters or animate backgrounds.
AR creators make filters to:
- Self-express on social media.
- Expand follower base in a short period of time and few efforts.
- Monetize followers and partner with brands.
- Gain social recognition and attention, become influencers.
Steps to create a quality face filter
Individual AR creators who want to make a custom Instagram face filter opt for the Spark AR Studio. The platforms makes AR effect production available to anyone. However, with Spark AR you can create masks for Instagram only.
If you want to develop custom face filters and integrate them into your app, you need a Face Tracking SDK. It comes with Filter Editor and Viewer tools which allow designers to configure and preview effects in real-time.
- Add filters to any app or website
- Build new face filter app from scratch
- Launch filters on all platforms
- Create any type of AR effects
- Full content ownership
- The possibility to license effects from our Filter Catalog
Here are the basic steps designers and product managers need to follow when developing AR content for their app.
Step 1. Research your audience and persona
Target your audience based on the traits that make them unique. Segment your audience to deliver AR content that resonates with their interests.
- Favorite apps
When you’ll have a clear understanding of your potential users, go beyond the generic idea and target your audience on a more human level by describing persona profiles. Define 3-6 key personas and the type of effects that may catch their fancy. Here’s an example of how your persona profile may look like.
Example of the target persona profile
Step 2. Describe the context and USP
Define the context when and how people will interact with your AR effects. People may animate faces to have fun, gain social recognition among peers or for self-expression. Think of the USP (unique selling points) and the value you aim to add to your app when integrating face filters.
- Why and when would people use your effects?
- What value do they bring to users?
- Which problems do they solve?
- Have people seen something similar before? Where?
- How does your AR content differ from competitors?
- Why would people share an effect?
Step 3. Monitor trends and competitors
Gain more insights about your audience by researching trending topics in your domain or globally. From there, you can get additional inspiration and ideas for your AR filters.
How to monitor:
- Social media monitoring
- Social listening
- Trending challenges
- Keyword and tag research
- News and influencers
Check popular face filter apps and steal away ideas and the best practices for effects design. Modify and customize to make them unique.
Key app providing face filter functionality
Step 4. Filter design workflow
You can make different types of face filters, from simple 2D stickers to complex face filters with triggers and animation. Some filters are more complex to implement, and they require coding. The general workflow looks as follows.
- Design filter assets. You may design effects in any 3D graphical editor like MAYA. Generally, a 3D filter consists of materials, textures and geometry which you export in .fbx format.
- Upload assets to Filter Editor. The Filter Editor tool converts files into supporting formats compatible with Face AR SDK.
- Configure effect properties. Then you can set the draw order, add beautification, audio and ect.
- Construct effect. The 'Construct' button generates the effect file which you later upload to the app.
- Preview in real-time. You can test your effects on desktop before sending it to production using the Viewer component.
The vide below provides an overview of the face filter creation process. Check more in-depth examples on how to make a specific type of effect.
Effect Construction Tutorials
- How to create a face touch up filter
- How to create a try on effect (glasses)
- How to change backgrounds
- How to set create filters with triggers
Step 4. Develop and optimize
To make sure your face tracking filters are battery efficient and perform nice on a broad range of devices, you need to keep them lightweight.
Read More: How To Optimize 3D Face Filters For Mobile
- Reduce and optimize filter textures
- Use the most optimal set of 4 textures: Base color, Normal, Roughness, Metallic
- Minify polygons
- Optimize skin files and video files
- Consider the effect performance on different devices — both powerful and low-end ones.
- Develop 2 versions of a complex effect — the full one and optimized.
Step 5. Test your effect
Low-quality filter performance disappoints users and can lead to negative reviews. Make sure to test your AR effects properly before uploading them to the app.
Your Checklist to Test Effects:Performance iOS, Android
- Real-time AR face filter — at least 30 FPS on iPhone 5s, 6, 6plus | Samsung s8/Huawei P10/Mi6 and higher
- AR mask and video recording — at least 30 FPS on iPhone 5s, 6, 6plus | Samsung s8/Huawei P10/Mi6 and higher
- You can take a photo or/and video with the effect.
- The effect works stably on the front and rear camera.
- The effect works stably with face in the camera, no face, and disappearing face.
- Effects with a trigger, tap, swipe or voice changer have a hint about it.
- Effects are stable at different angles (90 /180 degrees rotation,upside down)
- Masks stretch on the face with wide open mouth, grimacing and no elements overlap one another
- Check effects on Xsmax for crashes (some effects fall on Xsmax)
- Check effects on Xsmax for incomplete filling of the screen (sometimes the effect does not fill the entire screen with high resolution)
Step 6. Measure engagement
Measuring user engagement with your effects helps you better understand your audience and deliver a successful app. Track how users interact with your filters to see which filters perform best and which one needs a redesign.
What to monitor:
- Taps and swipes on the screen
- User session duration
- Share ration
- Video- and photo-taking ration
- Users by country
- User retention
- Feedback and reviews
Step 7. Iterate and improve
To maintain a successful user involvement, you need to develop and test hypotheses on new effects, optimize and iterate them to reach your target in terms of acquisition, retention, engagement and revenues.
Your next steps:
- Research, develop and test hypothesis
- Update effects regularly: daily, weekly or monthly depending on your app concept
- Keep track on user satisfaction
- Use in-app feedback forms
- Engage users in poles on social networks
- Read and gather insights from app ratings and reviews
- Promote new effects with push notifications
Face filters are a powerful viral content that can spread across the entire web and grab the attention of millions of users in a matter of days.
Primitive face masks fall short to surprise or engage the audience. Today, the the AR industry embraces unique and creative ideas, and this is where the powerful Face AR software is needed.