Irish Wrecks Online is a charity website locating ship wrecks to be dived around Ireland.
Role: Solo UI Project
Timeline: 1 week sprint March 2022
Type: Website, Tablet & Mobile
Tools: Figma, Zoom, Slack
The Problem
Redesign an existing charity website across three viewports: Desktop, Tablet and Mobile.
The Solution
A consistent colour theme, interactive map focal point, and information on the charity itself including a clear donation button.
THE PROCESS
UX Skills
Discover: Competitive & Comparative Analysis, User Surveys & Interviews, Affinity Map
Define: User Persona, User Journey
Develop: User Flow, Wireframing, Sketching, Prototyping, User Testing
Deliver: Mid & Hi-Fidelity Prototype, Presentation (20 mins)
The Brief
So the task was to redesign this existing charity website across 3 viewports: Website, Tablet and Mobile. The content had to remain the same, which was a blessing, as god only knows how long the information architecture would take for over 7,000 shipwreck sites all located around the coasts of Ireland.
But seriously if you’re looking to go diving for shipwrecks around Ireland, this is the site for you, despite it’s questionable UI.
Overview
This was visual design week and we were challenged to redesign an existing charity website from a selection given to us by General Assembly.
The website that really stood out to me was a site called Irish Wrecks Online. Maybe it was the catchy name? Maybe it was because I knew nothing about shipwrecks? I’m sure what really stood out to me was just how poor the site looked visually. There was so much freedom available to me here! And I really love a challenge.
Research
Irish Wrecks Online - The Brand
First I would take a look at the original site and see what, if anything, I could keep and take on in my redesign.
Nothing.
Other than the name which simply rolls off the tongue, there was nothing much to go on, so I assumed it would be ok to bin everything and start from scratch … Assuming there was no sentimental value to anything. Perhaps the logo that presumably the owner’s 5 year old drew? Regardless it was going in the bin.
Here’s what I faced:
An uninspiring homepage with little information.
No donate button anywhere to be seen.
Click on a wreck by county and you’re met with a long list of smaller areas.
Click again and a list of hundreds and hundreds of shipwrecks is your reward!
Each wreck has a lot of info, some useful, some not.
It hurt my eyes, and I hadn’t even got their colour scheme yet.
… But I suppose if all else fails, I think they’ve got pretty strong grounds for a lawsuit against Liverpool football club.
Competitor Analysis
I wanted to get an idea of what other charities were doing, however Irish Wrecks Online didn’t really have the feel of a “regular” charity site. At first glance you’d be hard pressed to find any information to inform you this actually is a charity.
So at first I looked at other sites that give information on locations of various places of interests and became somewhat of an expert on locations of golf courses, castles and shipwrecks.
Key Takeaways
Beautiful, large “hero” images really grab your attention.
Colour palette of contrasting deep blues and creams work really well together.
Nice large font with minimal body text on homepages makes the site seem much easier to navigate.
“Gaelic” style font is instantly recognisable as having an Irish influence along with the colour palette of various greens.
Avoid making an interactive map too confusing with tiny clickable points.
Keep primary navigation simple with no more than 6 options.
In-Direct Charities
I needed to look at what charities were doing as after all this is a charity website. So I found a few charity homepages that I already knew and some that caught my eye and looked for inspiration.
Key Takeaways
Clear and striking highlighted donation box button.
Very simple colour palette not distracting to the eye.
Large “hero” image.
Primary navigation is simple and clear.
High level of accessibility.
Footer with all the technical and legal information is bold yet unobtrusive.
Moodboard
I found this stage of the design process the most interesting as you can start to understand why certain brand identities and logos may be designed and coloured the way they are. It’s not just luck, someone’s thought about it!
It’s very liberating, if you can justify your decisions for typography and colour palette then no one can argue with you. So I started building my case.
The Dilemma
Once again I found myself at a crossroads. I had gathered an abundance of relevant images then colour picked from these to try and find my own identity for Irish Wrecks Online.
It had come down to Blue versus Green. The clash of the titans. The deep blues of the vast oceans versus the dark greens of the Emerald Isle. A decision had to be made. I asked myself what would be more relevant to a diving site that may one day expand beyond the realms of Ireland? Blue it was.
Sketching
After moodboarding and finally settling for a theme, it was time to sketch. I took inspiration from competitors' top navigation and the “less is more” idea, and got started.
The only aspect of the original website that I wanted to keep for my redesign was the interactive map of Ireland. It is a fun feature and would help me to simplify the website without completely losing everything!
Finally, as this challenge was to rebuild for three viewports, I would start with the mobile version first then “build up” as we were taught that it’s easier to scale up and not so easy to scale down!
Mid-Fidelity
My mid-fidelity iterations were built using Figma and I learned a valuable lesson about the importance of spacing throughout the different viewports.
This would have been much easier had I just started from low-fi and worked my way up! But no, I had to be different and try and start it from mid-fi which made iterating extremely difficult and time consuming. Another valuable lesson.
I was using the layout grid for my designs for the first time which helped me keep my spacing the same AND make sure that I had sufficient margins on all the viewports. This technique, once learned, proved very useful and was something that made its way on to all future Figma work.
Style Guide
This was an important deliverable and something that proved very useful when mocking up the high-fidelity prototype.
The typography was something that I played with in the moodboarding stage of this process, however it was time to make a choice. This was an informative charity site so it needed to be extra legible and not make you want to click away immediately! So for the body and subheading I used Lexend Bold and Light with sizes ranging from 36 down to 14.
The logo text was a different story. I wanted to keep some semblance of Ireland in it so I searched Google fonts for the most Gaelic font I could, and lo and behold, IrishUncialfabeta-Bold was my reward. Contrasting with Lexend it works nicely and only ever appears next to the logo as it would be impossible to read body text like this!
High Fidelity
Ultimately with the prototype I wanted to keep it simple yet fun with just the key information that might be required. The original site was so busy it made me want to click away immediately.
I also wanted to keep the interactive map of Ireland the focal point so as not to confuse their existing 12 users.
Mobile Viewport
The interactive map of Ireland is the focal point here. The locations become highlighted in the ‘Volt’ colour once pressed and then take you further into that location.
There’s a clear, large donate button at the top again in the ‘Volt’ colour to really grab your attention and guilt you into making a donation.
I’ve included a clear hamburger menu to stop endless scrolling for information.
There’s also a sticky Icon bar at the bottom of page, which is a little unusual for a mobile sized viewport but it really helps clean up the look, and the icons are pretty simple to follow. The inspiration behind this is the Airbnb mobile website.
A large ‘Legal Information’ footer was essential to keep and as it’s at the end of the scroll it can again be large and legible.
Tablet Viewport
This is my favourite viewport size despite not owning a tablet.
The size allows for more information to be seen but I, again, wanted to keep the Interactive map the focal point. This time when a location is clicked, a card appears with an example of a shipwreck from that location with an explore option becoming available.
A quote always “classes up” the joint, especially something by Voltaire, so this was added as the word “Shipwreck” was in it.
A primary navigation bar appears with three clear headings. Under ‘Wrecks’ you can further search by name or by county.
There’s now more room for a detailed ‘about us’ section with links to various scuba clubs around Britain.
Desktop Viewport
The largest viewport size allowed for a full top navigation bar with six options.
I could finally use my large hero image as the interactive map isn’t the focal point anymore.
A ‘Top 10 Wrecks of Ireland’ was included to inspire new divers and really capture the attention of just the shipwreck enthusiasts who couldn’t care less about diving, they’re out there, believe me!
The discover page still has an interactive map, this time showing how the cards would look for each Wreck.
An even larger ‘about us’ section, explaining why we need your donations, if this doesn’t get the donations pouring in, I don’t know what will!
Next Steps
As this was only a one week sprint, five days to you and me, the first thing I’d do is actually test this prototype on users. The golden rule of any UX Designer is to iterate but this all too short sprint didn’t allow for any. So I’d try to find the most enthusiastic divers I could and get their thoughts.
I’d then add the next few screens across the different viewports, however this could take an age as, like I’ve said before, there’s over 7,000 of these wrecks, and I’m only one man!
I think I’d lose the bottom navigation from the mobile viewport. It seems a little unnecessary as I look at it now, typing these very words. I suppose I could just delete it on Figma, but how else could I fill up these “next steps?”
Conclusion & Key Learnings
This project actually taught me quite a lot about myself and made me believe there was more to my abilities than just research and presenting! I thoroughly enjoyed moodboarding and justifying my colour palette and typography choices.
The importance of low-fidelity wireframing. This was a process that I’d already followed through my previous projects but I learned the hard way that without them it can take an age to make a decision. Confession time. I tried to go straight from sketching to mid-fidelity but kept hitting a wall creatively. So the lesson here kids: each step of the process is there for a reason and skip them at your peril.