Usecase Hoppe Marine: Usability Optimierung der Software (Portal / Tool)

Die Aufgabe: Vom internen Tool zur Kundenanwendung

Die Hoppe Marine GmbH stellt seit neuestem ihren Kunden ein Portal zur Verfügung, welches den Zugriff auf Daten von Sensoren zur Verfügung stellt, die auf Schiffen eingebaut sind. Struktur, Darstellung und Benutzerführung des Portals waren bislang jedoch nicht optimal gelöst, da das Portal ursprünglich als internes Tool konzipiert wurde, das lediglich Mitarbeitern und Ingenieuren zur Verfügung stand. Vereinfacht gesagt: Die Usability war nicht optimal, da die Software zum bisherigen Stand nur für Fachkräfte ausgelegt war.

Durch die Änderung der Zielgruppe hin zu Kunden und deren Mitarbeitern bedurfte es somit einer Anpassung hin zu mehr Nutzerfreundlichkeit, Bedienbarkeit und einer übersichtlicheren Darstellung.

Ein klarer Termin war gesetzt: Ziel war die Präsentation des nun neu entwickelten Kunden-Portal auf einer Messe, um es dem breiten Publikum vorzustellen. Entsprechend mussten alle nötigen Anpassungen bis dahin umgesetzt, getestet und mit dem Backend verbunden werden.

Gemeinsam effektiv programmieren: Frontend Usability Optimierung

Klassischerweise würde man ein Unternehmen wie die KaiserKoenig GmbH als “Frontend Agentur” bezeichnen. Durch die enge Zusammenarbeit mit den Entwicklern in unseren Kundenunternehmen bezeichenen wir uns gernes als “externes #frontendDepartment”. Zusammen mit internen Entwicklern der Hoppe Marine GmbH wurde zügig mit den Umbauarbeiten begonnen, denn die Deadline war gesetzt.

Die Aufgabenteilung war dabei klar definiert:

Die internen Entwickler der Hoppe Marine GmbH kümmerten sich hauptsächlich um die Schnittstellen (API) und das Backend.
Unsere Entwickler haben, wie zu vermuten ist, ausschließlich die Umsetzung im Frontend übernommen.

Die intensive gemeinsame Arbeit beider Teile des gemeinsamen Teams klappte - dank bewährter Mittel zur effektiven Organisation - hervorragend, sowohl hauptsächlich remote als auch in den gelegentlichen Workshops vor Ort am Hamburger Firmensitz der Hoppe Marine GmbH.

Neben des knappen Zeitrahmens war besonders die Limitierungen des eingesetzten React Admin eine Herausforderung, dass dieses den performanten Zugriff auf die Daten nur in einem festgelegten Kontext zur Verfügung stellt.

Die Erweiterung dieser Limitierung konnten wir aber in großartiger Zusammenarbeit im ganzen Team lösen und der Hoppe Marine GmbH, als unserem Kunden, ein Portal übergeben, das ihren Anforderungen zu vollster Zufriedenheit entspricht. Effektiv und professionell in der Zusammenarbeit und als Ergebnis eine optimierte Software, die modern, aufgeräumt und benutzerfreundlich ist, dafür stehen wir als externes #frontendDepartment.

Somit konnte die optimierte Software pünktlich und mit dem gewünschten Feature-Umfang zum Start der Messe online gehen und wurde mit Begeisterung von den Kunden bzw. Nutzern angenommen.

Hoppe Marine App/>

<span>Hoppe App - hier wird Vielzahl von Informationen in einer grafischen Darstellung angezeigt. Alle einzelnen grünen und roten Punkte repräsentieren Schiffe, von denen man regelmäßig Daten erhält.</span>
<h2>Verwendete Technik & Projektzeitraum</h2>
<strong>
<p>
Technik: React, React Admin, SCSS<br>
Projektzeitraum: Sommer 2023
</p>
</strong>

<h2>Hoppe Marine im Detail</h2>
<p>Die Hoppe Marine GmbH ist ein traditionsreiches Unternehmen und stellt mit Sensoren ausgestattete Bauteile für Schiffe her. Diese Sensoren stellen <strong>Daten</strong> zur Verfügung (Ship to Shore), die <strong>wichtig für den Betrieb</strong> und die <strong>Wartung</strong> sowie im Ernstfall auch für die Dokumentation sind.</p>

