nidong0820-blog

[nidong0820-blog]

R2 Module 09

I want to focus on the AR game for the rest of my time, and update the UI design before final. 

Scanning Poster Function part is finished in Unity.  Waiting for UI design to finish so that I can update the design.

AR Game & Small Tools Try out some different style for the wander pad. I build a basic demo with P5, and I will style it when I have more time.

This is what I want to achieve for my AR game part. 

So far, 

I am able to open a web browser in Unity.

I am able to control the camera in the web browser and add object or shape on top of the live video to simulate the AR. 

I am also able to get a reading on the device orientation information.

Right now I am trying to control the shape with the device orientation data. I want the shape to appear when the user moves the phone and then animated the shape when the user taps on the shape.  

Here is another solution that uses Unity only:  

https://code.tutsplus.com/tutorials/creating-ar-games-on-unity-using-vuforia-part-1--cms-27210?utm_campaign=yt_tutsplus_3AjK6CCMtU4&utm_medium=referral&utm_source=youtube.com&utm_content=description

I will try this next week, but I have more confidence with the HTML solution. 

[nidong0820-blog]

R2 Module 08

[nidong0820-blog]

R2 Module 07

[nidong0820-blog]

R2 Module 05

case diagram

[nidong0820-blog]

R2 Module 04

I am trying to figure out how to navigate between Unity and html page. The main problem here is I am not sure how to go another unity page on a html page.  

Set up the post page.

[nidong0820-blog]

R2 Module 03

Web View in Unity

Problem with MyPlugin: 'UIAlertView' is deprecated: first deprecated in iOS 9.0 - UIAlertView is deprecated. Use UIAlertController with a preferredStyle of UIAlertControllerStyleAlert instead.

Implementing deprecated method.

Timeline Updated:

Continue importing UI into Unity: -Intro -Home page -About (emotion) -Data(emotion) -New pop up 

[nidong0820-blog]

R2 Module 01

This week’s main focus is on the UI.

Update UI and added detail:

- Update Intro page.  - Redesign home page (AR mode off)  - Add “Suggested Read” on emotion-about page - Add “Related News” on emotion-chart page - Refine pop up window - Import to Unity

Tech: Learn to upload Unity project to Github.

Learning Open webview in Unity.

https://www.youtube.com/watch?v=nA8EAP2tylE

Build a basic interactive  “wander pad” function in P5. 

https://www.openprocessing.org/sketch/647006

[nidong0820-blog]

Final

In the beginning, my plan was too big and I want to build everything. I didn’t have a clear picture of what to do. 

After the midterm, I changed my platform and my timeline. I wanted to focus on getting familiar with Unity and AR, and one user flow first. I was able to do some user testing as well. 

I have learned to break down the big picture into small components. In the future, I will work on my UI while thinking about the coding part. I also want to speed up my workflow.  

For the next steps, I plan to try out other prototyping tools for my project and do more user testing to improve my project.   

[nidong0820-blog]

Module 15

Coding Popup window function in Unity.

Show panel function with “SetAcitve” in C#.

Hide panel with build in button function.

Tutorial Links:

How To Activate and Deactivate GameObject With Button: https://www.youtube.com/watch?v=OUlXD2bf8FU Show/hide https://www.youtube.com/watch?v=OIMfWia4ldw https://www.youtube.com/watch?v=uhQjt2JsQ6I Using JS (old): https://www.youtube.com/watch?v=0-zKE-ZD1IU&t=542s Kreli UI Management Kit: https://www.youtube.com/watch?v=fw78JVgQV2Q

[nidong0820-blog]

Module 14

Coding UI system function in Unity.

User flow 1: 3 scenes: Poster scanner, About, and Data 1popup window: Thank you + login

Change scene function on AR object.

Tutorial Links:

OnMouseDown event: https://www.youtube.com/watch?v=-0eqAUkKQpI

[nidong0820-blog]

Module 13

Refine user flow 1 

Test different type of icon

Refine Poster design and AR

Update Unity assets.

[nidong0820-blog]

Module 12

I took some user testing on how to scan and use the poster. 

Testing feedback:

The information button is not clear as a button.

Switch AR button should be more clear. 

Need a version that can be used without the camera.

More info is needed on the poster. (QR code, how to, tagline)

Explanation on the practice poster is not clear.  

[nidong0820-blog]

Module 11

Refine the interface design based on feedback and research. A menu bar is needed throughout the whole app. I also try to avoid too many action buttons on the same page. I change the demo device screen size and follow the Human Interface Guidelines for the IOS system.

Import updated asset to Unity.  

I will be testing the feelings poster and the practice poster next week.   

[nidong0820-blog]

Module 10

As the information architecture show, there are a few functions that the user can use without login. I want to simplify the scanning process (open app - scan- get info and go).

There are 2 types of posters:

Practice Poster: scan and get guided meditation and practice on the go.

Feelings Poster: scan to see feelings info around the campus and voting.

5 user flow that highlight the functions that I want to showcase.

[nidong0820-blog]

Module 9

First AR testing. Using Unity and Vuforia to create a digital layer on top of the target image.

Simple scene changes with button. 

Tutorial Links

AR MASK:

https://www.youtube.com/watch?v=MtiUx_szKbI&t=1054s

SCENE CHANGES:

https://www.youtube.com/watch?v=TYzdhiRiKd0

[nidong0820-blog]

Module 8

User flow and wireframe.

Basic interaction that shows how to use the poster. 

Watch Unity UI tutorial:

https://www.youtube.com/watch?v=suwZ0EyN7cM

[nidong0820-blog]

Midterm

What I've done? For this semester, I am taking 820, 810, and 699 class. My time was mainly spent on exploring the Processing & P5.js, and trying to build an interactive installation.

However, I came to the conclusion that an interactive poster is more feasible for the project because I realized that my installation idea is hard to explain and the goal is not clear. I went back to do more research on my target audience and tried to clarify my topic and goal. What I want to design is a campaign that educates people about mental health and wellness and to eliminate the social stigma. Therefore, I think an interactive poster is more accessible to the public and a better suit for my project.     

What I am planning to do?  I understand that is a little bit late for me to change the platform that I am working on, but I think I am on the right track now. I also realized that I spent too much time to try to make everything perfect, and I end up with a very slow progress. Therefore, I will use the rest of my time to create one low fidelity wireframes user flow and do some testing. 

new timeline

https://docs.google.com/spreadsheets/d/1PXheoHr4rRgUJZG5S7M9N3k_8hgjaOBDWNFxdHrixbQ/edit?usp=sharing