Let's work together

Elisaari

Visual Identity

Systemic Web

SEO & Visibility

Ecosystem Logic

Elisaari is a historic natural harbor and nature reserve in the Finnish Archipelago with extensive marina and nature trail path with services like cafe, saunas, history, animals and camping area.

Check Solutions

Visual Identity

Systemic Web

Ecosystem Logic

SEO & Visibility

Iphone mockup featuring the sauna mobile screen on a sailing boat background.

A mockup of the sauna screen desktop version.

Year

2025

Industry

Maritime Tourism & Nature Preservation

Project

A Digital & Physical Transformation

Scope

Brand Strategy, UX/UI Architecture, Full Stack Framer Development.

Client Brief

Elisaari, a historic nature reserve and natural harbor in Finland, faced a fragmented guest experience. The objective was to build a unified digital and physical ecosystem that reflects the island’s premium heritage while streamlining the logistical complexity of managing a remote destination through a mobile first architectural approach.

Challenges

Operational Overload: The staff was overwhelmed by systematic information calls and emails regarding ferry schedules, harbor specs, and navigation, taking focus away from core operations.

Logistical Anxiety: Ambiguity regarding "how to arrive" and "how to leave" created a friction point that hindered booking conversions.

Environmental Context: The user personas are consist of mostly sailors on sun glared decks and hikers are on remote trails with limited connectivity and battery life.

Performance Constraints: The need for a highend visual experience that remains lightweight and functional in remote areas with low connectivity.

The typography used for the elisaari project, grouping a sans serif for a more user friendly and welcoming approach - Roca, and Montserrat for texts and other headers

User Personas

A comprehensive user persona table featuring the challenges and expectations of the sailor and the nature wonderer.

User Flow

Approach

Mobile First Self Service Architecture (Efficiency)

Understanding that a sailor isn't checking specs in a "sailboat office" but on a moving deck, I prioritized legibility and "one thumb" navigation.

Restructured the information hierarchy specifically for small screens. By designing intuitive, high contrast data blocks for ferry schedules.

Tactical Redundancy & Offline Reliability

I implemented "How to Arrive" as a persistent secondary CTA in every Hero section.

Since explorers are on trails with spotty signal, the downloadable map ensures they have a reliable navigational tool that doesn't rely on data or drain battery through constant GPS pinging.

Full Stack Framer Development

Utilizing Framer, I built a fully responsive, SEO optimized platform.

Beyond performance, I built the pricing and harbor specs using a custom CMS (Content Management System). This allows the Elisaari team to update seasonal rates and ferry changes in seconds without needing a designer or developer, ensuring the site remains an agile business asset.

A high fidelity mockup of the elisaari pages

A prototype of the website's home page, featuring a hero, island experience section, sauna section, nature section and a footer with a link to elisaari's instagram and contacts.

The main call to action buttons - download map; book online.

Two decorative sheep and cow from elisaari island.

The harbor specifications featuring the depth of the waters, electricity voltage, 98 spots, buoys and coordinates.

Results

1. Mitigating Operational Overload (The Information Filter)

The architecture was designed to act as a primary information filter. By prioritizing the most frequently asked questions, specifically ferry schedules and harbor specs, into high contrast, "one thumb" mobile blocks, the system is engineered to mitigate systematic user queries.

The Goal: To intercept the need for a phone call or email at the source, allowing the staff to maintain focus on core island operations.

Detailed informational board for Elisaari harbor, displaying the ferry schedule, rowing boat instructions, and a color-coded utility map for visitor navigation.

2. Mitigating Information Overload with Interactive Hierarchy

A major challenge for the Elisaari Marina was the sheer volume of technical data required by sailors (depth, electricity, waste, mooring types) versus the lifestyle data required by families (café, saunas, animals).

The Solution: The Interactive Switch Navigation
Instead of a long, overwhelming scroll of text, I engineered a custom Interactive Switch Navigation in Framer. This allows the user to toggle between all the island services and amenities provided within a single viewport.

A detailed interactive navigation switch section for the island services and amenities featuring café, saunas, showers and electricity, waste and septic management, barbecue roofs.

Desktop version of the harbor specification features

3. Mitigating Logistical Anxiety (Tactical Redundancy)

To solve the friction of "how to arrive," I implemented a strategy of Strategic Redundancy. By placing "How to Arrive" as a persistent secondary CTA and providing an Offline Ready PDF Map, the system provides a digital safety net.

The Goal: To ensure the user feels guided from their home to the harbor, even in areas with zero cellular connectivity, protecting the booking conversion from start to finish

A first-person view of a hand-held illustrated island map for Elisaari, showing hiking trails, sauna locations, and marina services in a playful, organic art style.

social media

Minimalist social media graphic for Elisaari featuring a warm sauna icon and anchor symbol with the headline "Calm Wind, Warm Sauna" in a premium serif typeface.

Scoreplay desktop web-app interface design, showcasing a bento-grid layout for predictive markets, AI-integrated stats, and community leaderboards.

User Flow

feature #3 - The "Amenities" Switch (Interactive UI)

A custom Framer built Interactive Switch Navigation for Harbor and Accommodation services.

The UX Value: This maximizes screen real estate while maintaining a high performance, app like feel. It proves that technical B2B data (harbor specs) can be presented as elegantly as premium lifestyle content.

feature #2 - Offline Ready Wayfinding (The Map)

An integrated Digital Map with a dedicated PDF download shortcut, recognizing that the "explorer's office" is a forest trail with spotty connectivity, I implemented a Tactical Redundancy strategy.

The UX Value: The downloadable PDF ensures the user is never stranded.

feature #1 - Arrivals & ferry

By transforming dense maritime data into a scannable, mobile first table, I addressed the client's biggest pain point: systematic info calls.

The UX Value: Designed for high glare environments (the sailboat deck), this interface ensures that essential travel data is readable with a single glance, reducing "logistical anxiety" and operational overhead.

User Personas

Other Projects

The Scoreplay project presentation header showing a collection of colorful, modular sports match tickets and the Web3 prediction platform title.

Solutions

Modern brands don't need random features, they need infrastructure. I’ve comparted my process into three architectural tiers designed to take you from a raw concept to a high authority market leader.