Irish Wrecks Online (www.irishwrecksonline.net) 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.
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.
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:
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:
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.
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.
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.
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.
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:
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.
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:
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.
Enables the user to click direct on to the interactive map and select their county of interest.
Users a carousel menu to allow the user to select their county of interest.
Uses a dropdown list for the use to select their county of interest.
Provides an overview of each view type.
This was my first specific UI project, and there are several things that I would change if I was to start the project again.
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:
