Case Study

Was it nostalgia? My inner historian? My love of maps? I don’t know but when I saw the brief for this project I couldn’t stop smiling. Irishwrecksonline.net (IWO) is a 26 year old online resource for diving and shipwreck enthusiasts, which provides extensive wreck site diving information and the vessel history of over 10,000 wrecks around Ireland.

It is a beautiful artefact of internet history in itself, an incredible archive and resource. But let’s have some fun this week and give it a renovation.

The Brief

“Your challenge this week is to re-skin one or two pages of your choice of website from the list below…You can keep the functionalities, structure, and content identical, and only change the UI and branding.”

Audit

First step - I wanted to look a little deeper than aesthetics and evaluate the existing design’s usability. Using the Nielsen Norman Group’s Heuristic Evaluation tools as a guide, I could quickly identify some simple design changes that would improve the usability of the site - primarily focused on the navigation.  

• User control and freedom: No back buttons or breadcrumbing throughout the website. As you navigate to other pages on the site, there is no primary menu - users have to go back home to then navigate further. While the ‘home button’ (the ship graphic in the top corners) has inaccessible red text labelling it.

• Consistency and standards: Very unconventional menu on homepage, search bar all against conventionally positioning (vertical, centre of page). Use of ‘Press’ as each buttons’ the call to action instead of the actions they trigger. There’s multiple different typefaces inconsistently applied, in at least 4 different colours - including the use of a blue very similar to classic hyperlink colour.

• Aesthetic and minimalist design: Background patterns are very distracting. The focus could be more on the map, which while colourful is very dated and does not have strong signifiers that it’s interactive. 

The design was also clearly from a time of smaller monitor screens (and no mobile!) so is unresponsive, leaving a lot of extra, unbalanced whitespace at the margins when full screen while the main content is cramped. It’s a little tiring on the eye…

What problem was the site trying to solve?

Although this was primarily a UI design project, it was still important to make decisions based on research. With limited time, I used desk research to determine the user base and problem the site is there to solve.

Users

IWO provides detailed dive site information, written by an experienced diver. Site descriptions also offer detailed historical records on the vessels and invites users to send in additional info, photos they might have. From this I can assume those using the site would be primarily diving enthusiasts, secondly historians with an interest in naval history.

I was also able to speak to a divemaster to gather some additional insights on the kind of information they look for when planning a dive trip (experience levels, depth, nature and wildlife). Typically, they struggle to find reliable information online and will look to local dive groups to arrange trips. 

Competitors

I then wanted to look at some of the main competitors to identify what they were looking to solve and how they did it. I looked at three companies that listed dive sites, targeted at diving enthusiasts interested in wreck sites.

Wrecksite.com

+ Extensive information and global coverage of wreck sites
+ Includes weather, tidal information needed to plan a trip
- Paywalled, unlike IWO
- Very busy and difficult to navigate, dated and unresponsive site

dive.site

+ Modern UI, similar look and feel to Lonely Planet
+ Global coverage, user sourced information and tips
+ Includes weather, tidal info
- Log in to access full site
- Less focus on shipwrecks

shipwreckworld.com

+ Use of Google maps, clear and effective display of wreck sites
+ Global coverage
- Difficult to search and filter through the map
- A-Z of wrecks not easily browsable

The competition focused on global listing of dive sites with very little coverage of the Irish coastline. Both wrecksite.com and shipwreckworld.com have poor usability throughout the site, while the most modern - dive.site - is more targeted at holiday destinations.

I used this information to formulate a problem statement for IWO’s users. While designing I could use this statement to frame the problem the design will seek to address, keep the users in mind…before I get too distracted by maps!

Users need accessible, easy to digest geological and historical data on wreck sites for the Irish coastline so that they can browse for sites of interest, plan trips and share information with their fellow divers while promoting preservation and safe, sustainable trips around the Irish coast.

Creative brief

Before beginning the ideation phase, I summarised my desk research as a creative brief to clarify the goals of the design.

IWO is uniquely placed to position itself as a local expert on Irish diving, competitors just don’t have the same resources available. They can also promote the adventure of wreck diving where alternatives focus on diving in warm weather destinations. In that case, how can I develop a solution that is both informative and inspirational to divers who are maybe a little apprehensive of dipping their toe into the Irish sea?

Ideation

Following the UI audit and from a quick re-jigging of the existing site to more conventional UI patterns I could see a homepage take shape. This also helped me to first focus on the information architecture and start prioritising features for the homepage.

Sketching and Mid-fidelity

I would also follow a mobile first approach in my first sketches and wireframes to concentrate on the core features I felt the user needed from the homepage.

A method to search by location and filter by preferences

My first thoughts were about the map. For users planning a trip, searching by location is critical. I took inspiration from holiday booking sites, MetOffice and AirBnb, in the way a map view can be filtered to narrow down what you’re looking for. In an unfamiliar country, being able to see visually how close a site is to, say Dublin, is invaluable and saves the user time. But, they’re not always super easy to use on a small screen. An alternative method to searching and browsing the list of wreck sites would need to be offered too.

A way to get quick inspiration and ideas

Competitor research showed a good example of using community knowledge to recommend dive sites. From speaking to a keen scuba diver, local knowledge is key when visiting a new dive location. So I suggest adding a recommended dive option - perhaps linked to a month, as weather is an important factor!

Design Inspiration

So what did I want it to look like? This was, after all, a UI challenge, one we were encouraged to experiment with. I kept a mood board throughout the process to keep ideas flowing. (Did I mention I love maps?).

Visual design

From that very large mood board, I began narrowing down a visual theme. I wanted to tap into a sense of adventure and exploration. A combination of modern technology and what you might think of traditional naval navigation. Highly usable and practical, while still keeping that sense of fun. Something even casual users could come across and want to share to a wider audience.

High-fidelity

I was just about to fall asleep one night when I had a thought…A few weeks ago I’d shared this in a group chat: neal.fun/deep-sea/ a creative way of showing the depths of a variety of ocean animals. Well worth 5 minutes of your time. I wanted to mimic this slightly, to add a bit of frivolousness. A splash page for first time viewers to play with. Yes, it’s against almost every rule of usability but it could at least be…delightful.

Final prototype in desktop, tablet and mobile viewports.