SEO is the process of maximising the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine. I employed Search Engine Optimisation techniques on my website to try achieve this, using Google’s Webmaster Tools as guidelines – https://www.google.com/webmasters/.

I submitted my site to Google and added the suggested title tag and meta tags to the pages of my website, as well as alt attributes to images.

Screen Shot 2016-06-02 at 12.39.57.png

I used Google Adword to search for keywords to use throughout my site – https://adwords.google.com/

Screen Shot 2016-06-02 at 12.48.12.png

Google prioritises mobile-friendly sites, so I used their tool to check my site comes user this category…

Screen Shot 2016-06-02 at 12.51.20.png

I also used GTMetrix to test my website, this provides a report of the site speed and ways to improve its performance, of which I acted upon.

Screen Shot 2016-06-02 at 13.05.50.png

Curently, PULSE is appearing on the 3rd page of search results. I propose to continue to optimise my site using Google’s tools in order to try get it to display on the 1st page.

Screen Shot 2016-06-02 at 12.54.47.png


PULSE – Website Testing

I carried out website testing on various devices to ensure the functionality and styling was working correctly. Through testing, I realised that the portrait styling was sufficient but I needed to amend the styling for landscape views. I resolved this through created another css media query for orientation=landscape. The below screenshots show some of the errors that I resolved.


As well as the styling, there was also a few links that weren’t working correctly, of which I successfully resolved. I got some members of my target audience to test my site, they registered and tried out the training guide. From this, my target audience gave me some useful feedback of which I acted upon. I added an option to preview week one if the users doesn’t sign up on a Monday, as well as edited a few spelling mistakes and working more on form validation. Previously if the user entered a username but no password, it would still let the access their guide. To overcome this, I altered the code so that it checks the database to see that the password and username match and if not an error message appears.

Target Audience

The target audience for my project are runners, specifically those seeking to train for an upcoming event. The website aims to cater for a range of runners all varying in experience, from first times to professionals. It aims to achieve this through providing training plans of different difficulties.

Screen Shot 2015-03-05 at 22.21.18

Runners would use the website in order to not only informatively guide them through the necessary training but also to motivate them to get all the set runs done. From personal experience, training for a marathon is intense and requires high levels of motivation and commitment. Thus, using Strava and gamification elements (can only unlock the next week once runs have been tracked on Strava) it helps to motivate users through their training. Testing with the target audience is crucial and a process I will continually undertake. I am a member of a running club so will regularly test my work with the club. I will gain feedback and opinions from runners throughout all the process, allowing me to continuously modify the website to make it more successful with its intended users.

Testing in Public Space

Here are the some videos of users interacting with my piece in the public space:

I feel that these show that my piece was successful in the public space as all users were easily able to interact with the piece without difficulty and they understood that they could use their body to obstruct the surreal falling shapes. I think that users enjoyed interacting with my piece and found it quite fun. The fact that multiple users can interact at once was good as it meant those that were more shy to interact could join others rather the interacting singularly. Also, those that didn’t wish to participate themselves were still able to see the piece. At the time of displaying my piece, the public space was fairly busy meaning I was able to get a fair few people to interact and many who watched the tv screen to see what was going on.

Barthes (1964 p.148) believes that

‘the birth of the reader must be at the cost of the death of the author’.

I feel that this can apply to my piece, as the power is given purely to the users. They are able to interact in any way they want, and without direction from me (author/producer), the users (readers) were able to understand my piece and seemed to enjoy interacting with it. It is the users that then appear on the tv screen of which passers by can see, meaning that they actually become a part of my piece. As mentioned in a previous post, Gray (2010 p.166) also suggests that

‘a text only becomes a text, only gains social meaning and relevance, at the point that it comes alive with its audience.’

This highlights how in order for a text to be successful then it needs to have an audience. I feel that my target audience seemed to enjoy interacting with my piece and users had fun obstructing the falling shapes in various ways. Some viewed the piece on the portable tv screen and asked questions, showing that they were interested and intrigued with the piece but maybe were too embarrassed to interact in front of others.

Overall, I am pleased with the end result and feel that my piece worked well within the public space. Next, I will go on to briefly evaluate my piece in relation to the brief, and discuss the iterative processes that I followed.

Barthes, R, 1964. Elements Of Semiology. New York: Hill and Wang.

Gray, J, 2010. Show Sold Separately: Promos, Spoilers, and Other Media Paratexts. New York and London: New York University Press.

Testing in Public Space – Resolving Problems

20150114_145209Today, I tested my piece in the public space and had to overcome various problems in order to get my interactive piece to successfully work. I initially had planned to display my piece on the public screen opposite Costa (see image on right). I set it up using my laptop webcam, however as expected the crowded background in Weymouth House meant my piece wouldn’t work correctly. The video capture picked up the posters and various other objects which caused the shapes to not work correctly. I experimented with altering the threshold level in the code, but to resolve the problem I needed to put up a white screen to blank out the cluttered background. Here are the different threshold experiments, ranging from threshold of 70 – 140:


