back
UI/UX DESIGN, WEB DESIGN & DEVELOPMENT, DATABASE MANAGEMENT, GIS
British Public Monuments Related to Slavery

Role: Senior Web Designer

britishmonumentsrelatedtoslavery.net

Project Toolkit

  • HTML
  • CSS
  • PHP
  • Bootstrap
  • JavaScript/jQuery
  • MySQL
  • Leaflet.JS

British Public Monuments Related to Slavery is a compilation of over 900 records of British representational public monuments related to British transatlantic slavery.

In my role as Senior Web Designer, I:

  • Met with the project director to collect project requirements
  • Designed the project website in Figma as an interactive high-fidelity prototype
  • Developed a responsive website using Bootstrap, HTML5, JavaScript, CSS, and PHP
  • Used Leaflet.js to create an interactive map
  • Imported and organized project data into MySQL tables from an Excel sheet of over 900 records
  • Maintained a MYSQL database used to manage the content on the website
  • Developed a searchable table with clickable rows and overlay windows, with advanced search features allowing users to query the database

After a client consultation for project requirements, I created an interactive Figma prototype.

Using Leaflet.js to create an interactive map, monuments are displayed on the map as circular markers. When clicked a marker shows a popup with some information on the monument.

The "view details" link opens an overlay window showing metadata related to the record when clicked.

The monuments' data is also viewable as a table. The table is scrollable and has a button to show and hide the different columns of the table. I met with the project director to understand better how their user's would query the data then I created a search filter that featured a form with a data range slider, checkboxes and radio buttons. This search filter is also available on the map page to filter the map's markers

Slave Registers
Reach Studio