Creating wireframe , and interface mock up

Due to spending too much time on solving coding and programming part i was lack of time on creating the content. I need to think and play save . base on the game that i have i start go back all the google experimental game that are created to evaluated and scan on how they design their game interface. Most of the graphic are is vector format. The interface are clean and nice also easy to understand.  Base on this few point i quickly sketch out a few idea then start to create my wireframe and interface mock up 

 below is some of my sketch, wireframe and my interface mock up.

Sketches and notes

Wireframes

Interface mock up

Create Flowchat, User Senario, and Equipments

The reason why do i create this few thing so early is because of this can help me check on my idea and concept and user experience.

Both of my tutor didn't ask me to create these things. Yi Wei is focus on user experience, idea and concept. Yee Siang is able to help me on coding. I was motivated to create this when i was waiting for Jeremy to finish the consultation with Jazmi and i overhear the word user scenario which make remind of the project we did in TWP is level 5 which help us to understand better on the artefact that we are creating. And create flowchart and scenario also able to how to create a step by step tutorial to the participant.

Flowchart

Floorplan and equipment 

The measurement of projection distance to help me calculate my floorplan and below are the equipment i will be using during the exhibition

Projector screen or back projection 

Panasonic PT-LB1EA 3LCD Projector (30.73cm x 6.86cm x 21.08cm)

Dell or mac desktop

Router

User Scenario

Game 1 (Pop the Bottle)

Game 2

Space Fighter

Similar project by Leo Burnett Interactive Outdoor Challenge (Industry Benchmark)

Interactive billboard by Leo Burnett

This was stunning to me as i saw this article and the date of articles. I was researching on some of my coding then suddenly when through some video that was share in my social media. I do notice on this campaign created by Mcdonald about the ice cream but i didn't look deeper into how the campaign was created and the few minutes of video i realised that the concept and idea are very similar to my ideas.
And the first thing come into my mind is that will my project be marked as plagiarism ? I was so afraid i texted my lecturer through social media about the news and he reply that it is ok. And he do say that the idea is not really original also due to it is created long time at oversea just that in malaysia is still new. And the project that done by Leo Burnett is by a team and i am creating it myself so it will very less percentage of marking as plagiarism. And ask me to continue my project.

This project had won two awards.

And this the video that i saw :

A big sigh after i saw these, maybe great mind think alike. And i am regret why didn't i come out the idea sooner. Hopefully this blog will mark a benchmark and reference for me to show that i am not plagiarising them.

Since there is a similar project that are found in malaysia. I am able to set it as one of the industry benchmark so that i am able to understand and improvise from existing sample.

After analysing this project the connection is similar which is using web connection to set data to the main server then transfer back to games, which we can say is using websocket to create interaction and make the phone as a controller. But this installation only able for one person at a time. Which did not fully utilize the power of websocket which allow multiple user. Maybe this is one of the experience they want to create. But they did utilise the power of gesture in mobile devices to give the user a very similar experience that they are really rotating the fan to make it spin. Which you will find in my installation.

As you can refer back to my previous blog that are talking about hybrid event, I did explain that by gamified the interactive installation; it is able to attract more crowds and giving them a feedback like rewards will motivate them to participate.

References:

http://www.marketingmagazine.com.my/index.php/categories/breaking-news/9993-leo-burnett-s-double-win-at-malaysia-s-first-interactive-outdoor-challenge

http://www.thestar.com.my/News/Community/2014/01/23/Interactive-billboard-to-shift-consumers-minds/

Weekly tutorial (6) with Yi Wei (Major issue that i face during my project)

During this last tutorial i realise i am abit back on schedules and lost in the direction i had been worry and testing too much on connection which make me forget what is my objective and selling point .

During the discussion with Sweii and Yi Wei. They list down something that i need figure it out to solve this major issue. If not my project will not be that interesting during the pitch. Because if the content is not there or special enough people will think that the phone is just controller. which a lot of thing can be replace it and save  a lot of time while doing it .

Yi Wei: Content may help to sell the project!!
Sweii: After testing on so many tutorial which one is the most suitable tool to apply to my idea. And i should decide on this earlier rather than now.

I do make my decision in the early stage but during the progress of learning and understand i do realised that there are some limitation. I will like to make the project to be perfect. But maybe i am negative people, i worry too much on time and my skillset and this had cause me to think so much and make myself limited to solve one thing at a time so that i proceed safely which is a big impact of causing me slow down in my progress.

Action: Stop on tutorial and start building on content and idea. Find more research to back the content up to make it even solid.

Yi Wei: For example user can access the artefact after connect to the router and participant at anyplace they want.

This give me a trigger point to come out my idea. when i am back i went back to SOI and see what i want to create at the starting of my project. And re-analysed everything tutorial that i had did and come out a conclusion what are thing that i need to focus on. Beside that i also list out what are the area i am able to complete for my final exhibition and base on that i need to decide the what i need to do.

After analysed i decide that i will creating a web instate of an application. And by using QR code or url to link to pages. The flowchart and user scenario is record in this blog.

As for create as an application, i will be include this idea into my pitch for future possibilities. to show that the possibilities of update of the technology of my project.

After than i come out the how my project should work and solve the problem that i state on my SOI.

