Case Study: DiveNI
Scroll image to view page
Overview
DiveNI is a platform dedicated to Northern Ireland’s coastal dive sites, offering detailed insights into each location’s physical, environmental and historical aspects.
The site encourages contributions from local and international divers, enabling them to share site details, upload images and assist in documenting marine species and habitats.
Website Requirements
- Custom logo and branding
- Modern, mobile-optimized web design
- Fully editable WordPress build
- Interactive maps of dive sites, clubs and centres with WMTS layer integration
- Searchable, filterable dive site index
- User comment and rating system for sharing site insights
- A comment and rating system for users to share site information
- Member area for saving favourite dive sites
- Events section & blog
- Comprehensive training in CMS
Logo Design
I engaged a branding specialist to create a versatile logo that adapts to light, dark, full-colour, and photographic backgrounds.
DiveNI logo variations
UX Design
The primary UX goal was to streamline dive site discovery. This was accomplished through a prominent interactive map on the homepage and a searchable of all dive sites.
Layouts were carefully organised and prioritised using sketches and low-fidelity wireframes.
A user group was established to test the website and provide feedback at key stages: wireframe, high-resolution 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.
Comprehensive UI guidelines were developed, covering logo application, image dimensions, colour schemes, buttons, layout, and typography. Strict adherence to these guidelines ensured a consistent user experience.
Early layouts for home page and dive site page
Front End Development
HTML/CSS
Structured, well-commented HTML was crafted and styled with CSS to build responsive webpages, which were then integrated into the CMS.
JavaScript
The open-source library Leaflet.js enhanced OpenStreetMaps functionality, enabling custom markers and a Raster Chart WMTS layer.
To display the raster chart, the website server IP was white-listed through a third-party API.
JavaScript also powered fade-in animations, smooth scrolling, and image slideshows.
Oceanwise layer off
Oceanwise layer on
WordPress Development
Starting with the Underscores theme, I built a custom, lightweight WordPress theme with multiple page templates. Essential plugins were carefully selected to maintain streamlined functionality:
- Advanced Custom Fields Pro
- Leaflet Maps Pro
- Search and Filter Pro
- Events Calendar
- Members area plugin
- Contact Forms
Advanced Custom Fields Pro
Customized the admin area, enabling the creation of complex pages, including image galleries.
Advanced Custom Fields
Leaflet Maps Pro
This Leaflet.js based plugin was tailored for the main interactive map, adapting a real estate demo to meet project-specific requirements.
DiveNI main map
Search & Filter Pro
A search and filter plugin was adapted to match categories shown on the homepage map, with JavaScript lazy loading implemented to optimise image loading within the browser view.
DiveNI main map
Events Section & Blog
A custom Events Calendar plugin provided an interactive calendar and event listings, allowing admins to add, delete, or schedule events.
A blog section was developed to publish news and articles relevant to the diving community.
Event page
Blog post
Members Area
Created a members area where users could edit profile details, categorise and bookmark dive sites for future reference.
DiveNI members page
Contact Forms
A contact form plugin enabled various forms, from a basic comment form to a detailed "Submit a Site" form, allowing users to contribute dive site information or update existing content.
DiveNI comment section
Training
Video screencasts were produced to guide DiveNI administrators on managing and updating website content, covering tasks such as:
- Adding new dive sites
- Placing new map markers
- Posting events
- Creating blog entries
- Editing existing website pages
Still from Add Dive Site video
Still from Add Map Marker video
Result
The website was launched in July 2020 and feedback has been positive from funders, partners and users.
Annual web traffic has surpassed 7,600 visitors, with the diving community actively contributing new content through comments and contact forms.
