Case Study: WalkNI

UX Design

The UX objective was to make it as easy as possible for users to find walking routes. This was achieved by displaying the interactive map prominently on the home page, and an index of all walking routes prominent in the navigation.

Google Analytical data was used to determine the most popular pages on the old website which informed the hierarchal structure of content and navigation.

Wireframes were created to organise content before hi-res versions were designed.

A user group was formed to test the website during the design and development stages.

UI Design

WalkNI had a large library of fantastic photography of NI scenery and the origin idea was to use them full screen on all pages. However, the imported images from the walk pages on the old site had a maximum width of 800px, so a 2 column layout was chosen for the walk pages instead.

One issue with the walk pages was that some pages had a lot of content so there would be a lot of scrolling on these pages, especially on mobile. The solution was to show & hide content using tabs. This made the layout consistent on desktop and a better experience on mobile.

WalkNI provided the logo and colour scheme. UI 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.

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

JavaScript was used to show/hide content in tabs and was used to create the image carousels.

Interactive Maps

The maps to be added to the website were originally developed for WalkNI’s sister organisation Outmore NI. In order to display them on the new website the IP addresses of the development and live servers had to be whitelisted. The maps were then embed- ded as iframes.

There were 2 types of maps:

The main map

This was to be displayed prominently on the homepage and acted as a filtered navigation. It had to be heavily modified with CSS to match the website design guidelines.

Walk maps

Each walk had a unique map with a walk trail which had to be downloaded from OutmoreNI.

Advanced Custom Fields Pro

ACF was used to customise the admin area allowing the admin user to create new walk pages, events, news and blog posts.

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

Search & Filter Pro

An index showing all walks with identical filters to the main map was required. For this I matched the WordPress categories to the map and used a Search & Filter plugin to add interactivity.

As approximately 500 walks are displayed on this page, I used JavaScript lazyload to load only the images that appear in the browser window.

Events Calendar

An Events Section was required to promote upcoming events and allow users to submit their own event.

An Events calendar plugin was customised to match the website design guidelines. The functionality allowed admin users to add/remove events and schedule when the event could appear.

A detailed contact form allowed user to upload their own event.

User Generated Content

User content was important as it provides up-to-date information on any issues with a walk.

Users were encouraged to review walks and provide a rating. They could also provide content by using the Report a Problem and Suggest an Event form.

SEO Re-directs

The old website performed well in search engines and it was important to maintain those high ratings for all pages.

However the page urls from the old site were SEO unfriendly e.g. walkni.com/walks/344/slieve- donard-via-glen-river/ so I recreated the pages as SEO friendly: walkni.com/walks/slieve-donard-via-glen-river/.

I then used a 301 Redirects plugin to point to the new url resulting in no loss to SEO and new, SEO friendly urls.

Training

Training was required in all aspects of managing the website post launch.

I created a “How to Guide” mini-site consisting of 18 step-by-step text instructions and video guides on how to update all aspects of the website.

Website Population

The website was originally built on an asp.net CMS and the client required migration to a WordPress CMS.

The only way to guarantee a clean migration was to do it manually – for each of the 500 walks there was text content, photographs, pdf downloads and a map to download and then upload to the new website.