back
UI/UX DESIGN, WEB DESIGN & DEVELOPMENT, GIS, DATABASE MANAGEMENT
Slavery Images

Role: Senior Web Designer

slaveryimages.org

Project Toolkit

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

Slavery Images is an educational resource, a visual record of the African Slave Trade and Slave Life in the Early African Diaspora.

In my role as Senior Web Designer, I:

  • Met with Henry Lovejoy, the project's director, to collect project requirements and client feedback
  • Gave feedback and design direction on the Figma prototype created by our web design intern
  • Oversaw the 2 Junior Developer interns who worked on the static pages of the site
  • Created the interactive map connected to the database
  • Designed and developed the site's Search Feature
  • Handled migration of the project's 1200+ OMEKA database to a MYSQL database used to manage the content on the website

Using Leaflet.js and JavaScript and PHP, I created an interactive map connected to the MySQL database. Using the coordinates related to the images in the database pins were plotted on the map using clustured markers.

My main design and development contribution to the project was the site's dynamic pages and Search features. I worked on the "Search Results" page which featured a paginated image grid of clickable pictures from the Slavery Images MYSQL database. I also created a simple search box, incorporated into the site's main navigation. This allowed a user to search using an image's project ID or a keyword that would search through titles and descriptions in the database.

I designed and developed the individual search result page which featured the clicked image and a listing of the image's metadata in a page that featured an embedded leaflet map indicating the real world coordinates related to the historical image.

I designed and worked on the advanced search which allows a user to create a more complex search criteria by combining actual columns from the database. The search form allows for the addition of up to 10 rows and works using a JavaScript Ajax request and PHP to query the database.