ARXFans | Augmented Reality iOS App

Image of a tablet on a kitchen wall.

Summary

Augmented Reality Expressive Fans (ARXFans) is an Augmented Reality filters app to celebrate and support your national soccer team with 2D and 3D filters.

Device: iPhone

About the product

About:

Augmented Reality Expressive Fans (ARXFans) is an Augmented Reality iOS App with 2D and 3D face filters. The filters are themed with colors of the 32 teams competing in the World Cup. Users are able to wear 2D and 3D art in their face, and record a video or take pictures to support their national soccer team.

The User:

Fans around the world supporting their national football team during the World Cup competition.

The Problem:

Fans around the world support their national football team by decorating their face wearing face paint and wearing customs and accessories such as hats. The problem is that when people paint their face they are putting chemicals on their face, it takes them time to paint their face, and are only able to wear only one type of decoration throughout the game.

The Goal:

Allow fans around the world to wear different face decorations with Augmented Reality and avoid the need of using face chemicals.

My Role:

For this project I worked as a Designer and Developer. I worked on wireframes, user flows, flowcharts, visual design, mockups, prototypes, editing videos, and development with Swift. I collaborated with a 3D artist who worked on the 3D art for the 3D filters.

Image of yellow sticky notes

Design Process

User Flow:

Simple user flow of what the user can do in the app from selecting a team to recording a video.

Image of a user flow diagram

Flowchart:

Detailed flowchart for the different case scenarios of the app.

Image of a flowchart diagram

Paper Wireframes:

Image of paper wireframes
Image of paper wireframes

Digital Wireframes:

Image of digital wireframes

Prototype:

Design tools like Figma and Adobe XD were used to prototype some parts of the app, but for the AR experience, the prototyping was done with code in XCode. Prototype is not available to showcase here.

Mockups:

These are some of the Mockups I worked on for app promotion, App Store screen presentations, and to use in videos.

Image of digital wireframes

Final Product:

View live product in the App Store. The app is free to download.

I am including some videos here to showcase some of the Augmented Reality Face Filters.

View live product

Tools used:

  • Figma
  • Adobe XD
  • Swift
  • After Effects for marketing videos.

Thank you for watching!