Advanced Interactive Design - Final Project

Final Project: Interactive AR Application with Promotional Page

AR Application

For this project, we had to create an interactive prototype AR application for the campaign as well as an interactive microsite for the campaign which also serves as an instruction to download and user guide for the AR app. 

The first step was to work on the filter that I had made for the previous project by making improvements.  For the previous project I had decided to make a randomised filter that will select the movie for you. But this time I decided to make one with ui pickers and made different backgrounds for the different movies. The backgrounds that I made are solely related directly to the specific movies that I chose.

I used the designs from project 2's AR instagram filter to create the ui picker for each movie. and then created different backgrounds from illustrator.

Movies

1. Doctor Strange in the Multiverse of Madness
2. Everything Everywhere All at Once
3. Fantastic Beasts: The Secrets of Dumbledore

UI picker design

Figure 1. 1. Doctor Strange in the Multiverse of Madness

Figure 1.2. Everything Everywhere All at Once

Figure 1.3. Fantastic Beasts: The Secrets of Dumbledore

Background Designs

Figure 1. 4. Doctor Strange in the Multiverse of Madness

Figure 1.5. Everything Everywhere All at Once

Figure 1.6. Fantastic Beasts: The Secrets of Dumbledore

After this i took all the artworks to spark AR and worked on the filter.

Figure 1.7. Patch Editor

Final Outcome Spark AR

Figure 1.8. Final Outcome Recording

Promotional Website

For this part of the project I first designed the website for Prime Movies. Mainly there are a total of 5 pages on the website. This website would act as a promotional campaign for the AR app along with instructions or directions on how to use the filter. I used contents that were inspired by project 1 for the interactive phone application. Such as the theme and colours of the website.

1. Home

2. About Us
3. Movies
4. How to use
5. Scan QR code

Figure 1.9. Home Page

Figure 1.10. About Us page

Figure 1.11. Movies Page

Figure 1.12. How to use page

1.13. Scan Code page

By using Adobe Animate I first created the Navigation then divided the screen according to the navigation. After this I added the contents according to the navigation as well. The last step was to add the actions to make the website functional.

Figure 1.14. Adobe Animate

Final Outcome Website (Adobe Animate)

Figure 1.15. Final Outcome Recording

Reflection:

The project as a whole was still a little difficult for me because I still have issues with Animate. However, I believe that this project was a little simpler than the first one, and I was able to see my error much more quickly. In addition, I believe that the fact that all of the projects are related according to the kind of application we decided to do, made it simpler to familiarise ourselves with the kind of project we are expected to complete. I believe that there is still a great deal that I could learn about Spark AR and Animate.