Conclusions Curious Room Final Year Project

There has been little time to blog about Curious Room as the past ten days or so were spent doing the final build of Curious Room.  To re-cap Curious Room is an application to be purchased and run by a medium to large sized company that allows users free time every week by promoting relaxation techniques at work. Users get 5 digital tokens per month, they can use up to two per week and each is worth up to 30 minutes of free time. So the incentive for employees is to get up to 2 & 1/2 free hours to relax, the objective: to work more relaxed and thus creatively.

For my final year project demonstration on May 4th of Curious Room the build in Codeigniter makes up the the following blog post.  It is a run through of how it works with one user and utililzing the use of an avatar, 5 digital tokens and logging in and logging out. A user may also change their details, avatar and leave feedback. 

homeScreenCR

After getting the navigation issue finally resolved in CodeIgniter it was time to start adding some functionality to Curious Room. The seven main areas I added functionality to my project are outlined by this use case diagram:

UC_diag_CR

Below is a sitemap of Curious Room. The admin is in a different colour as the administration is not the primary user of Curious Room but they would need access to record how successful Curious Room is and how often users are availing of its services.

MsterSiteMap

On the main screen there are login and registration buttons:  The view in the MVC part of the framework, takes data in via POST objects and sends them to  the controller these are then passed to the data base. In the login example the username and password are checked and then passed back out to the controller and allow the new view of uses home page to be to be loaded to the user. The registration form takes in the user data via a form and passes this to the controller which in turn updates the data base with with the new users details.

From the first table below you can see the user Tim was added to the database.

TIMDATABASE

More details on how the databases were designed and developed can be found in this blog created to highlight Creative Multimedia Programming can be found here:  /http://fionakiely1.blogspot.ie/

If you look at the first use case diagram,  the profile case is broken down further to a level two use case below. Another main feature of Curious Room is being able to update your details as one uses the application. After Tim has been updated you can see his new details in the second table above.

UseCase_EditDETS_Level2

The fields are pre-populated to aid the user in selecting new details and to remind them of their old details. No validation was put on any of these functionalities as Curious Room would be used in house at a company and this is not necessary. Each user is identified by a userid and they are unique to the database so it would be impossible for a second user to repeat the same name and password as users are identified by this unique identifier. Tim1, for example has the userid of 49.

TIM

 

UserUPDATE_Paramater

The second ‘Update User’ image is an aside, showing the URL and how CodeIgniter works with the second parameter being passed in and good for the developer to identify user 49.

After a user logs in or registers they are taken directly to the Play Choices page. In the navigation bar below note the active users Avatar and avatar name pop up to let them know they are actively logged in. This repetition is useful to the use so that they can identify with an avatar as they use Curious Room.

I will not put a lot of code in this blogpost but the users image is read into the navigation bar as folllows:<?php $this->load->view(‘nav’);  as an  example of how the user has been carried from screen to screen in CodeIgniter, by the use of built in CodeIgniter functionality sessions were used to ‘follow’ the data of each user after login and registration:

$user = $this->session->userdata(‘user’);
?>

These are useful ways to utilize CodeIgniter’s functionality.

AfterLogin

On this version of Curious Room the Meditation Option can be clicked to then takes the user to the meditation page:

PlayOlive

As you can see from the meditation page a different avatar is logged in and there are visual elements that ‘fall’ as a visual stimuli if one cannot keep their eyes closed during meditation. The ‘dots’ you see are soft moving Java Script file. A good point was made during the demonstration of this project to make the audio auto load. Perhaps in a full build of Curious Room this would be a good option and it would work well if an RFID tag was embeded in something (the logo), to be placed by the user and triggered off in a new room to listen to the meditation.

logoSmall

AV_UPDATE_MSG

The above screen is the view for the change avatar option in the navigation bar. The images above were drawn individually in Illustrator and are .PNG files. Each avatar is part of a radio button and this is placed in a form. The image is identfied by the name field in the radio button:

 <input type=”radio” name=”profilepic” id=”AvatarA” value=”1″ />

So this was a really clean way to identify the image and pull this data back to the database in the controller:

