MAYA OSAKA

University Final Year Project

London Parkive

Data Collection & Management/ Digital Product Design/ Web Development/ Data Visualisation

⚠️ This is my final year project which I am currently working on. I have included a link to the website but please note it is still under construction. ⚠️

The London Parkive is an archive of London’s parks and open spaces and takes the form of a website.

While there are plenty of other websites out there that share information on London’s parks there are a couple of things that make the Parkive special:

1. The Parkive shows the geographical evolution of parks and open spaces. This means showing if a park has been expanded or shrunk overtime or depicting parks that no longer exist anymore or are no longer publicly accessible.

2. The Parkive aims to highlight parks that are currently under threat from development. With a decrease in protection over parks and open spaces in the past few decades and council budget cuts and an ever increasing demand for development, some of London’s parks and open spaces are in a precarious position and the Parkive aims to shine a light on these parks.

London Parkive Landing Page. The default view mode is set to ‘Status’. This shows whether a park is still open to the public, no longer exists anymore or is currently under threat from development. *There are more parks than what is depicted in Southwark but the data hasn’t been added to the website yet.

The ‘Alterations’ view mode shows whether over time, a park has expanded, shrunk or stayed the same. *There are more parks than what is depicted in Southwark but the data hasn’t been added to the website yet.

The ‘Year Opened’ view mode shows what time period a park was opened in in 25 year increments since 1850. *There are more parks than what is depicted in Southwark but the data hasn’t been added to the website yet.

When a park is clicked on a popup appears with information on the parks. This information correlates with the various view modes. The ‘Tell Me More’ button will bring up an overlay with more information on the park. This is being developed now. This screenshot depicts a park whose boundaries have been expanded since it first opened.

When a park is clicked on a popup appears with information on the parks. This information correlates with the various view modes. The ‘Tell Me More’ button will bring up an overlay with more information on the park. This is being developed now. This screenshot depicts a park that no longer exists anymore.

When a park is clicked on a popup appears with information on the parks. This information correlates with the various view modes. The ‘Tell Me More’ button will bring up an overlay with more information on the park. This is being developed now. This screenshot depicts a park that is currently under threat from development.

An information overlay which pops up when the “Tell Me More” button on the pop up is clicked. This offers more detailed information on the park that has been clicked.

The London Parkive is my final year project at university but the origins for the project started two years ago during my first year final project…

London Parkive V1

Mock up of the original London Parkive I created during my first year of uni. The original London Parkive was an Adobe XD mock up of a website.

The London Parkive V1 was created during my first year final project over a six week period. The idea for the Parkive came about after I visited a park in Lewisham called Charlotte Turner Gardens which at the time was under threat from development. This lead to two questions:

How many parks in London are currently under threat from development?

How many parks are no longer with us and where were they located?

After scouring through the internet I found that there was no clear answer and no consolidated information that would make it easy to answer these questions and so the concept for the London Parkive was born.

Screenshot of the map I made for the original London Parkive. Rather than use an existing base map I decided to illustrate my own using Adobe Illustrator.

At the time I had just found out about prototyping software such as Figma and Adobe XD and was eager to give web prototyping a go. So the project took the form of an Adobe XD web prototype which you can view here! With it being my first time prototyping, I was still a long way off thinking about usability and core principles of UX design BUT I became pretty good at using Adobe XD.

Screenshot from the original London Parkive depicting information on a park that has been clicked on.

Screenshot from the original London Parkive depicting information on a park that no longer exists anymore.

Researching parks and open spaces also took up a large chunk of the project. Like the V2 of the London Parkive, the original project also focused on Southwark and the research involved visiting Southwark archives to find, in particular, old lists of parks and open spaces so I could spot any parks that don’t exist anymore. In this version I also included some examples of infill sites, which are sites, often green spaces found on housing estates that have new houses built on them. This has been controversial within Southwark because on the one hand new social housing is much needed but on the other hand building on these sites can adversely affect the quality of life of those already living there.

Aside from looking at parks and open spaces I was also interested in documenting some examples of infill sites. The yellow areas on the map depict infill sites. When they are clicked on the tab shows details of the site including how many new houses are being built and what stage the development is at.

When the “More Information” button is clicked an overlay pops up depicting comparisons between what the original site looked like and what it will look like after the new development is built.

London Parkive V2

For my final year of uni I have the opportunity to write my own brief and work on that for the whole year! So in November 2023 I embarked on the mission of furthering the London Parkive. The key goals for Parkive V2, in relation to V1 has been to:

  • Turn the idea of the London Parkive into an actual functioning website.
  • Do more comprehensive research and data collection on parks and open spaces.
  • Expand the search radius further to include more areas of London ( I have decided no to pursue this so I can spend more time refining the functionality of the website).

Researching London's Parks and Open Spaces

