Case Study: WalkNI

UX Design

The primary UX goal was to simplify the process of discovering walking routes. This was achieved by prominently featuring the interactive map on the homepage and an easily accessible route index in the navigation.

Google Analytics data identified the most visited pages on the previous site, which informed the content hierarchy and navigation structure.

Wireframes were developed to organise content before creating high-resolution designs.

A user group was established to test the site throughout the design and development phases.

Home page / walk page wireframes

UI Design

WalkNI featured a rich library of stunning Northern Ireland landscape photography. Initially, the plan was to use these images in full-screen format across all pages. However, the images from the old site had a maximum width of 800px, so a two-column layout was selected for the walking route pages instead.

One challenge with the walk pages was excessive content, leading to long scrolls, particularly on mobile devices. To resolve this, content was organized into collapsible tabs, maintaining a clean desktop layout and improving the mobile experience.

WalkNI provided the logo and colour scheme, and UI design guidelines were created to establish consistency. These guidelines covered logo usage, image dimensions, colour palette, buttons, layout and typography, ensuring a cohesive and familiar user interface.

Walk page 2 column layout

Mobile views

Front End Development

HTML/CSS

Well-structured and commented HTML was written, then styled with CSS to create responsive pages, which were later integrated into the CMS.

JavaScript

JavaScript was used to enable content toggling within tabs and to create interactive image carousels.

Interactive Maps

The interactive maps were initially developed for WalkNI’s sister organisation, Outmore NI. To integrate them into the new website, the IP addresses of both the development and live servers were whitelisted. The maps were then embedded as iframes.

There were 2 types of maps:

The main map

Featured prominently on the homepage as a filtered navigation tool, requiring significant CSS modifications to align with the design guidelines.

Walk maps

Each walk featured a unique map with its specific trail, which was downloaded from Outmore NI.

Main map with filters

Walk map

WordPress Development

The basic Underscores theme was used to create the multiple page templates required for the site.

To meet the functionality needs, the following plugins were integrated:

• Advanced Custom Fields Pro
• Search and Filter Pro
• Event Calendar
• Contact Forms
• SEO Redirect

Advanced Custom Fields Pro

ACF was utilised to customise the admin interface, enabling admins to easily add and manage walk pages, events, news, and blog posts.

They could also change any image on the website, including the main home page image.

Advanced Custom Fields

Search & Filter Pro

An index of all walks with filters matching the main map was created. WordPress categories were mapped to the map’s filters, and the Search & Filter plugin was used to enhance interactivity.

To ensure fast loading, JavaScript lazy loading was implemented, displaying only the images visible in the browser.

Search & Filter page

Events Calendar

An Events section was added to promote upcoming events and allow user submissions.

A custom Events Calendar plugin was adapted to the design guidelines, enabling admins to manage event details and control scheduling.

A contact form was implemented to allow users to submit their own events.

Events section

User Generated Content

User generated content was a key feature, offering real-time insights into walk conditions and issues. Users were encouraged to leave reviews and rate walks.

Additionally, they could contribute by using the "Report a Problem" and "Suggest an Event" forms to provide updates and suggestions.

User comment and report a problem forms

SEO Re-directs

The previous website had strong search engine performance, so it was crucial to preserve those rankings.

However, the old URLs were not SEO-friendly (e.g. walkni.com/walks/344/slieve-donard-via-glen-river/). These URLs were restructured into more SEO-friendly formats (e.g., walkni.com/walks/slieve-donard-via-glen-river/).

A 301 Redirects plugin was then used to redirect the old URLs to the new ones, ensuring there was no loss in SEO performance and the site benefited from optimised URLs.

301 Redirects page

Website Migration

The site was originally built on an ASP.NET CMS, and the client needed to migrate to WordPress.

To ensure a smooth and accurate migration, the process was carried out manually. Each of the 500 walks involved transferring text content, images, PDF downloads, and maps, which were carefully extracted and re-uploaded to the new WordPress platform.

Training

Comprehensive training was provided to ensure the client could effectively manage the website after launch.

A "How to Guide" mini-site was created, featuring 18 step-by-step text instructions and video tutorials covering all aspects of website management.

How to mini-site

Result

Launched in October 2019, the website has received positive feedback from users, who actively contribute by rating walks and leaving comments.

WalkNI admins have been regularly updating the site with new walks, blog posts, and news, supporting a successful online marketing strategy that drives continued user engagement.