Experiential Design
Kyra Binti Rizal Hamzah / 0337085
Experiential Design
Week 1
Introduction to module
Week 2
Journey maps. Touch points. Pain & Gain points.
Our exercise was to create a journey map for an experience: My group (me. Mox, Hannah, Ehti) chose to create the journey map for Taylor's Open Day.
Feedback from Mr Razif as we worked on it in class: Generally we had to make things clearer, for example at the temperature checking point, how is the temperature checked? How is the health declaration carried out?
Week 3
We presented the version of the journey map that we improved.
Feedback from Mr Razif: Touch point we could focus on to create an AR app would probably be the tour touch point.
Week 5
Presented user journey map for AR app (Self guided tour)
Feedback: Add some gamified aspects as incentive for users to tour around the campus.
Today we also learnt how to use image target AR camera in unity to make a cube
Week 6
How to add video to AR image target & how to add a button to make a cube appear & disappear)
Week 7
How to use scripts to create UI with different scenes and a button to toggle between them
Week 9
Scripting buttons to take you to different panels as well as for popup objects
FINAL PROJECT PROPOSAL
Proposal feedback:
Look into using ARCore for this app rather than Vuforia so that the digital stickers can be displayed right upon opening the camera rather than having to scan a card first for better user experience.
Week 11
The main setup of using ARCore didn't seem too different from Vuforia, based on this video.
The next video I watched was quite comprehensive of the whole process but the speaker used a lot of shortcuts when programming so some stuff wasn't very easy to understand given my minimal understanding of the coding language... \
Felt a bit overwhelmed at this point. Then I read this article by google which was a lot easier to understand but a lot more basic ???
The article was also linked to multiple other ones that explained things more, so am feeling a bit more confident now, will mess around a bit to see what I can do before I finalise whether I will use ARCore or Vuforia!
 |
| Worked on the assets so that next week I can start putting everything into Unity |
 |
| Went back and forth quite a bit figuring out the design of the cards in the UI and finally settled on these. Unfortunately I forgot to screenshot more of the process, I had quite a few iterations of it. |
This week I started creating the app in Unity. Also I finally swapped from 2019.4.8 to 2019.4.14 and wow it is so much more stable, hasn't even crashed once.
Before I began anything I looked through the Unity file of the exercises we did during class to refer to the scripts we learnt.
 |
| Changing between screens |
 |
| Popups |
Then I started putting the UI together.
 |
TUTORIALS I REFERRED TO:
Creating scroll view (I watched a few of these to see if there were multiple methods or just one out of curiousity, but yep)
Once I had that down I began assembling the rest of the UI, which I decided to do entirely in one canvas as there are only 3 different screens within it. The main sticker page with different categories as seen above, the how to page, and the sticker preview pages that appear when you click on stickers on the main page (which will lead to the AR scene). I also included a shop tab that redirects the user to the sticker business' shop website -
public void OpenURL(){Application.OpenURL("http://fischhaus.com/");Debug.Log("is this working?");}
Once I had that down I began assembling the rest of the UI.
 |