The research methods for collecting data have been improved a lot since Parkive V1! For Parkive V1 there were two main historic lists of parks that I used, one from the 1980s and one from 2000. For Parkive V2 I have been using five historical lists, ones from 1905, 1924, 1980, 1985 and 1999. This means a much broader scope for finding parks that no longer exist anymore. Especially when you factor in the parks that were made or destroyed as a result of WWII.

Photos of some of the lists I have been using to determine parks that no longer exist anymore. [From Left to Right: ‘The Municipal Parks, Gardens and Open Spaces of London’ (1905), London Parks and Open Spaces (1924), Recreation in Southwark (1980).

I have also been using National Library of Scotland’s (NLS) digitised old maps to work out where parks that no longer exist anymore were located and also to work out if a park has been expanded or shrunk over time.

Screenshot from National Library of Scotland’s website depicting a side by side comparison of Nursery Row Park. The map on the left is an old Ordnance Survey map dating from 1951 while the map on the right is a current map.

The NLS’s APIs (Application Programming Interface) has also made it easy to draw geoJSON (Geographical JavaScript Object Notation) so that these shapes can be easily added to the London Parkive website which has lead to the creation of a ‘Alterations’ view mode on the website that shows the evolution of the shapes and sizes of parks and open spaces within London.

This screenshot depicts Potters Field Park, which since it first opened has been expanded. The green area shows the original park area and the blue shows where the boundaries have been expanded to.

Data Collection and Management

The information of the parks and open spaces I have collected has been added and organised on a Notion Spreadsheet. Information includes the geographical coordinates of the park, when it was opened, if the parks shape has changed overtime, and a brief history of the park. This spreadsheet has been converted to CSV and then to JSON format to add the website.

Screenshot of the master spreadsheet of parks and open spaces on Notion.

I have designed a form on Figma that could help streamline this process by allowing an administrative user to add park information through a form which will store the data directly into JSON format so this is a feature that may be implemented in the future.

A form I have designed using Figma which could help streamline the process of adding park data. If this form was built it could be directly linked to a JSON file.

Design

The current aesthetic design of the Parkive will probably change. The screenshots below depict the basic wireframes that I designed in Figma which I am currently translating into HTML, CSS and JavaScript.

Screenshot of the basic wireframes I have made using Figma.

The aesthetics is currently purposefully limited to a black and white colour palette with thick borders to mimic the feeling of a sketch or plan. As someone who isn’t experienced in programming I have found it easier to keep the designs minimal while I build the functionality.

However several people have said that they like the blocky, minimal aesthetic of the page because it is clear and easy to use and read so I might stick to a similar aesthetic in the end.

Base Map

For the basemap of the Parkive I have chosen to use Stamen’s Toner Lite map. This is because the monochrome colour palette makes the data overlays pop and stand out more. As data visualization is a key element of this project I didn’t want the basemap to detract from the data being depicted.

Stamens Toner Lite map at three different zoom levels.

Font Choices and Colour Pallets

There is one font used on the whole website which is Open Sans, a Google Font. This font was chosen because it is clean and easy to read and with it being a Google Font makes it accessible and easy to implement. It is also aesthetically close to the Stamens base map used on the website which makes the overall aesthetic of the website feel more seamless.

The websites colour palette on Figma.

While the current colour palette is mostly monochrome a lot of thought was put into the colour palette of the map keys. Especially for the ‘Year Opened’ view mode. I considered assigning random colours to the 8 keys in this view mode or using different opacity levels of one colour. However, the former felt too random and the latter was difficult to distinguish on a map so instead I went for three different colours (pink, blue and yellow) to represent each century and a gradient of each colour for each 25 year period. The colours are easy enough to distinguish but have enough correlation that patterns can be picked out from the data.

Different colour pallets for the ‘Years Opened’ that I considered before settling for something similar to the left colour palette.

Development

As a fledgling developer this has been the most challenging and rewarding aspects of the project. Prior to this project my only proper development experience has been building this portfolio website. This project has taken me on an expedition through the lands of APIs, JavaScript Libraries, along the way I have learned about CSVs, JSON and geoJSON and how to program for GIS (Geographical Information Systems). I have really learned to appreciate the ‘open source’ nature of programming where you can rely on what others before you have made to make the process of building something easier. Just to put into context, at the start of the project I thought I would have to code most of the website using only vanilla javaScript but through using MapLibre a lot of the programming for the map interface has been simplified.

Examples of the dynamic popups.

This project has also been my first time using CSVs, JSON and geoJSON and it has really blown my mind how simple it is to store large quantities of data and call upon specific elements. I had no idea how any of this worked before embarking on this project. In particular, the ability to create dynamic elements such as popups whose information appears different depending on the value of the various parks properties.

There is still a long way to go before the website is complete. Some features I have yet to develop including a functioning search bar and list view that shows the park information in table form with toggles.

I am excited to learn more to achieve these elements and to see how the website turns out!