Experiential Design

Title        : Experiential Design
Lecturer  : Shamsul Hamimi



Week 1

During week 1, we have assign some task from Mr Shamsul. He asked us to open up a blog page and start research on what is Human Computer Interaction(HCI) by updating in our blog.

So, based on SearchSoftwareQuality, it stated that it was a study on how people have an interaction with computers. However, due to HCI are growing rapidly, there are few factors that the media designer or computer engineering have to take some consideration when the people have an interaction with computers or handheld devices, because different people may have different form of conception about their interaction and they have different ways of learning for their knowledge and skills. So, in order to have an effective user interface design, the computer engineering or media interface designer have to design the certain interface design and the HCI feature are ease to use to the user.

Week 2
We have a lecture on What is HCI with Mr Shamsul. He divide us into 2 groups and we based on our research on week 1 and present what we had understand from Human Computer Interaction in class. 

Week 3
In this week, Mr Shamsul are asking each of us to come out an idea of an unorthodox application. I had listed few idea to Mr Shamsul and he had chosen one of the idea which is finding the nearest clinic, hospital and pharmacy during travel. With this idea, the unorthodox feature that I implement in this application is the user are able to scan their personal information through their own personal unique QR code which had implement in the apps itself. 

Beside that, the user are able to select different payment selection in this apps which pay by insurance or by online payment. Moreover, the translation feature are also implement in this application. The reason of having the translation feature, is to help the user to translate their  personal information which had been input in the apps itself into local language from the country, so that it would ease the user and the staff from the clinic, hospital and pharmacy in communicate each other when the user are request for registration.

Proposal that I had shown to Mr Shamsul in this week:-

Problem Statement

Difficulties getting the nearest treatment when travel.

Purpose

• To ease everyone during travel
  
  
  
• The apps eventually show the nearest clinic or pharmacy to seek for immediate treatment.

Objective

Help the traveller to get to the nearest clinic or pharmacy.

Target Audience

Traveller and Society

Features

• e-card system will implement in neno apps which help settle any billing amount. (acts as like the medical card)
  
  
• Will use GPS to navigate the destination.
  
  
  
• QR code will be used for transaction and profile details purpose.
  (automatically your profile will appear and it will auto translate based on the country).
  
• User able to choose the insurance company details or banking information.

Technology Used

• GPS
  
• QR code
  
• Translation
  
• Online- payment

Week 4-5

Once my idea get approve by Mr Shamsul, and I continue my further step which I start sketch out the layout design of my design, naming the apps, design the logo, font used and colour used for my apps.

Sketches of Layout design

Logo 

Name : Neno

Inspired : inspired by the sound of ambulance, and it do provide the sense of emergency feel to the user.

Design :

Logo design for Neno apps

I had provide 2 different logo design for my neon apps and I shown to Mr Shamsul to choose which one are more suitable for my mobile apps. And he had decided the right one for my NENO apps logo.

Font Used

• Avenir Font Family 
• Lato Font Family

The reason I had chosen this 2 font because they are in the category of san serif, which it ease the user to read compare to serif font. Beside that, this 2 font family are always used in commercial purpose.

Colour Used

The colour selection that shown in the above  will be used in the NENO apps, but I will choose 3-4 colour. The reason that I had chosen this wide selection of green to yellow is because it represent the colour of illness.

Week 6 : Preparation Presentation

In this week, I had prepare our proposal presentation slide about our own unorthodox application. So I had finished up with my presentation slide which had cover about the problem statement, purpose of having this apps, objective, target audience, font use, technology use, downtime failure, colour used, flow chart and references. 

Week 7 : Proposal Presentation

We had a presentation for our unorthodox application, so I had present my own NENO apps in the class which cover all the information needed about this NENO apps. 

The link below are the presentation slide that I had created and present it in this week.

Link:https://docs.google.com/presentation/d/1Lrjby5g3-2Uy4FdMgpD2X5qn6vz3WepVAmRmfoTQeIE/edit?usp=sharing

Week 8 : Wireframe

After the presentation, I start create wireframe based on the sketches which include of the splash screen, main function page and navigation page. The image below show the wireframe that I had create for my NENO apps.

Splash Screen: 

    

Main Feature :

   

Navigation page: 

  

   

Week 9 : Prototype

After create the wireframe, I had come to design a prototype for my NENO apps in this week. So, I had include all the icon, image, font and colour used which I'm going to used in this NENO apps. The image below will show the prototype which I had create for my NENO Apps.

Splash screen:

Main Feature :

Navigation Page :

Week 10-13: Production-video

As in weeks, I had start doing my NENO apps videos by using Adobe After Effect. The image below will show a series of production video that I had done in Adobe After Effect. The stage size that I had used for my NENO apps are in 1920 * 1080.

Week 14: Background Music + voice Over

Once the video are done editing, so I ask my friend to help me on voice over on my video. Besides that, I also look for the background music for my video. Next, I also edit the voice over clip that recorded from my friend in Adobe Audition, then I import it back to Adobe After Effect.  Lastly, for the final finishing of this NENO apps video, I compile the video in Adobe Premium Pro with the background music that I had found in Internet.

Final Finishing NENO apps video:

Week 15 : Poster + Final Presentation Slide

As in this week before the submission, Mr Shamsul had ask us to come up a A2 poster for  our apps design and paste it on foamboard for moderation purposes. So in this week, once I had done my video, I start design my poster for my NENO apps. As you can see in the image below, the colour that I had use for my poster background are also fall in the categories of illness and my concept style idea to come up with this poster design are stick with minimalistic and simplicity design. Beside that, in the poster itself, I had shown all the interface that I had create for my NENO apps, colour and type of font that I had use for my NENO apps.

After done designing, I bring my NENO poster and went to Mummy design printing shop and to print out in A2 size and stick it in A2 foam board. Lastly, I also prepare the final presentation slide for NENO apps which include of problem statement, purpose, objective, colour palette, font used, technique used, downtime failure, wireframe design, logo design, prototype and others more which will explain the entire information about the NENO apps.

The link below show the Final preparation slide that I had prepared :

https://docs.google.com/presentation/d/1T0UjfbqYd-Gr0sQ2KG-PKVDOMXZApuXY1uS47D1Uk0Q/edit?usp=sharing