Automating manual processes, while providing an online hub for info about Port operations.

iDonate

UX DESIGN UI DESIGN

SERVICE DESIGN

Role:  Sole UX/UI Designer and Web Developer

Port of Galway UI Design

Background

The Port of Galway is situated at the centre of Galway City. It has a history dating back to the 10th century, serving the city and region. The Port Company set out to develop a new Port for Galway, allowing larger ships to moor alongside this new infrastructure and by doing so, remove the commercial shipping and its associated activities out of the existing “gated” harbour.

I was approached by the Harbour Master to design and develop a new website to replace the current website they had in operation, which had fallen far behind the standards set by 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 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.

I worked on the entire product design as the sole designer from conception to visualisation and development.

As the Port has expanded it’s operations into new areas, the website is undergoing a new UX redesign to reflect these changes. The scope is to include e-commerce for Parking services and as the planning for the Port Expansion goes into it’s final stages, to present this information to the public with clear transparency, while highlighting the benefits of the expansion plans and offering an online platform for input and feedback from the community.

Process

Research

Port of Galway Metric Analysis

Metric Analysis

Data from integrated site analytics were studied and analysed to gain an understanding of the user demographics, behaviours and flows through the existing website.

A particular focus was put on search engine analytics to understand the goals behind the users, when visiting the Port’s website. We wanted to understand better the main goals of the users and present the most optimised flow for these particular goals.

Using the tool Hotjar, I took a snapshot of screen recordings of user interactions and collected data from click and scroll heatmaps.

I used this data to better understand potential pain points around dropoffs, as well as gaining a better understanding of the demographics, behaviours, goals and context of the site’s users.

Competitive Benchmarking

I undertook a competitive benchmarking exercise to better understand the industry standard, potential user pain points, defined user mental models and opportunities to create a better user experience and use design as a competitive advantage over other Ports’ web presence.

I looked at Port websites in Ireland and Northern Ireland such as Waterford and Dun Laoghaire, to understand local conventions, but also studied Port sites further afield like the Port of Miami to seek inspiration for opportunities to surpass local competitors.

I looked at the overall user experience in detail for each competitor, but focused extensively on the positives, neutrals and pain points involved in:

  • $Homepage Layout and Content
  • $Information Architecture & Content Organisation
  • $Conventions in Presenting Shipping Data
  • $Ease of Comprehension of Marine Notices & Planning Info

    Usability Testing Sessions & Depth Interviews

    A series of usability tests are scheduled on a group of sample users with the goals of:

    • $Determining the main source of user pain points
    • $Identifying areas that cause confusion with users, especially around site architecture
    • $Understanding the ease of finding relevant information throughout the website
    • $ Evaluating the user experience of e-commerce throughout the site

    Stakeholder Interviews

    I conducted a series of interviews with various stakeholders across the varied operations of the Port, including the Harbour Master, Head of Finance, Operations and Administration. From these interviews, I gained a better understanding of the organisation requirements and the context behind many of the concepts and processes that would be involved.

    I learned about the current manual processes that are in operation and the detail behind the reasoning and legalities of each process in order to optimise and automate these processes as much as possible through the website design.

    Analysis & Design

    Pain Points & Opportunities

    KEY FINDINGS:

    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

    New Port of Galway Redevelopment Land Reclamation

    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

    New Port of Galway Redevelopment Land Reclamation

    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 Port 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.

    Document Disclosures

    New Port of Galway Redevelopment Land Reclamation

    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

    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.

    Prototype

    Clickable Protoypes

    As part of the new UX redesign of the existing Port website, clickable prototypes are planned to be created in order to create low-fidelity interactive prototypes of initial designs that can be tested with sample users to validate.

    Validate

    User Validation Testing

    As part of the new UX redesign of the existing Port website, user validation testing is planned to be carried out on a group of sample users to fit identified personnas. These usability tests will determine the success of the initial designs before moving on to high fidelity wireframing and development. Any findings at this stage will be brought back to the design stage to iterate and improve on the initial designs, where necessary.

    Design

    High-Fidelity Wireframes

    High-fidelity, fully annotated wireframes for each page were designed using Adobe Xd. Design deliverables included a full design system, interactive annotated wireframes with downloadable assets and style guides for future reference. I also developed the full website using the WordPress framework as a CMS with custom HTML, JavaScript, CSS and PHP.

    Port of Galway UI Design Galway
    Port of Galway Responsive Design
    Port of Galway Mobile Screens
    Port of Galway UX Design

    Conclusion

    Thoughts & Learnings

    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.

    Currently, due to the next stage of the Port Expansion, along with some new operational focus, we are in the middle stages of conducting a full UX redesign of the Port’s website in the hopes of a new website launching towards the end of 2021.

    Services

    UX/UI Design

    Web Development

    Graphic Design

    Film & Animation

    Let's start working on your project!