Heroimage

Eine Plattform mit Best-Practice-Beispielen für Südhessen

TOPF FINDET DECKEL – DAS MATCHMAKING TOOL DER IHK

Steigende Energiepreise und die Suche nach Energieeffizienzmaßnahmen stellen gerade für kleine und mittlere Unternehmen ohne eigene Abteilung für Energiemanagement eine große Herausforderung dar. Oft fehlen Zeit, Erfahrungen und die richtigen Kontakte, um Umwelt-und Energiethemen zufriedenstellend zu lösen. Wie finden diese Firmen schnell und unkompliziert passende Partner für ihr Energieeinsparungsprojekt? Wir haben für die IHK eine digitale Plattform entwickelt, um den passenden Energiepartner in der Region zu finden.

Kontaktiert uns!

Fakten & Eckdaten

Technologien
Gatsby, netlify, netlify CMS
Team-Setup
1 Product Owner
2 Frontend Engineers
1 Designer
Laufzeit
Juli 2020 – Dezember 2020
Obwohl das Thema Energieeinsparung in unserem Alltag omnipräsent ist, gestaltet sich der Weg zu optimalen Lösungen gerade für kleine oder mittelständische Unternehmen ohne eigenes Energiemanagement-Know-How sehr beschwerlich und zeitraubend. Hier setzt die IHK Darmstadt Rhein Main Neckar mit ihrem Energieeffizienznetzwerk ETA-Plus Südhessen an und vernetzt Unternehmen zum Erfahrungs- und Kooperationsaustausch. Es gibt bereits Netzwerktreffen und gemeinsame Besichtigungen von Best-Practice-Beispielen in der Region. Aber wäre es nicht sinnvoll, das Netzwerk um einen „digitalen Energieeffizienz-Quickfinder“ zu erweitern?

Auf Basis dieser Grundidee entwickelten wir für die IHK eine Webseite, sozusagen ein „kleines, digitales Matching Tool“, um Unternehmen bei der Suche nach einem passenden Projektpartner für ausgewählte Energiebereiche mit wenigen Klicks zusammenzubringen. Die Suche über eta-plus-suedhessen.de soll insbesondere kleine und mittelständische Unternehmen ermutigen, einen Beitrag für mehr Energieeffizienz und Klimaschutz in der Region zu leisten und Energieeffizienzprojekte im eigenen Betrieb in Gang zusetzen. Aber nicht nur Suchenden soll das Portal einen Gewinn bringen. Unternehmen, die bereits Energieeinsparungsprojekte umgesetzt haben und diese Daten in das Portal eintragen, können hier ihr Engagement präsentieren und andere damit inspirieren. Zudem bietet die Webseite eine dritte Funktion an: eine Aufstellung geeigneter Energieberater zur Realisierung des geplanten Energieeinsparungsprojektes. Diese können ihre Referenzen aufzeigen, Vertrauen gewinnen und somit neue Projekte akquirieren.

Die Visualisierung beispielhafter Best-Practices

