Case Study: DiveNI
Design & development of a new WordPress website showcasing dive sites around NI
Scroll image to view page
Overview
DiveNI is a new website showcasing dive sites around the coast of Northern Ireland, providing physical, environmental and historic information.
The website encourages input from the local & international divers, allowing them to add site information, images & contribute to the recording of marine species and their habitat.
Website Requirements
- logo/branding design
- a modern web design that looks great on mobile
- a fully editable website built in WordPress
- Interactive maps of all dive sites, clubs and centres
- Interactive maps of of dive site location with WMTS layer
- a search and filter index of all dive sites
- A comment and rating system for users to share site information
- A members area allowing users to save dive sites
- Events section & blog
- Training in all aspects of website management
Logo Design
I commissioned Keith Connolly, a branding specialist, to design a logo with a simple brief that it had to be flexible to work with light and dark full colour backgrounds as well as photographic backgrounds.
DiveNI logo by Keith Connolly
UX Design
The User Experience objective was to make it as easy as possible for users to find dive sites. This was achieved with the inclusion of an interactive map prominent on the home page and a search-able index of dive sites prominent on the navigation.
Layouts were planned with sketches and lo-fi wireframes to organise and prioritise content.
A user group was set up to test the website and provide feedback at the following stages: wireframe, hi-res interface design, HTML prototype, additional functionality and pre-launch.
Home page planning and rough sketch
UI Design
Wireframes converted to lo-res then hi-res layouts.
User Interface Design guidelines were created detailing logo usage, image dimensions, website colours, buttons, layout and typography. These guidelines were strictly adhered to, creating consistency and familiarity for the user.
One of the UI challenges was that some dive sites had lots of information and photos and some had less information and no photos. Therefore a layout had to designed to cater for both scenarios.
This was achieved by prioritising the overview content and map on the page, as this content was available for all dive sites.
Early layouts for home page and dive site page
Front-end Development
HTML/CSS
Clean, commented HTML was written then styled with CSS to create responsive webpages before being integrated into the CMS.
JavaScript
The open source JavaScript library leaflet.js was used to provide additional functionality to Open- StreetMaps including adding custom markers and a Raster Chart WMTS layer.
For the raster chart to display, a 3rd party API had to white-list the website server IP address.
JavaScript was also used for fade in animation, smooth scrolling and image slideshows.
Raster layer off
Raster layer on
WordPress Development
Using the basic Underscores theme, I built a custom, lightweight theme with multiple page templates.
Plugins were kept to a minimum, however some were essential for functionality:
- Advanced Custom Fields Pro
- Leaflet Maps Pro
- Search and Filter Pro
- Events Calendar
- Members area plugin
- Contact Forms
Advanced Custom Fields Pro
ACF can customise the admin area, allowing the admin user to create complex web pages, including image galleries.
Advanced Custom Fields
Leaflet Maps Pro
Leaflet Maps Pro is a customisable plugin based on the leaflet.js JavaScript library and was used for the main map.
The demo version featured an estate agents’ website, however the necessary functionality and could be customised to the requirements.
Main map with filters
Search & Filter Pro
A search & filter plugin was customised to match the categories available on the home page map.
JavaScript lazyload was used to only load images that appear in the browser window.
Search and Filter page
Events Section & Blog
An Events Calendar plugin was customised to create an events section with event listings and an interactive calendar.
Admin users could add, delete or schedule upcoming events.
A blog section was developed to publish news and other articles of interest to the diving community.
Events section
Members Area
A members area was developed allowing users to create their own page. Here they could edit their profile details, create categories and bookmark dive sites for future reference.
Members page
Contact Forms
The Contact Form plugin was used to create multiple forms, from the basic Comment Form to the more complex Submit a Site.
Users were encouraged to supply additional information to the website.
Additionally, there is a more detailed contact form where users can add dive site info or correct current inaccurate content.
Comment form
Training
Video screencasts were created to train DiveNI admin on how to update and edit all content on the website including how to:
- Add a new dive site
- Add a new map marker
- Add a new event
- Add new blog post
- Edit existing pages on website
Still from Add Dive Site video
Still from Add Map Marker video
Website Population
There were approximately 250 dive sites to add to the CMS.
The task was split between myself and DiveNI staff, which provided an opportunity to train staff in the CMS before launch.
Result
The website was launched in July 2020 and feedback has been positive from funders, partners and users.
Web users have grown to over 7,600 per year.
The diving community are continuing to contribute new content via the comments section and contact forms.
