UX design / Web development 

Port of Galway

UX DESIGN

The Port of Galway needed to refresh their out-of-date website and create a web presence in line with their industry.

The website needed to also inform the public of the details of the proposed Port Expansion, while selling the benefits in a clear and easy-to-comprehend manner.

The UX redesign involved automating and optimising Port processes by creating a “Port Access” digital hub for physical visitors to the Port, like contractors, surveyors and shipping arrivals.

Categories

UX Design
Web Development

PROJECT OVERVIEW

The Port of Galway approached me to design and develop a new website to replace the current website that they had in operation, which had fallen far behind the rest of the industry.

The Port wanted to have a strong web presence, with a focus on delivering information about the day-to-day operations of the Port to the public in a clear, easy-to-comprehend manner.

I was tasked with conducting a full UX design and development of a new web platform that would showcase the Port to the public, give clear details of the proposed Port expansion plans in an understandable layout and sell the benefits of these plans to the public.

The Port was also targeting Cruise liners, so required showcasing both the Port as a viable docking for Cruise liners, and also Galway as a desirable destination for their passengers.

From interviews with different stakeholders within the Port, I identified processes that could be optimised, digitised and automated for increased efficiency.

GATHERING BUSINESS REQUIREMENTS
AND DESIGNING SOLUTIONS

VISUAL DESIGN:

Identified Requirement:

The Port of Galway had been using an outdated website, that had been discarded of updates for several years. They wanted a fresh, modern visual design to attract users to want to stay on their site and browse for the information they seek easily.

Designed Solution:

The website was given a clean, modern layout with it’s new visual design. Information was laid out using the full real estate of the browser window, utilising responsive design. The content was displayed in a clear manner with use of white space, large images and video. The content was split with visually interesting elements, like parallax imagery.

PORT DAY-TO-DAY OPERATIONS:

Identified Requirement:

The public are very interested in the day-to-day operations of the Port. The Harbour Master was receiving emails from people with queries about what was happening at the Port. Social Media was where updates about the day-to-day operations were being found, but the website did not factor into this in any way.

The Port wanted to use the website as a digital platform to inform the public on the day-to-day operations of the Port – everything from news updates to Shipping Schedules.

Designed Solution:

From interviews with the Harbour Master, it seemed that a lot of the queries that came in were from the public asking what a particular ship was, what it carried, etc.

I designed a “Shipping Schedule” page. The Admin Team at the Port can upload a spreadsheet once a week that will automatically display the Shipping Schedule, broken into Arrivals and Departures on the website. It will also extract the Shipping Schedule for this particular day and display on the homepage.

I also designed a “Cruise Ship Schedule” page for the public to be able to identify the cruise ship that they see in the bay, with information about size, passengers, crew, etc.

The rest of the updates could be found instinctively in the “Latest News” section.

PORT EXPANSION PLANS:

Identified Requirement:

The Port of Galway is an historic port, dating back to the 10th Century. Over the years, the Port has become limited in it’s operation because of the restrictions of the size of the harbour. The Port has put forward plans for a Port expansion that will help the Port overcome these limitations, grow and expand.

The public plays a large part in the success of these plans, so keeping the public informed about the plans, showing full transparency and showcasing the benefits of the Port Expansion plans in an easy to comprehend manner was a key element required in the website redesign.

Designed Solution:

I gained a full understanding of the plans for the expansion, the stages involved and the benefits it will provide to the City of Galway.

To display this information in a clear, concise and easy-to-comprehend manner, I designed a layout that splits the information into different sections, using 3D rendered videos and animated gifs to aid the sometime technical text conent and help give the general public a clear understanding of the plans.

User feedback was taken along the way to ensure that the design was displaying the information in a clear, understandable manner.

CRUISE SHIPS:

Identified Requirement:

The Port has attracted many large cruise ships over the last few years. The success of the cruise ship dockings in Galway Bay has led to great boosts to tourism revenue for Galway City and County.

The Port wanted to use the website as a means to showcase the P0rt as a viable dock for Cruise Ships, while highlighting Galway as a desirable destination for it’s passengers.

Designed Solution:

To properly acheive the goals of the Port, I needed to understand the users better. In this case I identified two distinct user stories around the cruise section (see below). The cruise liner operators who were determining if the Port of Galway would be operationally feasible for their larger cruise ships and footfall. And the cruise marketers and passengers themselves who want to understand if Galway is a viable destination for their liner to stop at.

Using this understanding, I designed a “Cruise” section of the website, split into four sections:

The Cruise Ship Schedule shows the interested operators that there are, have been and will be large cruise liners using the Port of Galway, giving them confidence to pursue the Port as an option.

The Cruise Ship Information section shows the operators some of the technical factors of docking in Galway, highlighting and alieviating any concerns they might have.

 

