Irish Wrecks Online

A UI challenge redesigning an independent website listing shipwrecks off the Irish coast.



Irish Wrecks Online ( is a free online resource listing all the known shipwrecks that are lying on the seabed around the coast of Ireland. It is an amateur service that was created in 1997.

The brief was to redesign the home page so that it was responsive across 3 viewports (phone, tablet, desktop), had improved user friendliness and a modernised visual design.

My Role

This was a solo UI design project.

I followed an abridged Double Diamond process in order to discover and define the problems with the existing site, before developing and delivering a high fidelity final product.


The final design focused on a reimagination of an interactive map of the Irish coast, placing it at the centre of the website’s functionality. Based on the viewport in use I utilised different methods of interaction for the map, such as a carousel menu for a tablet and a drop-down menu for a phone. The visual design focused on connecting the website to the Irish coast whilst delivering the factual content required by the users in a professional manner.

I fulfilled the brief by delivering a comprehensive and responsive design that incorporated various design techniques. The design brought about a significant improvement in the content hierarchy, resulting in a simplified and more user friendly resource for scuba divers and Irish history enthusiasts alike.

You can view the extended version of the case study on Medium.
View on Medium



Whilst no user research was required for this project, I still wanted to be able to justify my design decisions and the assumptions I made about both the existing site and its users. To do this I conducted a site audit and some competitor research, looking for answers to the following questions:

  • Who is the site’s target audience?
  • What is the existing site’s brand personality?
  • What sets the site apart from its competition?
  • What do I think the site should become?

Site Audit

To establish the brand personality I carried out an audit of the existing site. I felt the site had clear issues with both its form and function:

  • Both the volume of information and lack of clear hierarchy make the page feel cluttered.
  • The tone of the site feels amateur, with the colour scheme feeling childish.
  • A key positive feature of the site is the passion for the topic and history of Ireland.
  1. The logo for the site looks like ClipArt.
  2. All of these features could be placed in a navigation bar to avoid the drawing focus away from the central feature: the interactive map.
  3. The current iteration of the map is not efficient for users. When users select a square on the map they are directed to a new page with an enlarged version of the selected square and a series of further drop down options. See below.

Competitor Analysis

I carried out competitive analysis on the 3 sites below, to try and understand what UI tools were utilised by rival companies, and how similar content was being presented to their users.

  • All of the sites featured an interactive map, with Irish Wrecks Online’s map being by far the least user friendly.
  • Irish Wrecks Online was the only site to include historical information about both Ireland and the shipwrecks listed.
  • All of the competitor sites were international in scope. Irish Wrecks Online is the only site I could find that is dedicated specifically to the Irish coast.


Who is the site’s target audience?

The target users of the site are scuba divers, with a secondary user being Irish history enthusiasts. For both of these audiences it is likely that their interest in the site connects to a hobby they are passionate about.

What is the existing site’s brand personality?

The use of bright colours and fonts makes the existing site feel amateur and childlike, but it contains both factual and educational content likely to be aimed at an older audience of enthusiasts. 

What sets the site apart from its competition?

The key difference between this site and its competitors was its dedication to the Irish coast and the inclusion of detailed history about the various wrecks. No other site was so focused on specifically Irish content.

What do I think the site should become?

With the above questions answered, I knew that I wanted to reimagine the site to be more professional in tone whilst capturing a sense of excitement or adventure that I associated with the target users passion for scuba diving and Irish history. I also wanted the site to feel connected to the Irish coastline, as I saw this as what made the site stand out from its competitors.


I then began converting these concepts into a visual language by creating a moodboard. By creating a large canvas of images associated with my ideas and the website’s subject matter, I hoped to be able to gain a better feel for the stylistic changes I wanted to make and refine my thoughts down into a style guide.

I then refined the selection and was able to produce a style guide utilising colours found in the curated images:

Low Fidelity

As I was tasked with creating a responsive website design, I started with mobile viewport first and worked up to the desktop design.

On each viewport I removed clutter from the homepage by implementing a new global navigation bar. This freed up space to introduce a new interactive map, which is the key  functional element that remains consistent across each viewport. I built it using a vector image file that separates Ireland into its constituent counties. 

What changes through each viewport is how the user can interact with the map. These differences exist because of how easy they would be for the user to control on each viewport.

Mid Fidelity

When transitioning into mid-fidelity, I decided to move the global navigation bar above the title of the site. This was done to separate the interactive map and display it more prominently.

Desktop View:

Tablet (left) and Phone (right) View:

At this stage I also designed a new logo for the site, which I wanted to reflect both its Irish identity and the subject matter of shipwrecks:


How I Met the Brief

My brief was to reimagine an outdated website with a responsive design across 3 viewports. 

I carried out a site audit along with competitive and comparative analysis so that I could form assumptions grounded in reality. I successfully fulfilled the brief by using a clear methodology to establish these assumptions:

I then delivered a comprehensive and responsive design that incorporated various design techniques. The design brought about a significant improvement in the content hierarchy, resulting in a simplified and more user friendly resource for scuba divers and Irish history enthusiasts alike.

Desktop View

Enables the user to click direct on to the interactive map and select their county of interest.

Tablet View

Users a carousel menu to allow the user to select their county of interest.

Phone View

Uses a dropdown list for the use to select their county of interest.


Provides an overview of each view type.

Next Steps

This was my first specific UI project, and there are several things that I would change if I was to start the project again.

  • Conduct user testing to identify any problems with the design
  • Find more video footage with which I could create iterations of the animated banner
  • Rework the spacing on the tablet version of the design to improve its usability
  • Find more ways to capture the sense of excitement/adventure associated with scuba diving at shipwrecks


Overall I really enjoyed this sprint, and particularly appreciated learning methods and techniques that helped me translate conceptual ideas in my head into a visual representation. My top three takeaways were:

  • Working without research is hard! This project really alerted me to the importance of research. It was really hard to justify your own design decisions with very few user insights.
  • I love visual design. I really enjoyed building upon this skill and love that this project allowed me dedicated time to think about design systems and how UI fits into UX.
  • Creating a brand is exciting. I could spend hours scrolling Pinterest and exploring colour combinations and typography to meet a certain demographic or mood.

Other Projects

Product Design Client Project
Prose & Poetry
e-Commerce Product Design Concept Project
Product Design Concept Project