<p><strong>Diese Daten</strong> werden nun mit dem von uns <strong>gebauten Kundenportal zur Verfügung gestellt.</strong> Kunden wie Reedereien können somit
</p>

<ul>
<li>Rechte-basiert und übersichtlich auf alle relevanten Daten der Schiffe und der Sensoren zugreifen</li>
<li>Fehler frühzeitig erkennen</li>
<li>Wartungen und Reparaturen besser planen
</li>
<li>eine lückenlose Dokumentation vorlegen.
</li>
</ul>

<p>
Neben des <strong>knappen Zeitrahmens</strong> war besonders die Limitierungen des eingesetzten React Admin eine Herausforderung, da dieses den performanten Zugriff auf die Daten nur in <strong>einem festgelegten Kontext zur Verfügung</strong> stellt.
</p>

<p>
Die Erweiterung dieser Limitierung konnten wir aber in großartiger Zusammenarbeit im ganzen Team lösen und der <strong>Hoppe Marine GmbH ein Portal übergeben,</strong> das ihren Anforderungen entspricht. So freuen wir uns nicht nur darüber, gemeinsam mit dem Team von Hoppe Marine eine leistungsstarke Software mit spürbarer Verbesserung in puncto Frontend Usability (einfachere und bessere Bedienbarkeit, Nutzerführung, …) programmiert zu haben, sondern auch direkt das Feedback zu bekommen, dass die Optimierungen von den Anwendern sehr positiv aufgenommen wurde. Ein voller Erfolg!
</p>
<h2>Wer sind die frontendQueens + frontendKings
</h2>
<p>Wir sind ein Team von <strong>Frontend-Enthusiasten</strong>, das sich auf die <strong>Programmierung</strong> dieser Bereiche spezialisiert hat:</p>
<ul>
<li>Benutzeroberflächen für ERP-Systeme</li>
<li>Kunden-Portale (z.B. Online-Banking oder Portale)</li>
<li>und individuelle B2B-E-Commerce-Lösungen </li>
</ul>
<p>Alle 3 Bereiche vereint, dass der User mit der Software aktiv interagiert, anstelle nur zu konsumieren, wie es bei

Bei der Entwicklung der Benutzeroberflächen, englisch Userinterfaces, sind uns daher die Bereiche Barrierefreiheit, Testing, Performance und Usability besonders wichtig. Denn nur Software die funktioniert, ist wirtschaftlich!

Unser Ziel ist es, für unsere Kunden qualitativ hochwertige Webanwendungen zu erstellen, die eine nahtlose Benutzererfahrung bieten. Denn bei uns ist der Benutzer, oder englisch User, der Kunde. Denn es heißt User Experience, nicht Stakeholder Experience.

Wir sind der Meinung, dass eine erfolgreiche Software im Web mehr ist als nur eine hübsche Fassade braucht. Daher haben wir uns darauf spezialisiert, Software zu entwickeln, die nicht nur gut aussieht, sondern auch gut funktioniert. Dafür stehen wir als “Agentur” für Frontend-Entwicklung!

Andere über uns

Empfehlungen

Dirk Zastrow

BI & ERP @team-neusta

Timo und sein Team von KaiserKoenig unterstützen uns seit geraumer Zeit bei der Entwicklung von modernen und technisch anspruchsvollen Front-Ends für unsere internen und externen Projekte. Die Zusammenarbeit hat von Anfang an wunderbar funktioniert, so dass wir uns nach Ende des ersten Projektes direkt wieder dazu entschlossen haben, mit dem #frontendDepartment zusammen zuarbeiten.

Timo und sein Team sind in unsere eigenen Teams nahtlos integriert und folgen unserem agilen Ansatz mit Rat und Tat. Insbesondere die unkomplizierte Art und Weise der Kommunikation, der hohe Qualitätsanspruch an die eigene Arbeit und nicht zuletzt die selbständige, schnelle und zuverlässige Art zu Arbeiten sind Gründe dafür, warum wir Timo und sein Team jederzeit gerne wieder einsetzen und ebenso gerne weiter empfehlen.

Alle auf LinkedIn ansehen