Unser erster Schritt zu einem Prototyp der Webseite war der Aufbau von Design Mockups, die klar und ansprechend im Corporate Design der IHK ein beispielhaftes Unternehmen zeigen. Eine 3D-Illustration einer fiktiven Energieeffizienz-Fabrik gibt als interaktives Hero image einen ersten Überblick zu den Themenfeldern. Elf Energiefelder, welche als kleine Kacheln über einzelnen Gebäudebereichen der Fabrik liegen, stehen beispielhaft für Einsparungsmaßnahmen im Unternehmen. Per Klick auf ein Icon öffnet sich das größere Kachelpendant unten auf der Webseite und weiterführende Informationen im ausgewählten Energiefeld erscheinen. Ein Call to Action Button mit „weiteren Informationen“ verlinkt zu einer neuen Seite mit ausgewählten Best-Practice-Beispielen aus der Region Südhessen. Hier informieren, tabellarisch aufgeführt, Daten zu bereits umgesetzten Energieeffizienzprojekten, Einsparungssummen in kWH und CO2, sowie Energiepartnern und -beratern.
IHK Match Making Tool Quickfinder BenutzeroerflächeIHK Match Making Tool Best Practices aus Südhessen Benutzeroberfläche
Ergänzt wurde der Entwurf um Kontaktformulare und umfassende Eingabemasken zur Erfassung bereits realisierter Energieeffizienzprojekte. Die Daten werden bei der IHK eingereicht, geprüft, freigegeben und schließlich auf der Best-Practices-Webseite veröffentlicht.
Somit wächst das Portal kontinuierlich und mehrere Seiten profitieren durch das Netzwerk. Suchende Unternehmen finden leicht und schnell Inspiration zum Thema Energie und erfahren, in welcher Zeitspanne sich eine Investition finanziell rechnet, welche Förderprogramme unterstützten und welche Energieberater und Projektpartner kooperieren. Einreichende Unternehmen können ihre eigenen Investitionen einer großen Öffentlichkeit präsentieren und treten damit als moderner Vorreiter und innovatives Unternehmen auf.
„cosee hat uns bei der Umsetzung des Webauftritts für regionale best practices im Bereich Energie- und Klimaschutz von Anfang bis Ende professionell unterstützt. Von Konzeption über Design bis zur Umsetzung als responsive, SEO-freundliche Webseite hatte ich jederzeit kompetente Ansprechpartner, die meine Ideen sinnvoll weitergedacht und überzeugend umgesetzt haben.“
Dr. Niclas Wenz, IHK Darmstadt Rhein Main Neckar

Vom Design Mockup zur lauffähigen Webseite

Nachdem das erste Design-Grundgerüst stand, ging es an die Auswahl der passenden Tools zur technischen Umsetzung. Da es zunächst keine klassische Datenbank geben sollte, setzten wir das Projekt als reine Frontend-Entwicklung auf. Wir verwendeten als Frontend Framework Gatsby, weil die Seite mit vielen Bildern aufgebaut ist, die schnell geladen werden müssen. Das Tool ist ideal für statische Seiten und bietet besonders bei Webseiten mit vielen Bildern gute Möglichkeiten, diese zu optimieren, vorzuladen und zu komprimieren. Auch zur Search Engine Optimization besitzt Gatsby einige Features.

Beim Thema Hosting entschieden wir uns für den Cloud-Computing-Anbieter netlify, sowie das dazu passende netlify CMS, mit dem wir schon viele Erfahrungen mit gesammelt haben. Die Kombination funktioniert reibungslos, da Hosting und CMS aus einer Hand sind und die Inhalte über eine intuitive Oberfläche gepflegt werden. Außerdem ist netlify perfekt für Anwendungsfälle wie diesen, bei denen Ladezeit-Performance und Verfügbarkeit eine entscheidende Rolle spielen.

Die Eingabe und Speicherung der Best-Practise-Beispiele erfolgt direkt in JSON Dateien, die im Projekt gespeichert sind. Die IHK nutzt dafür ein Webinterface mit einem Formular, in welches sie neue Daten einträgt. Dieses wird dann als Commit auf das Repository gepushed. netlify baut die Webseite automatisch neu auf und deployed sie.

Aufgrund der Bauweise wächst die Webseite stetig mit neu eingefügten Energieprojekten, neue Energiethemenfelder finden als weitere Icon-Kacheln Platz und erweitern das Energieeffizienznetzwerk.
Funktionsumfang
•
Design und Programmierung einer responsiven Webseite
•
interaktive Grafik mit Icons zur Direktauswahl des gesuchten Energieeffizienzthemas
•
informative Tabellen mit Best-Practices-Beispielen aus der Region Südhessen
•
umfassende Eingabemasken zum Eintrag eines Energieeffizienzprojektes beim Netzwerk ETA-PLUS Südhessen
•
Kontaktformular für die individuelle Beratung
light mode button