Project description

Imagine if time was reversed from the day you were born – giving you the chance to witness events that happened before your birth. This interactive works like a time machine to let you travel to the past, and see how old you would be at major world events if time worked backwards. For example, if you were born in 1987, you would have been 17 years old when Neil Armstrong became the first man to walk on the moon. As well as major historical events like the moon landing, users can explore everything from politics and sport to film and literature.

What makes this project innovative?

This interactive gadget is an innovative way to explore major events of the past, giving readers a tangible idea of how long ago they happened. For example, for many people alive today, World War Two feels like the distant past. However, for someone born in 1980, they would have been just 35 years old at the end of the war if time was flowing in reverse. With events going back as far as the 1800’s, this interactive can help users of all ages realise how close and relevant these historical happenings really were.

What was the impact of your project? How did you measure it?

The interactive was published across six separate news sites, which all operate under the Reach group. The project had a high readership from each site, and a positive response from users - it was shared widely across social media and prompted discussion in the comments.

Source and methodology

When beginning a new project our team follows seven key stages, which helps produce fast but polished results: - 1. Planning At the start of any new project, I (the interactive designer) collaborate with a journalist and programmer to come up with ideas and decide how we want to visualise the data. This usually involves bouncing ideas off each other in terms of what data we want to use, the story we’re trying to tell, and what we want the finished product to look like. 2. Design After we’ve finished the planning stage of our project, we move onto the design stage. This starts with me creating initial sketch-ups of the interactive, helping to produce a base layer for testing ideas. These are rough ideas, and can be good or bad - but even the bad sketches are a vital part of the design process. Once the original sketch is created I move onto deciding which adobe design software will be best suited for this project, which helps to increase my productivity and design capabilities. When finished, I go to our manager for approval before moving onto the next stage. 3. Data Every project we create involves hard data to back up our stories. Gathering data is an important stage in our project life-cycle. Usually we gather data from official government sites or other trust-worthy sources. However, for this project our whole team contributed in creating the data sheet, producing large amounts of hand-typed data, crossing nine categories and spanning 150 years. Once the data was created, we double checked this to ensure all the events were correct and had the right date. 4. Programming Once the design and data have been completed the project is moved onto the programming stage. This is where one of our programmers will take the key resources and create the interactive widget that is used to display the data on our websites. 5. Testing When the programmer has finished the first iteration of the interactive, he then publishes the widget on one of our live test-sites where our team will test and review the interactive before release. At this stage we likely edit the interactive several times - both in terms of design and functionality - to remove any potential faults and to ensure we’re delivering a polished end-product. 6. Bulletin Once the development cycle is complete, one of our journalists writes a story based around the interactive. This will explain how it works, and aims to grab the reader’s attention and lead them to using the interactive. 7. Release Once the story and interactive are complete, we publish our project - which will potentially be released on many news sites across the UK. In this case, it was released across six different titles.

Technologies Used

I use Photoshop CC for the layout of this widget, which made it easier both for me to adjust the images on the software and for coders to grab the resources. For the illustrations, such as the icons for the categories, I used Illustrator CC. Visual Code is an IDE (Integrated development environment) - essentially a text program that helps our software developers write in their preferred programming language using highlighted syntax and intellisense. In this case the chosen programming languages were - HTML & CSS- When designing a web-based interactive it is vital to use HTML & CSS to portray the design perfectly. Javascript & Jquery- Once the design is created for desktop and mobile using HTML & CSS we move onto using Javascript and Jquery to help integrate the data into the project, handle button events, and spice-up the interactive using animations and transitions. PHP- PHP is a general-purpose programming language originally designed for web development. This language helps connect users directly to our servers, which is where we store our data and images for security and ease-of-use reasons. We used Google Sheets to put all our data together for this project. The reason we used Google Sheets was because of their version controls and shareability. This meant we could easily manage the data even when it’s being used by four to five people at the same time. Another key reason is because it is a nice and easy-to-use program when it comes to converting the spreadsheet data into a JSON file, which was used to help integrate the data into our interactive.

Project members

Cullen Willis, Claire Miller, David Ottewell



Click Follow to keep up with the evolution of this project:
you will receive a notification anytime the project leader updates the project page.