Sun as login/logout test

When shown the icon of the sun as the login/logout button the users liked this as it carried on the idea of the sky and going up inot the sky to seek there information.

The sun symbolised the entrace and exit to there info like in like the sun is the powerhouse of the application so as a group we thought it would be a good icon to use.

User Testing of the Interface

When i went down to the doras center i showed the interfaces which christine had drawn up.
By means of a group discussion with the clients and Tony i discovered that the user wanted:

• A clean cut interface easy to understand
• Have a lot of space and for it to not be cluttered so avoid confusion
  
• They liked the idea of it being up in the sky (up in the clouds as it is like the situation which they will be in when needing to know there information).
• They liked the pale pastel colours as it was "cool" "calming" and "fun"

Stephanie Botrel

Sun as a log out button and log in button??

Christine Roche

Background for each page ideas

Christine Roche

Tutorial Update

Today i downloaded camtasia and i have been playing around with it to learn how to use.

It is very straight forward to use.

I am going to rent a zoom microphone from Leo and also familarise myself with although i think it is a fairly straight forward device.

I must wait for the application to be finished before i can use camtasia.

Stephanie Botrel

Icon User testing

The icons which are shown below that Christine has done were user tested and the clients down a doras told us that they liked the idea of a building for the bank and hospital icon but not so much for work as it was not as obvious so christine is now in the progress of thinking up good obvious icons to do for the work icon.
The clients aid that the use of text to show the image as an explanation was useful aswell because it will back up the idea behind the idea and tony said that you are better off making it as easy as possible to make the client feel comfortable and confident with the icons meanings.

Draft Tutorial

I made the draft Tutorial using interfaces which i recieved from christine i then brought these into after effects and added text to explain what each step of the tutorial. I chose to put the interface to the left of the screen and the text on the right side of the screen the reason for this was because it looked well on the eye when i tested to see what the text would look like on the left it just didnt look right and the rest of my group agreed with me. I gave the application a black background to make the interface stand out and also white text as it looks very clear against the black background.

I then made transitions, i increased the scale of the interface and had dissolve effect on all steps of the application.

The draft Tutorial is on a CD which i gave to both lectures was done as a user test to get a feel of what the user felt about it and if it was successful.

Results:

• The user found that the tutorial gave them a clear idea of the steps which are done in the set up of the application.
• The User and Tony suggested the use of audio to back up the text would also be good as some of the users had difficulties with reading the text, and it also meant i could speed the pace of the tutorial up slightly.
• The Black background did not reflect the application in any way or form so i will have to rethink the colour again.
• For the final Tutorial i am going to use Camtasia which is a recording device which records all screen movements as i think it would be a good way to make the tutorial to actually show the user the step by step way of using the application.

Stephanie Botrel

Must think of a work icon

Different types of icons

Hospital icon with picture of surgeons.

Different kind of background

Cube building example of what each icon could look like to stay the same theme.

This is a work icon. It is a man with a brief case...no words e.g. work.

The euro symbol to represent the bank icon. The word bank is also not included.

This is an hospital icon. Just a red cross no hospital word.

Work icon

Hospital icon.

Bank icon. All very simple theme. Very basic.

School with picture of blackboard and school items. (not using school icon anymore as we found from user testing that they would prefer a work icon)

Bank icon with picture of coins.

A sphere with word work on it. User friendly as it looks like a button.

Hospital icon

Bank icon

Looks like the previous however there are pictures for each. Here there is the universal symbol for work.

This is also a sphere with a red cross on it to represent the hospital icon.

sphere with euro on it to represent the bank icon.

Christine Roche

Personalize page

Christine Roche

Character with Initials

Instead of the logo of the application on the front of the character the user choses, we asked the people in Doras if they would prefer to have something else there instead and they came up with the initials of what ever they name their character. For example if they choose the male character and call it Tony then T will appear on his shirt. We are not too sure if we are doing this yet though.

Christine Roche

Button Mock ups

Christine Roche

Choosing a Character with dark sky

Christine Roche

Idea of background when app opens up

Only a rough idea. It represents a cloudy sky. The client/person can't remember something....a.k.a. it's blurry or cloudy in their mind.

Christine Roche

Mock up with 3D characters

Christine Roche

Website to download the application

I will make and design a basic website that will enable the clients to download the application onto their phone. The web site will include information on how to use the application, the members of the group and of course the link to download the application.

We were thinking of putting it on Doras' website but we then realised they don't have an individual website, there is only the Cope Foundation Website. We also considered putting the link onto the CIT website where it could also be accessed by students and lecturers however we felt that this would personalize the application further by having its own unique website.

Christine Roche

Possible icons for work icon

I researched different types of images I could use to represent work for the work icon:

Christine Roche

Male Character 3d

3D effect with a drop shadow

Before

The logo will be where the question mark is. This is to compare what the male character looked like before and after.

Christine Roche