Irish Wrecks Online

UI Concept Project | Solo | September 2023

Overview

Context

This one week concept project focused solely on User Interface Design. As such I was asked to design from assumptions that I could make about the product and its target audience, rather than carry out in-depth user research.

The Brief

The brief was to redesign an obscure and outdated website — www.irishwrecksonline.net. This website is a free online resource listing all the known shipwrecks that are lying on the seabed around the coast of Ireland.

The Deliverables

A UI redesign of the site that was responsive across 3 viewports (phone, tablet, desktop).

My Role

This was a solo challenge focused solely on User Interface Design.

I utilised a mobile first design philosophy and a truncated double diamond process, through which I was able to significantly reduce the volume of unnecessary information on the homepage and incorporate a reworked interactive map of Ireland with unique functionality across each viewport.

The Outcome

The final design focused on connecting the website to the Irish coast whilst delivering the factual content required by the users in a professional manner. It included:

• An interactive map of the Irish coast, utilising different methods of interaction suitable for each viewport.
• UI techniques such as common fates, contrasting colours/text sizes to create hierarchy, and proximity to distinguish and relate content.
• A new company logo to align with the new design.

Discover

Whilst no user research was required for this project, I still needed to conduct a site audit and some competitor research in order to answer the following questions:

What is the existing site’s brand personality, and what should it be?
Who is the site’s target audience?
What sets the site apart from its competition?

I wanted to answer these questions before I began designing in order to avoid producing a final product that only solved problems with the site based on my own assumptions.

Site Audit

To establish the brand personality I carried out an audit of the existing site.

My initial thoughts when carrying out the audit were:

• There is poor content hierarchy making it difficult to distinguish important information. There is a lot of information on the site that clutters the homepage and obscures the key features.
• The use of colours makes the tone of the site feels amateur and/or childish.
• A key positive feature of the site is the passion for the topic and history of Ireland.

Here is the existing homepage:

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.

Competitive 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 was the only site dedicated to the Irish coast.

Comparative Analysis

As this was a UI centred project, the comparative analysis was focused on identifying how different British and Irish Outdoors and Nature brands visually represent themselves online.

Animated homepage of Surfing England

• All of the sites featured a similar colour scheme, using black and white as their base colours and shades of grey and green in their imagery.
• Surfing England and Finisterre both used videos of British/Irish landscape in prominent locations. These short, looped clips were effective in conveying a sense of energy and connecting the brands’ online presence to their physical location.

Research Insights

What is the existing site’s brand personality, and what should it be?

The existing site feels amateur and childlike/playful in tone, but it is also factual and educational. My assumption was that its target audience are unlikely to be children, so I wanted the site to feel more professional, adult and adventurous.

Who is the site’s target audience?

The target users of the site are scuba divers, with a secondary user being Irish history enthusiasts.

What sets the site apart from its competition?

The dedication to the Irish coast and the inclusion of detailed history about the various wrecks.

Moodboard & Style Guide

With these questions answered, I began trying to convert these concepts into a visual language by creating a moodboard. I first created a large collage of images that I liked and covered a variety of associated subject matters.

Subject matter included: images of Ireland, old boats, shipwrecks and diving gear.

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

Develop

My moodboard continued to evolve throughout the week as I had new ideas or thought of new ways to express the brand, however with the initial concept in place I was able to move on to low-fi designs.

Low-Fi

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.

Mid-Fi

When transitioning into mid-fidelity I began by making the first iteration of the interactive map, which you can see below. I built it using the vector image file below. This map separates Ireland into its constituent counties.

To separate the interactive map and display it more prominently I made 2 key iterations at the mid fidelity stage:

1. I moved the global navigation bar above the title of the site.
2. I removed the “About Author” section. Whilst I had initially considered it a nice element to preserve from the existing site which had been a passion project for the creator, it served no functional purpose and I felt would distract then user from their primary goal.

I knew that the 3 different screen sizes would pose different problems when controlling the interactive map, and so my idea was that the mechanism to manipulate the map would change through each viewport. After some trial and error I decided that:

• The desktop viewport should be controlled by directly clicking on the the county desired.
• The tablet viewport should be controlled by a carousel list of the counties above the map.
• The phone viewport should be controlled by a dropdown list of the counties beside the map

Here is my mid-fi design for each viewport:

Desktop

Tablet (left) and Phone (right)

Deliver

High-Fi

The key iterations I made between mid and high fidelity included:

• The introduction of an animated banner below the global nav bar which was inspired by the animated content on the comparator sites Surfing England and Finisterre.
• The change of the footer so that it looked like the Giant’s Causeway, a famous landmark in Northern Ireland.
• The creation of a new logo for the site. I wanted the logo to reflect both the Irish identity of the site and the subject matter of shipwrecks:

Here is the final high fidelity iteration in desktop view:

Final Prototype

After 7 days of hard work, my work culminated in 3 high-fidelity viewports which can either be view in the Youtube video below, or access via the following links: Desktop, Tablet, Phone.

Conclusion

Next Steps

If I was to continue the project I would like to:

• 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

Key Learnings

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.