A wreck's page on the Scopri il Relitto platform
← All projects

Case study · UX/UI design

Scopri il Relitto

How do you bring to light what the sea has kept?

Project
Scopri il Relitto, a platform to explore shipwrecks along the Italian coast
Context
School case study · Trento
What I did
UX/UIPersonasSite mapWireframeAtomic design

01 · The challenge

A sunken heritage.

Scopri il Relitto (Discover the Wreck) comes from the wish to bring to light what the sea has kept for centuries, turning curiosity into an exploration experience open to everyone.

With an interactive map you sail along the Italian coast, find the wrecks and discover their history through images, 3D renders and informative content. For enthusiasts, divers and the curious.

02 · Goals and people

Who are we exploring for?

Before designing, I set the project's goals and defined two user profiles, built around their needs, aspirations and difficulties.

Short term

PromotionMake it easy to discover guided trips to visit the wrecks.
EducationOffer clear information on the historical, cultural and technical aspects.
EngagementPhotos, videos, stories and interactive content about the wrecks.
AwarenessRaise awareness of Mediterranean wrecks and their value.

Long term

Research and studyPartnerships with universities and research institutes.
Sustainable tourismResponsible dives that respect the marine environment.
An engaged communityLocal communities and operators helping to enhance the wrecks.
PreservationProtecting wrecks as maritime heritage.

03 · The structure

From the site map to the first sketches.

The site map organizes wrecks, trips and the map into a few clear sections. Then the low-fidelity wireframes: just blocks, to decide where everything goes before the colors.

04 · The design

An interface that immerses you.

Atomic design

Sea colors, buttons with a paper boat, wreck cards and menus: small pieces that repeat across every page.

Deep blue
Rock grey

The wreck page

History, depth, difficulty and photos: everything you need to know before diving in.

High-fidelity wireframe: the wreck page

The trips

Available trips filtered by level, and a card for each one with date, spots and price.

High-fidelity wireframe: available tripsHigh-fidelity wireframe: a trip's details card

On your phone too

The same pages designed for the small screen, to check even on the boat.

Mobile version: wreck pageMobile version: tripsMobile version: trip card

05 · The result

Exploring the underwater world, made simple.

A platform that combines outreach and usability: intuitive for the curious, useful for divers, complete for teachers.