| Final hierarchy of the UI scene. |
Along the way I also had some issues with the navigation buttons. On the StickerScreen (main page) there is a navigation bar with buttons leading to each category. Upon opening the app, I wanted for the first category that's visible to have it's button highlighted without having to be clicked on (as you are already viewing that page upon launch or upon reopening the sticker screen after looking at any other screen.
There were some other tutorials I looked at too but given that I was doing this in the middle of the night I forgot to note down the other links (and to be frank if I included every single forum and video I looked at that night this post would go on forever)
Note: in order to keep this eportfolio quality over quantity and prevent it from becoming "The Weeklong Search For Scripting A Highlighted Button When The Page Is Active : A Memoir" I'm only including screenshots from attempts that taught me something besides anger management and patience)
After this point I looked at Unity's documentation for orders of execution to see what other options I could try besides start and update. Trying OnEnable() seemed promising but the result was the same as having it on Start. I realised then that due to the way I put everything together, I would need it to be executed whenever the panel was active rather than just when it is enabled.
 |
| One of the many if statements I tried. This worked to make the button highlighted upon launch but not upon returning to the sticker screen |
 |
| I wondered what calling on update would do as I never used it before, so I tried that. Turns out putting the script there made the button perpetually highlighted even after clicking other buttons. This attempt was what it took for me to understand that Start() = upon launch and Update() Continuously after launch. |
I then searched up something like "unity OnActive" and found a forum thread discussing just that.
 |
| The final, functional script (and the script on the forum I referred to) |
And that concludes the button highlight saga.
Week 13
I have yet to add in transition animations but here's how navigating the finalised UI is (featuring my precious button highlight )
After that I tried to run ARCore but it was... very difficult i dont know what I'm doing.
Week 14
Monday
The saga of my attempts to use ARCore continue. This is the final installment though. I give up. Setting up the ARCore package alone took so much time, and even then Unity kept coming up with errors? And I didn't even start adding anything yet. All I did so far was add the scene and add an ARCamera to it. Anyways, back to Vuforia, as I don't think I have the time anymore.
The thing is I had a lot of issues earlier today. Something suddenly went wrong without me doing anything. The anchors for the sticker panel kind of went haywire and I had to redo the scrollviews. The buttons were kind of flying everywhere. Have some videos of me stressing out over it:
Plan moving forward - Vuforia. Image target true to real size. Create a script for the buttons that take you to the AR screen so that the button for each sticker shows you the same sticker in the AR? Now I want to sleep ok goodnight.
Friday
Debugging! The sizing on the AR digital stickers was a bit off (the image size itself wasn't to scale, turns out) and the text on the AR screen ("scan store card" instruction) wasn't disappearing as it was supposed to. Also looked at it and realised I should add an animation for when the digital stickers appear. This video was maybe 90% there. The builds before that had a bunch of scaling and anchor issues cause yes, I still lack the understanding to properly set the scale and anchor my objects.
Sunday
I realise that my app is veeeery simple looking and since I have extra time I felt like it would be worth it to use this time to make improvements wherever I could, so I added:
-the animations both for the stickers appearing as I mentioned earlier
- animations to the How To screen, which I also rearranged in the scene hierarchy so that it would be the "onboarding" screen.
- different default/pressed colours to the exit button on both the preview and the AR screen.
I also changed some text sizes, button text alignments, panel sizes etc to try make the app look more refined.
 |
| Old UI |
Week 15
FINAL WALKTHROUGH:
Reflection:
I am both satisfied and dissatisfied with my final outcome if that makes sense? There are some things that I feel turned out fine, and better than expected, and others that I feel like they could have been done better. The issue with those things is that I have the ideas on what to improve but have no idea how to make those improvements . There are certain things I look back on and think oh! This could have another feature here! What if I add a tap or swipe to change sticker function! Which sounds quick and easy enough in concept, but due to this being the first time I'm building something from the ground up, from start to finish, I realised that adding these features I think of at the last minute would mean having to rework perhaps ten other things in the app. The matter of me figuring out how to do things, but doing them in a way that's inefficient and difficult to adapt has been a long running issue throughout this project. Just look at my progress further up in this post and I think it might be a bit evident. Things like anchors and pivots, panel sizes, heck even just placing assets (fun fact- I didn't realise the grid alignment component was a thing until week 14, that being after I had manually created the grid layout for my sticker screen buttons, dragging them into the right position one by one). If I try to be optimistic about this, I suppose that's the beauty of learning something new, and creating a project in unfamiliar territory for the first time. You don't really know what you're doing until you're done. You don't know efficiency until you've done things bent over backwards in the most inefficient ways possible.
There is a part of me that is very stressed out right now: the part of me that strives to achieve perfection all the time. That part of me is screaming internally about wanting to redo this entire project based on the things I learnt along the way, without the endless hours of staring blankly into Unity, testing random things until I finally figure out what works. However I also realise that although I might not get the greatest of marks on this, the things I learnt along the way are invaluable. I wouldn't have figured out the majority of the things that I did if I didn't mess it up first. If my scrollview didn't anchor to the randomest parts of the screen, I might still not know that the grid alignment component exists.
Long story short, the process is more valuable than the outcome. It's just that. Well. How do I explain that to my mum when she asks about my CGPA. Haha.
