Production Lab Series: Critical evaulation

The end of an era..

The purpose of this project was to be able to successfully execute the planning, creation and publication of an interactive embeddable search box, which used HTML, CSS and JavaScript, within a news article that is being hosted on WordPress. Along with this document, I have submitted a live article in which the code I have used has been placed within it.

Throughout the creation of this artifact, a series of blog posts were created on Medium (Appendix A) to both review and apply context of the lecture to the development of my idea and to chart my week-by-week progress. The final product is viewable on both Codepen (Appendix F) with the article available to view on Birmingham Eastside (Appendix G).

This project was, as is described in my project initiation form, picked for two reasons. Firstly, as the media has shown, this type of skill is in demand and actively being used in the industry with the likes of the BBC Football calculator (Appendix B) utalising a searchable box within an article. Secondly, through my communication with Matt Burgess for my Multimedia and Data Journalism module, I learnt that within my field there is a need for an article showing how councils had responded to the FOI act.

Currently, the article is on Birmingham Eastside. However, I’m still working with Matt Burgess to put the article onto FOI directory, which will also expand the impact by showing my skills on a leading FOI website.

The second reason why this project was picked was that as Amanda Farnsworth (Head, BBC Visual unit) said in my interview with her, “Well, I think that the audience increasingly wants to find out things themselves.” (Sorrentino, 2016) By completing this project, I will be able to execute this in a practical environment and as a result, connect directly with my audience.

Whilst there was no direct partner for this project, I did work closely with the editor of FOI.Directory. This partnership not only ensured a professional context for the project, but also ensured that the database would be the priority in the project, not the content. Looking back, I do believe that the content did start to become a more and more important and overarching factor in the project, which in the end drew away time from other key elements.

Did the outcomes of the project take place?

· Create a searchable database — using code — that people are able to use to type in their local authority to find out how many FOI responses they have had in the last 5-years.

· Yes — The database works. Whilst it may not be as good looking as one would hope for, it works none-the-less. This success has a great importance in the professional context of the project as it shows to publishers that I am able to create code which can be used to make informative and interactive data visuals.

· Produce an original article which looks at how many FOI requests local councils across the UK have received and responded to between 2011 and the end of 2016.

· Yes — The article is of a professional standard. Furthermore, the searchable database is streamlined into the article and does not feel forced or faked. In addition, hosting on GitHub means that there is no ‘Codepen’ watermarks on the table ensuring professional context to the project.

· Be able to embed the code seamlessly into a WordPress article on Birmingham Eastside and make it flow into an article that works on both mobile, desktop and tablet.

· Yes — As mentioned above the code is successfully embedded into an article. Whilst it works on both desktop and mobile devices, the content can be hard to read for example on my Galaxy S7 or Surface Pro. Ideally in the future, it would be good to ensure the code is not PX based in size but instead % based so that it is more viewer friendly on smaller devices.

· Create a code that is bug free and works as intended.

· Sort of — Whilst the code worked, there were several issues throughout the development which slowed the process of the project. Whilst these were fixed, it showcased a desire to understand a deeper understanding of both HTML, CSS and JS.

By far the biggest challenge was the creation of a searchable database. Despite having an understanding of both HTML and CSS, this proved to be a challenge with the initial creation being met with difficulty and technical issues. A subsequent meeting with Jon Hickman led me to a very detailed tutorial (Appendix C) online which subsequently became the building blocks for the main searchable database. As a result, the main design of my database was based on a forked design from the Scotch.IO tutorial, this meant that critically, whilst the design and the code were my own, it was all based on a pre-existing design and lacked any originality.

Another challenge that I faced was the embedding of the graph once completed into a WordPress article. This was a key objective (Goal 3) that I set out to explore and as identified, one of the key risks associated with the project. In the end, thanks to a tutorial from Paul via GitHub this was successful. However, I feel that this could have been explored more with some experimentation, if I had the time, by trying to embed via a number of WordPress plugins that were suggested to me via discussion forums on the internet.

At the same time, there was also a lot of things that did go right with the project. For instance, from a practical point of view, bar the lack of data for some councils, the search engine did work. Yes, I believe it could certainly look better but the bare-bone basics of the database worked and users are able, successfully, to search for their local authority and to see how many FOI requests that they have responded to.

There were several times throughout the project that I encountered technical issues ranging from missing code, CSS sheets not working on the embedded version and importing issues. These issues were time consuming when I had to firstly find the problem, learn about what the issue at hand was, attempt to solve it through tutorials, online research and trial and error. The result both mentally exhausted me, especially when the issues came later down in the development of the project, nearer to the deadline and made me often think that I had taken the approach of running before walking. Reflecting, it would have been better to make the database before gathering the content so that I could iron out and issues beforehand.

