Produkt-Fallstudie / Maritim · SaaS-Ökosystem
SupaSailing & SupaMaritime
Eine maritime Welt. Ein Arbeitsbereich für jede Rolle.
Vom Maschinenraum einer Yacht über das Marinabüro bis zur Hafenagentur: eine Familie digitaler Produkte, die komplexe Abläufe verständlicher macht, mit zwei eigenständigen Marken und einer gemeinsamen Logik für den Arbeitsalltag.
- Unser Beitrag
- UX-Strategie, Produktdesign und Webentwicklung
- Projektschwerpunkt
- Markenarchitektur · Rollenbasierte Navigation · Operative Oberflächen · Responsive Websites
01 / Die Herausforderung
Die Verbindungen hinter jeder Reise gestalten
Maritime Arbeit findet selten nur am Schreibtisch statt. Kapitäne, Techniker, Marinateams, Charterunternehmen und Hafenagenten betrachten dasselbe Schiff aus unterschiedlichen Perspektiven. Das Projekt übersetzt diese Komplexität in eine verständliche Produktfamilie: SupaSailing bedient die Freizeitschifffahrt mit Fleet, Charter, Marina, Broker, Shipyard und Guild; SupaMaritime richtet sich mit Agent, Ferry, Merchant und Guild sowie einem separaten Fährticket-Angebot an den gewerblichen Bereich. Die Website erklärt diese Struktur, bevor Besucher ein Produkt wählen. Im Ökosystem selbst geht es darum, Prioritäten und den nächsten Handlungsschritt für jede Rolle sichtbar zu machen.
Die größte Herausforderung liegt in den unterschiedlichen Arbeitskontexten. Ein Marinamanager denkt in Liegeplätzen und Ankünften, ein Techniker in Anlagen und Wartung, ein Agent in Hafenanläufen und Dokumenten. Ein allgemeines Dashboard würde diese Unterschiede verdecken. Zugleich brauchen die Produkte vertraute Muster für Status, Datensätze, Berechtigungen und Bestätigungen. Die öffentliche Navigation muss Freizeit- und Handelsschifffahrt verständlich trennen.
Die Entscheidungen hinter dem Erlebnis
Von der Rolle zum passenden Modul
Rollenseiten übersetzen den Katalog in konkrete Arbeitssituationen: leitender Ingenieur, Marinamanager, Charterbetreiber oder Werftinhaber. Jede Seite verbindet eine vertraute Aufgabe mit dem passenden Modul. Produktnamen bleiben sichtbar; der Einstieg orientiert sich jedoch an der Frage, was jemand verwalten muss.
Zwei erkennbare Marken, eine gemeinsame Familie
SupaSailing und SupaMaritime sprechen unterschiedliche Märkte an. Ihre Websites unterscheiden daher klar zwischen Yachting und gewerblicher Schifffahrt. Gemeinsame Navigationsmuster, Modulfarben und vergleichbare Seitenstrukturen schaffen Kontinuität. Markenübergreifende Links benennen das Ziel ausdrücklich.
Operativen Status vor Verwaltung stellen
Fleet stellt Wartung, Mängel, Lagerbestand und auslaufende Dokumente heraus; Marina organisiert Arbeit über Liegeplatzkarte, Ankünfte, Anfragen und Verträge; Agent konzentriert sich auf Hafenanläufe und Aufgaben. Tabellen, Statusangaben und kontextbezogene Aktionen machen den Arbeitsgegenstand auffindbar. Details erhalten einen eigenen Datensatz, damit die Übersicht klar bleibt.
Arbeit abseits des Schreibtischs berücksichtigen
Zum Arbeitsablauf gehören auch Steg und Maschinenraum. Fleet unterstützt operative Meldungen über Telegram; der Zählerablesungsprozess von Marina verbindet Fotos, OCR, Liegeplatzauswahl und Bestätigung. Die Aufgabe soll im jeweiligen Arbeitskanal vollständig ausführbar sein: Daten erfassen, Interpretation prüfen und vor dem Speichern bestätigen.
Datensätze verbinden und Produktgrenzen verständlich halten
Die gemeinsame Architektur definiert ein zentrales Schiffsregister und explizite Anbindungen an Fleet, Charter, Broker, Marina und Shipyard. Jede Anwendung behält ihre operativen Aufgaben. UX-Konsistenz bedeutet hier erkennbare Objekte und nachvollziehbare Übergaben, mit klar benannten Integrationsgrenzen.
02 / Menschen & Recherche
Bedürfnisse als Ausgangspunkt
Illustrative Proto-Personas aus den Rollen und Abläufen des Produkts. Sie beschreiben Designhypothesen, keine Interviewteilnehmenden.
Die Marinakoordinatorin
Betrieb · Marina
- Bedürfnis
- Einen passenden Liegeplatz zuweisen, Ankünfte vorbereiten und Kunden-, Vertrags- und Rechnungsdaten zusammenhalten.
- Hürde
- Anfragen kommen über verschiedene Kanäle, während ein Liegeplatz je nach Datum einen anderen Status hat.
- Designantwort
- Datumsbezogene Liegeplatzkarte, Anfrageeingang und Kundendatensatz mit kontextbezogenen Aktionen.
Der leitende Ingenieur
Technischer Betrieb · Fleet
- Bedürfnis
- Fällige Arbeiten erkennen, den Anlagendatensatz finden und die Wartung mit korrekten Angaben abschließen.
- Hürde
- Informationen verteilen sich auf Anlagen, Mängel, Handbücher und Ersatzteile und werden oft unterwegs benötigt.
- Designantwort
- Anlagenbezogener Datensatz, sichtbarer Wartungsstatus und Telegram-Meldungen mit Bestätigung.
Der Hafenagent
Gewerblicher Betrieb · Agent
- Bedürfnis
- Einen Hafenanlauf koordinieren und erkennen, welche Aufgabe, Dienstleistung oder welches Dokument als Nächstes wichtig ist.
- Hürde
- Mehrere Anläufe laufen parallel, mit Übergaben zwischen Betrieb, Dokumentation und Finanzabteilung.
- Designantwort
- Ein Arbeitsbereich je Hafenanlauf mit klaren Statusangaben, zugehörigen Dokumenten und nächstem Handlungsschritt.
Forschungsfragen & Validierung
Dieser Forschungsrahmen ist eine redaktionelle Rekonstruktion auf Basis der Produkt-Repositories und Rollenseiten. Proto-Personas und beispielhafte Journey formulieren Gestaltungshypothesen. Die Interviewfragen und Nutzungsszenarien bilden einen vorgeschlagenen Validierungsplan, keine Ergebnisse dokumentierter Interviews oder abgeschlossener Nutzertests.
Eine redaktionelle Rekonstruktion der Designüberlegungen. Interviewfragen und Usability-Szenarien dienen als Validierungsleitfaden; sie werden nicht als durchgeführte Feldforschung oder gemessene Ergebnisse dargestellt.
Interviewleitfaden
- Hypothese: Ein rollenbasierter Einstieg erleichtert die Modulwahl. Interviewfrage: „Was wollten Sie organisieren, als Sie zuletzt nach maritimer Software gesucht haben?“
- Hypothese: Ein Status ist nur im Kontext hilfreich. Interviewfrage: „Welche Informationen brauchen Sie, bevor Sie einen Liegeplatz oder eine Wartungsaufgabe zuweisen?“
- Hypothese: Übergaben führen zu doppelten Eingaben. Interviewfrage: „Zeigen Sie uns, wie Informationen von einer Nachricht in eine Tabelle und zur nächsten Person gelangen.“
- Hypothese: Mobile Erfassung braucht einen ausdrücklichen Prüfschritt. Interviewfrage: „Was können Sie bei der Erfassung am Steg oder an Bord sofort prüfen, und was muss warten?“
Szenarien für Usability-Tests
- Vorgeschlagene Aufgabe: Marke und Modul anhand einer Rolle wählen; Weg, Zögern und Begründung erfassen.
- Vorgeschlagene Aufgabe: Liegeplatz für ein Beispielschiff und einen Zeitraum finden; Verständnis von Datum, Maßen, Verfügbarkeit und Konflikten prüfen.
- Vorgeschlagene Aufgabe: OCR-Zählerwert in Telegram prüfen, eine unklare Liegeplatzzuordnung korrigieren und bestätigen; Fehlerbehebung und Sicherheit vor dem Speichern beobachten.
- Vorgeschlagene Aufgabe: Überfällige Wartung und Anlagendatensatz finden; prüfen, ob Dringlichkeit, Zuständigkeit und nächste Aktion ohne Hilfe verständlich sind.
- Prüfplan: Wesentliche Abläufe auf kleinem Bildschirm und per Tastatur wiederholen, einschließlich leerer Zustände, Berechtigungsgrenzen, Ladeabbrüchen und fehlgeschlagenem Speichern. Aufgabenerfolg und Fehler erfassen, ohne Ausgangswerte oder Ergebnisse zu erfinden.
03 / Customer Journey
Customer Journey
Eine repräsentative Journey aus den Produktabläufen, die Bedürfnisse mit konkreten Interface-Entscheidungen verbindet.
| Phase | Nutzerhandlung | Hürde | Designantwort |
|---|---|---|---|
| 01 · Den passenden Einstieg finden | Eine Fachkraft erreicht die Website über ihre Rolle oder einen betrieblichen Bedarf. | Ein großer Katalog erschwert die Unterscheidung ähnlicher Module. | Rollenseiten erklären die Arbeitssituation und führen zur passenden Marke und zum Modul. |
| 02 · Die Lage überblicken | Die Koordinatorin prüft Datum, erwartete Ankünfte und freie Liegeplätze. | Eine Übersicht ohne Datumsbezug kann eine Verfügbarkeit zeigen, die nicht zum Aufenthalt passt. | Datum, Liegeplatzstatus und eingehende Anfragen gemeinsam sichtbar halten. |
| 03 · Im richtigen Datensatz handeln | Eine Anfrage wird geprüft, mit Kunde und Schiff verknüpft und einem passenden Liegeplatz zugewiesen. | Mehrfache Eingaben und unklare Auswahl können zu doppelten oder widersprüchlichen Daten führen. | Erkennbare Kunden- und Schiffsdaten, eindeutige Auswahl und Konflikthinweise einsetzen. |
| 04 · Arbeit am Steg erfassen | Ein Mitarbeiter fotografiert den Zähler und prüft den erkannten Wert in Telegram. | Ein Foto allein garantiert weder den korrekten Wert noch die passende Einheit oder den Liegeplatz. | Erkannten Wert anzeigen, Liegeplatz auswählen lassen und vor dem Speichern bestätigen. |
| 05 · Mit Kontext übergeben | Das Büro prüft Aufenthalt, zugehörigen Verbrauch und offene Verwaltungsaufgaben. | Eine Übergabe hilft wenig, wenn die nächste Person nicht erkennt, was erfasst wurde und noch offen ist. | Aufenthalt, Ablesungen und Rechnungsbezug zusammenhalten und Status sowie nächste Aktion zeigen. |
0101 · Den passenden Einstieg finden
- Nutzerhandlung
- Eine Fachkraft erreicht die Website über ihre Rolle oder einen betrieblichen Bedarf.
- Hürde
- Ein großer Katalog erschwert die Unterscheidung ähnlicher Module.
- Designantwort
- Rollenseiten erklären die Arbeitssituation und führen zur passenden Marke und zum Modul.
0202 · Die Lage überblicken
- Nutzerhandlung
- Die Koordinatorin prüft Datum, erwartete Ankünfte und freie Liegeplätze.
- Hürde
- Eine Übersicht ohne Datumsbezug kann eine Verfügbarkeit zeigen, die nicht zum Aufenthalt passt.
- Designantwort
- Datum, Liegeplatzstatus und eingehende Anfragen gemeinsam sichtbar halten.
0303 · Im richtigen Datensatz handeln
- Nutzerhandlung
- Eine Anfrage wird geprüft, mit Kunde und Schiff verknüpft und einem passenden Liegeplatz zugewiesen.
- Hürde
- Mehrfache Eingaben und unklare Auswahl können zu doppelten oder widersprüchlichen Daten führen.
- Designantwort
- Erkennbare Kunden- und Schiffsdaten, eindeutige Auswahl und Konflikthinweise einsetzen.
0404 · Arbeit am Steg erfassen
- Nutzerhandlung
- Ein Mitarbeiter fotografiert den Zähler und prüft den erkannten Wert in Telegram.
- Hürde
- Ein Foto allein garantiert weder den korrekten Wert noch die passende Einheit oder den Liegeplatz.
- Designantwort
- Erkannten Wert anzeigen, Liegeplatz auswählen lassen und vor dem Speichern bestätigen.
0505 · Mit Kontext übergeben
- Nutzerhandlung
- Das Büro prüft Aufenthalt, zugehörigen Verbrauch und offene Verwaltungsaufgaben.
- Hürde
- Eine Übergabe hilft wenig, wenn die nächste Person nicht erkennt, was erfasst wurde und noch offen ist.
- Designantwort
- Aufenthalt, Ablesungen und Rechnungsbezug zusammenhalten und Status sowie nächste Aktion zeigen.
04 / Wireframing
Von der Struktur zur Oberfläche
Für diese Fallstudie rekonstruierte Low-Fidelity-Wireframes. Sie erläutern Hierarchie und Ablauf, statt Originaldateien des Projekts wiederzugeben.
05 / UI & visuelles Design
Websiteansichten & Designentwürfe
Die Bildunterschriften unterscheiden öffentliche Websiteansichten und KI-generierte Plattformentwürfe. Öffnen Sie ein Bild für die Detailansicht.
Was das Design ermöglicht
Das Ergebnis ist eine Produktfamilie mit verständlicher Struktur: klar getrennte Märkte, rollenbezogene Einstiege und Oberflächen rund um die Gegenstände der täglichen Arbeit. Der Fall verbindet Markenarchitektur, öffentliche Websites und operative Produktgestaltung, vom Schiffsdatensatz über die Liegeplatzkarte bis zur bestätigten Ablesung vor Ort. Der wesentliche Beitrag ist ein konsistenter Umgang mit Komplexität, der Prioritäten und Handlungen sichtbar macht. Geschäftliche Auswirkungen und Nutzungskennzahlen werden ohne dokumentierte Messung nicht behauptet.
