Labels

Advanced Interactive Design / Final Project

23.11.2022 - 11.12.2022 (Week 13 - Week 15)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design
Final Project: Interactive AR Application with Promotional Page

LECTURES

Fig 1.0: Thumbnail

INSTRUCTIONS

Final Project: Interactive AR Application with Promotional Page

Students will create an awareness/marketing campaign for a brand/company of their choice.  The final project consists of two main areas:
• An interactive prototype AR application for the campaign
• An interactive microsite for the campaign which also serves as an instruction to download and user guide for the AR app

Project ideas must be approved by the lecturer/tutor to ensure that they are feasible in an introductory-level class.

*Software Requirement:
– Adobe Animate
– Spark AR Studio

In this project, basically, students are to create the webpage version of the first project. And the new AR filter is not needed because the lecturer said that we are out of time, so it won't be possible to finish two new things in a short span of time. We can make improvements if needed for our AR filters, but it's okay if we don't want to add anything, so we can just submit the previous one.

As for the website, the contents will be slightly different from the first project as this one's main purpose is to promote the brand that we have made. So we will be promoting the brand we chose from the start, for me, I will be promoting the Gentle Monster (a sunglasses brand), showing the brand identity, the app that I have made, and the AR filter that I created previously. The pages needed are also fewer than the first project. 

So to reduce the page, I chose to only create beneficial pages for the promotion which are:
– Landing page; showing the latest collection of the brand
– Product collection page; showing the products sold there
– Collaboration page showing; showing a collaboration product between the brand and a South Korean football player
– Campaign page; showcasing my previous two projects and allowing them to download the app and try the AR filter
– About Us page; showing the story behind the brand 

Before jumping straight into Adobe Animate, I created the layout design on Figma first because I think it will be easier later to copy and paste. These are the pages that I created.

Fig 2.1: Landing page

Fig 2.2: 'Collaborations' page

Fig 2.3: 'Product Collections' page

Fig 2.4: 'Campaign' page

Fig 2.5: 'About Us' page

By the way, I'm using Helvetica Neue for all the texts.

So here's my working process on Adobe Animate.

Fig 2.1: Animating process #1

Fig 2.2: Animating process #2

My work on this final project was actually halted for 2 days due to my sudden illness that happened on the submission day, so I requested additional days from the lecturer to finish the rest 50% of the work.

I was also having a problem with the code(?) perhaps which resulted in my buttons (it wasn't working). I spent all night long checking all the codes, the symbol names, and also instance names, there's nothing wrong with it. I also sought help from my brother who studied IT, but he also couldn't find any mistyped code. 

After all the problems are gone, these are the final outcome of my final project and the walkthrough video of it.
• Gentle Monster Promotional Web



This is the most relaxed project compared with the two previous projects. Moreover, I already have the knowledge working on Adobe Animate so I think my stress level is reduced due to this. However, on the submission day, I suddenly got an illness, which made me can't continue to finish the rest 50% of my work, so my project was halted, and the submission was pushed back to the 3 days later. Anyways, I really enjoy creating the layout and animating the stuff, except for the button error which makes me wanna hit my laptop.