public function updateUserAvatar($userID) {

//prepare an array of user info submitted via the POST

$user = array(
“avatarID”=> $_POST[“profilepic”],
“UserID”=>$userID
);

This was difficult functionality to get working but in the end it works after the user logs back in they receive a new avatar. There was trouble with the array and it had to be pushed:

array_push($updatedUser, “avatarUpdated”);
$data[‘User’] = $updatedUser;
$this->load->view(“changeAvatar”,$data);

but alas only the message goes to the view. I will still have to find a solution for this!

The idea of being able to use a different avatar was very important. In lecture 7 of Human Computer and Cognition Ms. Farmer  went into detail about modeling the human and why it is common in media with sensitive or new information. Their is evidence that people can identify more easily with unknown topics or subjects is the character are not human. This was an important part of Curious Room as this system would prompt all sorts of employees to do activities that promote creativity and relaxation. The evidence in research suggests that the person is more likely to engage if the character is an abstraction.

The secondary reason for this is simple it would allow more mystery and prevent two buddies from always meditating together as employees would be flagged by administration and encouraged to randomly use new avatars.

The about functionality is important as it provides information about how Curious Room and provides information about the different activities if employees are unfamiliar with it.

about

The last part of functionality to allow the user to express themselves and to help the employers get feedback is through the fun and fast feedback bar. On the first prototype it was though that a comments area would be a good idea. However, if one is meditating they are clearing their mind and leaving a long winded wordy ‘report’ of one’s experience defeats the purpose of meditating so this idea was scrapped and hence de-cluttered the screen as well as de-cluttering one’s mind.

Below, a simple visual tool made up of clouds and suns for the user to give quick feedback:

feedback_bar

This is what the administrators page would look like:

admin_screenGrab

The administrators would mainly need to see how frequently the system is being used and in a full build of Curious Room what activities are most popular.

Future considerations for Curious Room would be to get two users to use Curious Room and see who else is on line after they login:

FutureOtherUsers

TwoUsers

Two users of Curious Room, for future development.

During the development of Curious Room users were involved three times. At the beginning six persons who work in medium to large sized companies filled out questionnaires to see if this was a viable project to develop. Four weeks ago the project was tested with a group of open source developers at a monthly meeting for feedback. I received advice to treat each screen as a separate product and a MVP (minimal viable product). This was nerve wracking but a great experience for my development as a designer.

The final part of Curious Room’s project development was to conduct testing. This was done with six users. The feedback was positive including comments that screens are ‘easy to use’, everything was ‘clearly marked’ and that it is a good idea. The best comment is that it is fun to use! Good suggestions regarding small font size in places and making the about screen more user friendly. This session of user testing provided valuable input and was a good way to include users at each phase of the design process.

TESTING

Images of users testing Curious Room above and below.

Short video’s of user testing is also up on You Tube:

I am unsure what I will do with this project but I will spend some free time this summer keeping up new PHP skills and getting the two or more users working as I find the use of sessions interesting. I was given advice from one instructor to use a cron job so this might be looked inot. If I were to build the project again, CSS would be built with more clarity and now that I have knowledge of CodeIginier it would be built that framework in mind.

Overall it was a great experience and the last three weeks have offered me more than I could imagine in terms of learning about CodeIgniter and PHP. Overall it was very exciting when queries started working and the project started coming together and growing.

Curious Room: LogIn & Seious placement issues of CSS

Last Week Tuesday April 19th Onwards:

Got some tutuors to look at curious room project so far – the landing page was criticized for not having a navigation bar and looking a bit bare. Thinking I had some time I decided to put a navigation bar with no links into to see how it looked. This was a bad move it was confusing on two levels:

  1. The suggested navigation on the landing page, login page and registeration page served no purpose.
  2. In Codeigniter I now had two navigation bars that were too similar and this was confusing but it took me a full three days to see why.
  3. This issue of having two navigation bars confused me in COdeiginiter about here the opening and closing was for the page as a whole. (see image)
  4. After sound user testing and feedback from users in industry and persons not in industry  from (Tuesday April 19th – Saturday April 23rd)   I decided to take the navigation out.
  5. After this exercise I realise I lost many hours and I could kick myself for listening to anyone but myself!

Lesson Learned:

– Listen to my gut instinct MORE. Stop relying on the opinions of others.

– I need to learn every style rule about CSS, it is unpredictable when i am not 100% on what exactly something is styling. When i know exactly how the CSS is styling I have more control over what I am rendering on the page.

So last week due to this major hiccuip it took me a full 24 hours to rectify in css, codeigniter and to test it to see if it worked. I will not put the fix up here but it is working. It was simple but tricky!

THis is what I got working last weekend.

  1. User login
  2. User registeration

I did this by using an example project from the php class and I am using this code as base code to get my project working. There are good features in the code and my hope is to get some more functions working for Curious Room around them.

CuriousRoomBADDIVS

Pushed to Git in one go! FYP V32

This is a short post, I am just making a record of my work so far. This evening I got some small javaScripts working after help from one of the tutors yesterday so thank you! A shout out from my blog to you! I tackled the navigation bar again and some more media queries on  some of the img links they are misbehaving. The yoga icon is very wonky in the yoga page but I will try to fix it again.

Php and codeigniter is a disaster so far, so poorly. I fix the errors and make more!

pushtoGitApril6

 

Curious Room Report

This week was interesting – lots of graphics were drawn but CSS was slow, firstly media queries would not work properly. I had to include the min & max and not just the max as I had done successfully in an earlier project. Then my navigation decided to act up. On the upside I had lots of fun experimenting with flexbox for my menu but alas it did not work. Another effort for the digital grave! No doubt there will be a price to pay for time ‘wasted’ in the coming weeks …..

fexboxtestmediaPlayer

 

I am having great trouble to get simple jQuery to work and the weekend was spent developing a nice looking media player that does not work, yet! Here are some screen shots of my user feedback development screen and about screen. It is still unclear to me how I will get the html integrated with php as I am finding it impossible to de-bug initial work. More challenges await….This creative world is a crazy gig – my deep desire is learn new ways to execute creativity but frustrations loom large; relying on old techniques to render new ideas. Yes the digital paradox.

Oh and I forgot to push to bit bucket so that is next on the list! A link will be posted as soon.

 

FYPBLOGApril4

FYPBLOGApril4_2

Curious Room Progress…March Madness

The past week has been spent experimenting with media queries and trying to get Flexbox to work. Flexbox is not working for me so I may abandon the idea for my navigation altogether. I read a really good article by Gene Crawford titled: ‘Focus On Fully Responsive’ and in it he stresses that good media queries are a good foundation to a decent web site. The article was featured in The Responsive Web Design Handbook Volume 2 by Net (magazine). There were other great articles in the magazine as well – I only wish I had more time to do some of the tutorials. I learned also that Sass a system for web design I never heard of before, but after I did some hunting on the net I realise there is a learning curve to this technology and I don’t have time for it.

My FYP is a web based application, to be used within a firm so I started focusing on the media queries and trying to go from large to small and small to large and vice versa. I am going to go back to doing one set of screens for mobile as I am not happy with the results so far.  I have gone back to method used to build the News Site web design and I may just stick with this to get the project finished on time.

I was delighted yesterday when I got to push my code up through git and it worked the first time!

Graphics

I started drawing my graphics in illustrator and it is very satisfying to have progress in that department. The navigation is a mess so far but I need to have a nav bar that can hold an image (and read from the data base)  and the design of each tab needs to have a different colour. Challenging but I have been trying out different methods to implement the design. I am attaching three images one is of the full screen and the other two are media queries – only the media query at the lowest break point is working! Earlier today the smallest two break points were working but I will just have to watch more You Tube and figure it out….quick smart!

I still can’t get Codeigniter to work for me so I am slightly worried about the database side of this project. I can only get working what we did in class so far.

blog_march28 blog2_march28 blog3_march28 git_push_march28

Week 6 Begins!

Today my tutor met with me. We went over the stages of interactions and went a bit more into details of the data base side of the project. The ‘hole’ in my sequence of steps was raised – I realised this after the presentation last week. To go through the selections of options again for each Avatar was useful.

So far for this project it will be necessary to have the following tables:

Employee 1 Details

Session ID Table

Employee 2 Details

Options Table  (Could have image in this table)

 

I am posting some images used  from today that relates to the above points.

Feb_24_blog1

Slides where on the left there is a ‘successful’ match for doing a meditation with another person. However the pop up for USER 2 is missing. It should be inbetween both slides above.

Feb24_Blog2

Schedule on the left we are in week 6 and the presentation for this project is week 9, on 16th March! Yikes – get cracking Fiona :) blog3