From the academic point of view, my dissertation last year shows that my project meets the criteria of what the BBC, a major national publisher would be looking for. When I spoke to Amanda Farnsworth, head of the BBC visual data journalism unit, she told me that you can make an interactive data visual successful, by BBC terms if, “You take a difficult subject and make it completely personally relevant to them and that involves sometimes entering a little bit of personal information but then getting a result that is unique to you.” (Sorrentino, 2016)

Looking back at my project, it’s clear that I have achieved this. For a non-data journalist, the FOI act can be confusing to understand and even more so understanding why it’s important but with the use of the table in conjunction with an article, I’ve been able to take a difficult subject and allow the user to make it personally relevant to them by inserting a tiny bit of personal information, in this case their local authority.

One issue that I ignored in my project initiation form, which I should not of have, was the concept of ethical concerns in relation to the creation of this database. Yes, on the one hand no user’s data was tracked via either tracking software, cookies or analytics so you could argue that the idea of ethics did not play as an important key role in my labs project, but it should have been looked at more closely non-the-less.

Looking back, it’s clear that there are three main rooms for improvement. Firstly, I need to focus on a less large dataset. Instead of focusing on a national FOI, I should have focused on a more local one, say local authorities in the West Midlands. Whilst I understand that the choice of data was selected due to the network contact with Matt Burgess, I fully understand now that with it being my first time creating this type of data visualisation, I should have focused on a smaller data set allowing me more time to concentrate on the development of the artefact itself, not the content within it.

Secondly, I really needed to have a better understanding of CSS. As a result of the tutorial that I was following, I used an imported CSS sheet, provided by Scotch. Whilst I don’t have an issue with this as the tutorial benefited me greatly, it would have been, from my experience at least, better to have developed a more unique style of product.

Lastly, as research for this project showed, I would have liked to developed the idea into a more user-friendly, deeper thinking interactive model. In my research I noted two BBC examples, one where a user could calculate how the new budget would impact them (Appendix D) and secondly, where they could calculate how much they spend on drinking (Appendix E). Whilst, I think this would have been too much for me to undertake in the time period when coupled with my skill level, this would have been a much more worthwhile project as it takes the ideas I’ve learnt over the past several weeks but expands them to make the project bigger and better.

Looking back, there are several areas that I feel I could improve on in the future which would increase the impact of the project as a result of learning from the failures of this one.

1) Find a more practical partner who can task me the creation of a dataset from their own data. This would free me up from having to focus on the content and more on the creation of the dataset itself.

2) Use my contacts at the BBC and Trinity Mirror to find out how they create their searchable databases. This would allow me to create a final product with more real-world value.

3) Focus more on the incorporation of API’s and social buttons into the database. As such, allowing users to share their results on social media.

In the end I can say that this project was a success. Yes, it had problems such as a lackluster design and even oversight in the size of the dataset that I had used, but in the end all four goals were archived, the product was bug free and it worked. It’s also clear, looking back, that whilst the project may not have been a brand new concept in the journalism industry, it was for me and by the end of the project I feel that I have learnt new skills that make me both more employable and improve my standing in the professional context as a data journalist.

As a result of this project being a success I’ve been able to use it to set several pathways for the future. Firstly, when creating a table for my production project (which I will be doing) I’ll have had the experience this time to create a much more detailed database with my knowledge being cemented this time around. Secondly, I’ve begun to experiment and see the impact of visual data journalism on community based media, this research will be fundamental in my PhD studies that I undertake from September this year. Thirdly, I’ve created a solid contact in the form of Matt Burgess which will help to grow my contacts within the industry.

However, the network that I have built goes far beyond simply Matt Burgess at FOI.Directory. Since the creation of the searchable table several local publishers, including the Northampton Chronicle and Echo (my hometown paper) have contacted me wanting to use the interactive chart to produce the same article on a local scale for them.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —


Sorrentino, A. (2016). How does the 18 to 24-year-old age group respond to interactive visual data journalism produced by the British Broadcasting Corporation (BBC) for BBC News online?. BA Hons, Media and Communication. Birmingham City University.

Schultz, T. (2006). Interactive Options in Online Journalism: A Content Analysis of 100 U.S.

Newspapers. Journal of Computer-Mediated Communication, [online] 5(1), pp.0–0. Available at: [Accessed 3 Apr. 2017].


Appendix A:

Appendix B:

Appendix C:

Appendix D:

Appendix E:

Appendix F:

Appendix G: