Experiential Design / Project 3

Week 08 - Week 10
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Experiential Design (MMD60204) 

---

INSTRUCTIONS

 

---

PROJECT 3

Creative Experience Design Project Prototype

For project 3 of experiential design, after approval of the proposal I could then start working on the prototype of my project. The objective of this project is to test out the key functionality of our project, although the output may not necessarily be a finished visually designed project or we will discover certain limitations to our project. Here, we will then be able to gauge on our prototype functionality and our ability to creatively think on alternatives to achieve the desired outcome.

Process

Before I started in unity, I first designed the visual UI design of my assets in Figma for reference and to import in unity later on.

Fig 1.0 Colour Info Mockup

Fig 1.1 Colour Info Asset

Fig 1.2 Quiz Question Mockup

Fig 1.3 Quiz End Screen Mockup

Fig 1.4 Quiz Assets

Fig 1.5 Home Menu Mockup

Fig 1.6 Home Menu Mockup

First off, I started by creating my database and license key for the project on the vuforia website named "ARColour" which I then imported into unity. I have used 6 different image targets ranging from the colours of the rainbow which I found online and have tested their detection abilities ensuring that they are consistently scannable as well. To be consistent in theme, they are all nature related. 

Fig 1.7 Red Colour Target

Fig 1.8 Orange Colour Target

Fig 1.9 Yellow Colour Target

Fig 2.0 Blue Colour Target

Fig 2.1 Green Colour Target

Fig 2.2 Purple Colour Target

Then to start in unity, I started by importing my image targets into unity and creating coloured spheres for each one corresponding to the colour each image for better visual representation in the AR experience. On the right section, I have filled in the script components and placed them under "MenuManagement".

Fig 2.3 Sphere Creation

Fig 2.4 MenuManagement + Collection Link of Single Target Scripts

To create the detection of the single target instances, in the "On TargetFound" section on the right, I have inserted my single target script and linked it for each image colour target. The reason for the creation of single target scripts is because several of the same image targets will be used again in a multi-image target scan for the colour mixer/complementary colour feature of my app, thus there is a need to separate these instances in order for them to scan individually and work on their own separately. I have named this script "DisplayDescription", and using the script from the MenuManagement, I could then activate/display the colour info and 3D sphere of a specific image colour target in AR when successfully scanned. Similarly, in the "On TargetLost" section, the colour info and sphere will be hidden when the AR object is out of the marker's range. This was repeated for each image colour target.

Fig 2.5 Single Colour Target Script

Fig 2.6 Adding Single Image Targets Functionality 

For the multi-target functionalities of my app on the left side, under MenuManagement, I have several supporting AR scripts on the right section. Under "Detect Multi AR", in this script, I have divided it into several parts. For example, in the "ToBrown" section that there are parts like Purple, Yellow, Brown, and Purple YellowDesc. In this script, I created the logic so that when the purple and yellow descriptions appear together, a brown 3D sphere will be displayed along with its colour info description. Thus, when scanning the purple colour image target + the yellow image target, the brown sphere and colour info description will appear in AR.

Fig 2.7 Multi Target Script

So far, for the prototype I have done blue+red, and yellow+purple. However, the same logic I have used here will apply to other colors later on.

Fig 2.8 Adding Multi-Image Target Functionality

In displaying the actual colour info description in AR, I have used the backdrop asset I created previously in Figma and placed them as a source image under each colour single and multi image target.  I have also imported my font "LexendDeca" -regular and bold into unity to use as it is what I had used in figma since I thought it was suitable for the project. This font will be used again in other colour image target colour info + tint/tone/shade description displays, menu, and the quiz later on. Then, I overlaid two UI text instances on it- one for "colour info" and one for the description itself ensuring I followed the visual prototype example I created in the text settings, adjusting colour, alignment, size, etc.

Fig 2.9 Colour Info Description Asset

Fig 3.0 Linking Asset to Targets

Fig 3.1 Import of Font

Fig 3.2 Text Settings of Colour Info

Fig 3.3 Text Settings of Colour Descriptions

I then repeated this process with all the other colours and multi-target colours, inserting the individual descriptions I made for each one.

Moving onto the home menu, I first created a canvas and coloured it according to my visual prototype design. This is then followed by the insertion of my logo and menu button assets which I have imported into unity and placed onto the canvas. Then, I overlaid text on top of each button which labels what each button leads the user to for app features- "SCANNER", "TINT/TONE/SHADE MODE" & "QUIZ"

Fig 3.4 Designing Home Menu

Fig 3.5 Adding Button Functionality

This is followed by the linking of the on-click functionality with to "MenuManagement" where the scripts are located to make the button responsive. When clicking the button, it will first play a short video for the onboarding which tells the user to rotate their phone in order to scan more optimally, then, it will open up the camera. To do this, I used a video clip I found online of a phone rotating instruction which I imported into unity and sorted/linked under "MenuManagement" inspector and set it to play once. The rest of the buttons are also done this way, where they are sorted under "MenuManagement" and linked with their respective scripts that I have created for them. In the later finished version, they will be able to go to their respective features which is opening up the camera for "TINT/TONE/SHADE MODE" and the quiz for "QUIZ".

Fig 3.6 Rotate Your Phone Onboarding Video

Fig 3.7 Linking "SCANNER" to Scene

Fig 3.8 Adding Video Onboarding to "SCANNER"

I have also made the pressed colour grey for a more responsive and interactive user experience. 

Fig 3.9 Adding Pressed Colour

I've also created a script to load the scene and exit upon clicking on the "<" button on the top left of the screen as well as scripts to handle the loading of different scenes and exiting them, and scripts to smoothly re-position and rotate the screen back to portrait after scanning with landscape orientation.

Fig 4.0 Adding Back Button

Fig 4.1 Load & Exit Script

Fig 4.2 Scene Transition Script

Fig 4.3 Screen Orientation Script 1

Fig 4.4 Screen Orientation Script 2

Prototype Slides

Fig 4.5 Prototype Slides

Prototype Presentation

Fig 4.6 Prototype Presentation Video

---

REFLECTION

Project 3 of Experiential Design was extremely challenging, as I had to do lots and lots of research, watch tutorials, and inquire about various aspects of my design and how it could be turned functional. The functionality was the hardest part in turning it into a cohesive prototype, as I had to write many scripts. Starting with the visual UI design first was easy, as I was used to designing, but it still allowed me to have a clear reference point for the aesthetic and functional elements I wanted to implement in Unity, so the transition from design to implementation was smooth, thanks to the groundwork laid in Figma.

Building the prototype itself in Unity however, was a significant learning experience. I had to carefully manage the detection of single and multi-image targets, ensuring that instances didn't collide with one another, it took a lot of trial and error in ensuring the functionalities responded accurately to user inputs. It was all very complex, however, in the end, it was satisfying to see the AR features come to life, with the correct color spheres and information appearing as intended.