Due to circumstances I was unable to put up a white screen as Costa did not approve as it meant some of their seating would become obstruct20150121_111653ed. Therefore, I was unable to use my chosen public screen. To resolve problems with the cluttered background, I set up my piece in the small tv studio, near the entrance of Weymouth House. The walls were plain white and there was more space for users to interact with my piece. I used a portable screen, of which I connected my laptop to, and video captured users from my laptop webcam. However, due to the lighting of the area, I had issues with capturing a silhouette-like figure. As the lighting was shinning directly down and I was wearing a short sleeve top, it meant my arms appeared as being mainly white. This made it quite hard to interact wiScreen Shot 2015-01-21 at 11.47.51th as obstructing the falling shapes was more difficult. Also, due to their being a bright light shinning directly onto the area, it meant a shadow appeared on the white wall behind the person. To resolve the problems, I altered the lighting and experimented with various different threshold levels to see what worked best in the area. I also found that the piece seemed to work best when users had long sleeves on as this meant they appeared as being more silhouette-like. I decided to rotate the portable tv screen around, allowing the users to see themselves on the laptop screen and others to view the piece on the tv screen. This meant that even if people didn’t wish to interact, they can still view the piece and decode their own meanings and messages. Here are pictures of the final set-up and users interacting with my piece:Screen Shot 2015-01-21 at 14.57.15 20150121_120433

From this, I feel I should’ve possibly been a bit more organised and asked in advance about a white screen and permission from Costa. However, I feel that the area I used in the public space worked out to be more suitable, as it allows more room or individuals/multiple users to interact. Its also means that to preview the piece, you don’t have to physically interact with it as you can see others interacting on the public tv screen. I think that due to the area and set-up, when people see others interacting then it encourages them to go up and interact. Users can interact with friends and are able to have more fun playing around with the piece. Next, I will add videos of users interacting with my final piece and discuss comments that I recieved when displaying my piece.

Testing in Studio

Today I tested my interactive piece in the studio room, W119. There was a white board and white projector screen available which I was able to use for the clear background. From testing the piece, it allowed me to see if it worked properly, as well as to see if there are more improvements that can be made. Here is a video of me testing my piece:

As you can see, on the screen I was captured as a black silhouette as planned. However, the background wasn’t entirely clear as it picked up the edges of the board and screen. Therefore they came up as black blocks/lines and obstructed the shapes from falling. To fix this problem, I need to ensure that the screen I use is big enough in order to fill the width of the camera. As you can’t entirely see the screen, here is a screen recording of the test:

From this, I feel that I need to edit the speed again to make the shapes fall faster. I also think I need to edit the size of the shapes more so that there are some bigger ones rather than them all being small. The programming works as expected as when the shapes are on a white pixel the descend and when on black they ascend. By carrying out prior testing, it has allowed me to further improve my piece to make it more suitable and successful. I am pleased with the outcome and will make further amendments so it is ready to display on the public screens in Weymouth House.

Improvements – Mirroring Piece

An improvement I received when testing my piece was to mirror the video capture. It came to my awareness that at the moment it captures the video the wrong way round, so when users put up their right hand, on the screen their hand goes up on the left. This makes the interaction quite confusing which could deter people from interacting with my piece. I have found this improvement quite difficult to do and have had quite a bit of difficulty with the programming. Through reading online forums, I managed to gain some help from others who had similar problems. Here are the steps I went through and the various problems I encountered:

Screen Shot 2015-01-13 at 12.58.02To start with I managed to get my piece to mirror by adding this code:
Screen Shot 2015-01-12 at 12.23.50

This got the video capture to mirror but meant the brightness thresholding wouldn’t work correctly and so the video capture was in colour. This meant that obstructing the falling objects didn’t work as well as it was harder to detect the threshold on colours. Also, I felt that the black and white capture looked better as the coloured shapes stand out more.

As I was having difficulty, I decided to start my piece from scratch as originally I had used the brightness thresholding example. I felt that starting from scratch would help me to solve the problems easier as I would be writing out all the code step by step, in a way that I understood. I managed to resolve the problem by adding in videoMirror and a for loop to go through each of the video pixels. Then, instead of using the normal formula of x+y*width to access the array of pixels, I set it equal to [(width-(x+1))+y*width].

Screen Shot 2015-01-13 at 10.28.16

This flipped the video capture and the brightness thresholding still worked correctly. However, this caused the an error with the falling shapes. Now, when you put up your right hand to obstruct the shapes, it obstructs them up the left hand side. This meant I had to flip the shapes too, which I managed to do by changing the x co-ordinate of the shapes to (width-1-x).

Screen Shot 2015-01-13 at 13.04.08

Carrying out user testing with my family and friends was very useful and now my piece is mirrored correctly. This shows that I have followed an iterative design process as I created my piece, got feedback and then made improvements. I have learnt a lot more by carrying out this improvement, especially in relation to the advantages and disadvantages of hacking/programming. I feel that now I have programmed from scratch, my knowledge and understanding has advanced and I’m more confident with resolving any further problems I may encounter.  Next, I will go on to explore some other suggested improvements, such as adding more of each shape and altering speeds. Then, I will go on to test my piece in the studio room, capturing full body movement using a white screen.

Processing Forum, 2014. Mirroring a Webcam in a Sketch. Processing [online]. Available from: http://forum.processing.org/one/topic/mirroring-a-webcam-in-a-sketch.html [Accessed12 Jan].

Processing Forum, 2014. Flip the Video Capture on the X-axis.Processing [online]. Available from: http://forum.processing.org/one/topic/flip-the-video-capture-on-the-x-axis.html [Accessed11 Jan].