The “Discover Galway” section showcases Galway, why it is a viable tourist destination. This section is tied in with a Cruise Ship information printed brochure I also designed for the Port to bring to trade shows.

Finally, there is a “Walking Tour of Galway” section, which involves an interactive illustrated map of Galway, which I also designed for the Port, bringing the user on a virtual walking tour of Galway City.

PARKING:

Identified Requirement:

The Port operates 4 different public, private and contract parking areas. They wanted to use the website to advertise their parking services, act as a brochure for pricing and possibly automate some of the processes involved in the renewals of contract car park spaces.

Designed Solution:

An initial design for a “Parking” section listed the different parking options and pricing for each car park.

User feedback was that people were unfamiliar with the differentiation between the car parks and were confused about the differences and locations.

The solution was to redesign the page as an interactive map, with photographs of each car park and pricing and details listed for each. The user can easily understand which car park is which, the pricing and details and click a button to get directions to that particular car park.

DOCUMENT DISCLOSURES:

Identified Requirement:

Certain public and financial documents need to be legally available to members of the public to view. The Port wanted to use the website as a hub where the public could access these documents easily.

Designed Solution:

A “Documents” section was designed for the website. The Port Admin team can upload new documents at the click of a single button, which will display the document embedded on the website for the user to access and read easily.

MARINE NOTICES:

Identified Requirement:

The Port have a pre-defined list of email addresses that they manually send out Marine Notices to. Marine Notices are urgent updates to relevant seafarers who may be affected by weather or operations in the bay.

The Port wanted to automate this process greatly, so that Marine Notices were available immediately on the website and would automatically send out to all email addresses on their list.

Designed Solution:

Much of the UX design for the Port involved more back-end design, than front-end. I designed an interface where the Admin Team can upload a Marine Notice at the click of a single button.

It will publish the Marine Notice as an embedded PDF on the website and automatically send an email notification to everyone on the Port’s Marine Notice email list.

TIDE TIMES:

Identified Requirement:

The Port Office sells books of Tide Times to the public for a small cost to cover printing charges and a very small profit.

They wanted to have this information available to the public easily, but did not want to disclose the full year of Tide Times, so that sales of the Tide Times booklet would not be affected.

Designed Solution:

I designed a Tide Times page that dynamically shows the tide times for the upcoming 7 days only. This way, the average user can view the tide times, but the user who requires a full year of tide times will still need to purchase the booklet. A link is present to purchase the booklet.

Displaying the information in an understandable and visually interesting way invovled a lot of work on the layout of responsive tables for mobile displays. I designed an animation of waves for the page header to bring something visually interesting to the page.

PORT ACCESS:

Identified Requirement:

There are thousands of visitors to the Port each year. From contracters to surveyors to public relations to education to shipping arrivals, all of these visitors need to undergo specific Health & Safety training before setting foot on the Port.

The Port wanted to create a Port Access section of the website where these visitors could access and undergo virtual training before they arrive at the Port, saving much time and creating a far more efficient system for the many visitors.

Designed Solution:

From interviews with the Harbour Master, it became clear that there was an opportunity to automate and digitise much of the manual processes in place for the arrival of contractors and visitors to the Port.

All visitors are required to undergo Health & Safety training before they can enter the Port. I designed a virtual training portal on the website where visitors can go through the training, pass a short exam and receive a pass, allowing them entry to the Port.

Also, there are some plans that could be made available to approved parties via the website. This was acheived by a simple form that needs approval by the Harbour Master before allowing access to the protected section containing the plans.

The process for ships arriving at the Port is to fill out a physical form that needs to be collected by the Port before allowing entry. By digitising this as an online form, ships now have the option of filling this out and submitting electronically before arriving, or they can fill it out on a tablet in the Port office if done on arrival.

USER STORIES, SCENARIOS & FLOWS

User stories were developed from the initial understanding of the different user groups and sample user journeys were identified.

Some examples of users stories developed for the Port of Galway:

 

RECEPTION

The Port of Galway were very happy with their digital solution, how their internal processes were optimised and ran more efficiently and how engagement with the website increased exponentially. The website has become a hub for information about the Port as well as a platform for digitising and automating tasks.

TESTIMONIAL

Alan was the preferred web designer for a complete overhaul of the Port’s web site. Alan is one of those rare people that can get inside your head as ideas flow and his creative genius allows for great content and imagery online.

I am very happy with the Port’s website, it’s interactive content, it’s constant updating of feeds from Facebook and Twitter. The website, Facebook, Twitter and all our branding are mirrored so there is a cohesive message across all platforms.

Alan has always met deadlines for me, usually when I require images at short notice. Ten out of ten!

Captain Brian Sheridan

Harbour Master, Port of Galway

Let’s Work Together
Say Hello!