Sem 4 _ Experiential Design

28 August 2018
Week 1
Vivien Christian Cahyadi [0331241]
Experiential Design

Week 1 Tutorial 

1. Sign up and Log in to Vuforia
2. Copy development key
3. Create Database, upload a to be scanned asset and download the database
4. Open Unity
5. Go to build settings > player settings
6. Scroll to the bottom and download the vuforia plugin

Result : (Please ignore the nose picking guy in the background)

Week 2 Tutorial 

Experiential design (user journey/mapping)

  • sleep / relax
  • groupwork
  • work / study individually
  • borrow / read a book
  • print, scan and photocopy

  1. Enter the library
  2. Tap student ID (through the entrance machinery) >
  3. Search Taylor’s catalogue (using your phone, or the provided computer) / directly go to the bookshelf / ask the librarian
  4. Take note of the number of the book you desire >
  5. Go to the specific shelf with the number range
  6. Browse the title of the book in the specific row
  7. Take the book (read or borrow)
  8. If you decide to borrow, go to level 2 and check the book out by using the self check out machine. Take the receipt and take note of the returning date.
  9. Go out of the library, scan your ID again
  10. After 2 weeks, >
  11. a.  (if you have finished reading) return the book to the 24 hour study room using the self return service. take the receipt (keep it or throw it)
  12. b. (if you’d like to extend the date) Access Taylor’s library website, Login, and extend the date

Tap student ID :
biometric / face scan

Finding the book :

  1. Label the shelfs based on the category of the books ex. architecture, photography, culinary etc.
  2. Improve the numbering system / the book labelling? and organize the book (levelno.shelfno.rowno.bookno)
  3. Ipad, map, directory system
  4. or a keypad where you can input your book number and then the shelf could light up (some indications that can direct you)
  5. if multiple people are borrowing at the same time, we came up with a monitor system signifying your turn / queue.

Checkout :
  1. Self checkout using phone (maybe this is one of the app function)
  2. The tutorial for the machine, the steps and images is not clear

Returning the book :
  1. Either extend Taylor’s mobile app function or construct a new library app (equipped with reminders reminding when the book should be returned, book recommendations based on your checkout history, etc.)

App Proposal 

Name of the Project
Proporhead, pro head, guide a head, masterhead, nicehead, not sure yet

Project Description
An AR head proportion guide for artists

Problem Statement
Often times beginner artists would encounter problem when drawing the human body where the proportion could be amiss, resulting in an unappealing drawing. Learning the correct proportion will ultimately help improve drawing. 

Aims/Goals of the project
help artists draw better head.

About the product
Good artists copy, great artists steal. The AR app focuses on the human head proportion, helping beginner artists or perhaps intermediate artists easily draw better head proportion using a 3D head proportion model that can be rotated to be viewed at different angle. The head model can be viewed as it is or projected onto the drawing paper with AR to be traced. Head proportion can also be customised, like the Sims. The head however, is only a rough block out and not a detailed head rendering, it serves as a rough guideline to each artist’s drawing style. It is also advised to first rely on the app, and then slowly deviate from it (the tracing) as you progress.

Artists who want to improve their drawing fundamental and skill by learning correct head proportion.

Primary : beginners who never learnt or haven’the correct proportion.
Secondary : More experienced artists who’ve known the correct proportion but wants a quick reference


Primary : artists with no fundamental
Secondary : Artists with fundamental but still having problem without reference / problem with more uncommon angles of the head


Drawer with no drawing fundamental + no reference :

Quite able drawer :

Solution's journey map

Andrew Loomis Method of Drawing Head 



Week 8 Video Exercise

This time I tried using Vuforia ground plane.

  • More stable
  • Can place model on paper
  • Model doesn't seem to be really on the surface of the paper
  • Have to add UI, floor scanning etc. 
  • Have to be able to scale model as well. 

Week 11 Progression

Finished 3D modelling whatever is needed. In the picture: the box guide, andrew loomis cut circle method, and planar head. Due to time constraints I think I am going to provide only the adult male model.

Experimenting with the design. Paper texture is used as the background to simulate the drawing experience. Changes can still be made however.

Week 14 Progression

First, I made the head rotate-able through dragging. This I did by following a tutorial. Next, I worked on the toggle to activate and deactivate the head models when the checkboxes are clicked. These were easy, the challenging part is to make the screenshot thing to work. So when the use click the button "let's draw", the current rotate position of the head will be screenshot as a transparent png without background, then converted to sprite 2D for use in the AR section. Fortunately I was able to find a solution for the transparent screenshot by digging through the internet.

Render screenshots with transparent backgrounds from Unity3D (free version)  (Kaye, 2015)

There are some errors however ... which I can't solve and ask for Mr. Razif's help.

  1. scripts that use "using UnityEditor" need to be in the editor folder but another script of mine who's referencing this particular script can't access it anymore when I move it there.
  2. After the screenshot is done, the app seem to pause so I can't load the AR section of the app

For the AR section, I figured I should just follow the Vuforia ground plane demo downloaded from the asset store, then tweak it from there. Using lean touch, I was able to make the image rotatable, scalable and translatable, then combined with the script from the demo here's what I came up with.

And... of course I have to remove the Vuforia UIs and especially the mid-air functionality. After much tweakings I decide to make my script from scratch but I did reference some of the current one from the demo script such as the reset() function.

Finalised the planar head model, it's not the best looking but it will do the trick. I subdivided/smoothened the model but creased the edges to make it look more finished.

Then I made this info section of the app which explains the Andrew Loomis drawing a head method taken directly from his book. This I did by using arrays for the image, the title and the description and have the next and previous button cycle through it. Due to the lengthy explanation I made a scrollable text area where the user can just scroll through it to read more.

Designs using Adobe XD:

As seen above I made a dark theme version of the app but let's just stick with the current one for now.

Final Result :