This viewport is currently not available.
PLease view the website on a desktop device.

Read Full Case Study

move cursor

scroll
down

irishwrecks

Overview

Porject:

conceptual - Irishwrecks website

Date:

march 2022

my Role:

competitor research

User interview

uI design

prototype

presentation

Tools:

Figma

photoshop

Lottie

after effects

spline 3D

Team:

Xavier Chen

the task

Redesign the interface

Irishwrecksonline.net is a searchable database of shipwrecks on and off the whole of the Irish coast. This site provides casual and expert maritime researchers as well as wreck divers with the information pertaining to numerous shipwrecks. I was tasked to re-design the user interface of "the Irishwrecksonline.net"

after

before

The solution

Final solution for the re-design

I incorporated horizontal scroll to the re-design to increase the ease of navigation. The action buttons on the website are interactive, clearly indicating each state of action. Additionally, I chose a serif font, due to its association with print newspapers to evoke a sense of formality and credibility.

🔊 Don't miss out on the audio. Click to unmute to enhance your viewing experience.

logo design

The inspiration of the logo

The logo, inspired by the camera focus icon, captures the essence of a maritime expedition. It channels the sense of exploration and discovery through the lens of the camera, inviting history enthusiasts to come on a sensory voyage at sea.

DEsign system

Logo

Brand Logo

Logo design for http://www.irishwrecksonline.net

H

550px

W

550px

Font

75px, Times New Roman - Bold

Font

40px, Times New Roman - Regular, Italic

– Logo Structure

DEsign system

Typography

H1 Headline

bold

75px

H2 Headline

bold

48px

Body

Regular

16px

DEsign system

Buttons

View Button

Press to view information about shipwrecks.

H

144px

W

144px

Circular

3px, Round

Font

36px, Times New Roman - Regular

– Button Structure

– State: Default

– State: Hover

- Interactive Prototype: Hover on the button above to view the demonstration

Go Back Button

Press to go back to the previous page

H

144px

W

144px

Circular

3px, Round

– Go Back Button Structure

H

40px

W

45px

Colour

FAFAFA

– Go back icon

Cancel Button

Press to cancel the current page

H

85px

W

85px

Circular

3px, Round

– Cancel Button Structure

DEsign system

COLOURS

#E84C38
#F0F0F0
#262626
#fafafa
#f8d94a

Reveal each colour hex code on mouse hover.