A wider connection router connection able to bring crowd to event after connected to the free router wifi signal. When connect and connect to web browser the ads and promotion material will pop out to tell user that the event is happening so they come and join the event and make had a chance to win a prize.

Using mobile a best way to prevent for property lost and destroy. Beside that socket oi are able to connect with unlimited user. which make it useful when that are games that will be interest when there are plenty of players. And with the gesture that are available on the mobile devices, the way of interactive with the games will be more exciting like user are able to swiping, accelerometer,  pinch and scale to interact with the games.

• It is able to promote the event to the user when connected to the browser as a promotion tool.
• Increase participant and solve limited space problem.
• Saving cost and budget by prevent logistic problem.
• Create a new experience to the participants.
• Using the closer gadget of people to create a simple, fun and memorable experience of interaction.

I very appreciate that Sweii and Yi Wei helping me on this stage, i am kind of lost during that time and Sweii say that use what i had try to see what is the most suitable solution for the situation now and apply it .

Thank you.

Setting Up Router

To connect phone with computer server i need to get a router to my computer as a server. So today i go to Sunway Pyramid to get a router which cost me RM110. But if i go to lowyat can get like RM80 but too bad because i don't have transport and time to go there and get the router so yup.

I get a tutorial to create a fix ip address for my computer so everytime i connect to the router,  my devices ip will remain the same. So this the link that Yee Siang provide to me .

http://kb.linksys.com/Linksys/GetArticle.aspx?docid=05a86f51a30940c6b8ffe455c2cb4cd0_KB_EN_v1.xml

It just some simple step. So first you connect your computer with your router with cable or wifi then open a browser key in 192.168.0.1 to got the router setting. If this is your first time login the user name and password should be admin.

After login you will see this page .

Then go to DHCP and the left navi bar there .

Select address reservation to create a fix ip for you computer.

but before that got copy MAC address. To find it go to DHCP Client List . Inside there got the list of devices that are connected to the router.

After that create new  Address reservation page then you will see this page 

Key in your MAC address the create an ip address for it . For this project i set my computer ip address to 192.168.0.103. Make sure you Enabled the status.

When save then this will show up. 

Refresh your router and the page then go to DHCP> Client List then you will see you computer ip address become permanent. 

Creating Socket IO Node js and Json.

I had received a tutorial to create a chat room through websocket . And the tutorial are base on socket io. If you have interest to create one please visit :http://socket.io/get-started/

By following the tutorial i am request to downlaod node.js as well.
Node.js basically is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. To download here is the link .http://nodejs.org/

So base on the tutorial i first create a json file. In the json in the preset why are the data the you will like send and received.

After that i was request to install the library source of node.js into same folder below are the step to do that . i am using mac so below are the code for mac terminal

my chatroom folder is located at desktop a folder name socketio-chat. We need to install the library into the specific folder.
"cd" for commanf to open the folder
if want to check the can us "ls" for list
when you reach the folder then key in npm install--save to install.

Then check your folder whether you have a new folder name node_modules . if yes that means you had successfully download success.

Then i time for us to create the function. create a index.js file to key in the function. for now texting i am using the code that are provide by socket.io. The coding basically setting a local server to let few browser to communicate with each other and function to check when there are user login or logout.

After setting up the server is time to create the interfaces. Use Css to style the form and link all the important files to the html files.

After everything have been done you text to run node index.js in terminal. if you get the reason of listening to 3000 like the image below that mean you had successfully create a local host port to let people send data to get live feedback from the website.

Then launch localhost:3000 in your browser to check whether the interface will pop out and is it the chatroom working .

at the terminal also will show update when they are people login.

If you dont want to follow through the website you are able to follow through the video tutorial below .

Tutorial

References

Nodejs.org, (2014). node.js. [online] Available at: http://nodejs.org/ [Accessed 8 Aug. 2014].

Socket.io, (2014). Socket.IO — Get started. [online] Available at: http://socket.io/get-started/ [Accessed 8 Aug. 2014].

References

Nodejs.org, (2014). node.js. [online] Available at: http://nodejs.org/ [Accessed 21 Aug. 2014].

Socket.io, (2014). Socket.IO — Get started. [online] Available at: http://socket.io/get-started/ [Accessed 21 Aug. 2014].

YouTube, (2014). Node.js & Socket.io Chat Part One: The Basics. [online] Available at: https://www.youtube.com/watch?v=pNKNYLv2BpQ [Accessed 21 Aug. 2014].

Risk management and Gantt Practise

Today class activities is to create a gantt chart and risk management to plan our production schedule. Although we did some gantt chart for the past few year but we normally did not follow. This time everything gonna be different. I had never been so stress on a project, maybe is because this is my final project and i will like make sure the project is able showcase my skill and portfolio, i am struggling during the class activities when coming out a gantt chart. I had separate to a lot of category to make everything is being cover perfectly. So during the class i was unable to finish the gantt chart but i was able to finish the risk management plan.

So below are some of my progress in class. 

Risk Management Plan

Gantt Chart

Above is the process that i had done during class, and the are still long way to progress. After class i went back and continue to think of the schedule then i created my own schedule form excel. For me excel is easy to control and not that messy.

I separate into few categories and mark them with colors. and base the format and briefing from the Sweii i think that i need more time to work on my project during the semester break i will only take 2 weeks rest then i will start to code and create the contents. Then user test and final set up.