table sketch of sessionID table design for MySQL. Feb24_BLog4

Pop up For user 2 should appear on screen sketch from slide notes from presentation last Wednesday, 17th February.

 

Presentation of initial prototypes, scenarios and design concepts

This was an interesting week the official presentation for our final year project was yesterday. Each person presented so we got to see the interesting projects being worked on so that was a treat and an opportunity to learn something.

‘Curious Room’ was explained using wireframes, sites maps and prototypes of possible outcomes for design. The wireframe and flow of events diagrams have been updated as well as the colour scheme from greens to blues. Help was received from two tutors and this was a great help to me to see what questions were missing from user profiling and requirements. The scope of the project so far seems to be manageable and will work within work break schedule.

Included below are some images from the actual presentation. For this project different snap points will be used to create the website and possible mobile application – let the building begin!

 

FEB 15__HOmePageFEB 15_About Page

Login and what Curious Romm is about.

FEB 15__ScenarioOne_StepCHECKBOX FEB 15__Secenario1-Req-Step -One

What Meditation is and on the right the options are ‘successful’.

 

FEB 15__S1_Yes_2 Avatars_medFEB 15__S1_TWO_STAR_RATED

Screen shot of users interacting with Meditation screen and on the right: afterwards a simple feedback area.

FEB 15_Change Avatar _Page FEB 15_Comments _Page

Choosing an avatar on the left and the comments area for users to leave comments.

Mobile-LOGINMobile-REGISTER

Mobile Screens for Curious Room

Mobile-SUCCESSMobile-SUCCESS TWO

Choosing an activity on the left and moving to the most right and screen: two avatars meditating