Kontakt

040 36138 777 hkbis@hkbis.de
FOKUSTHEMA KÜNSTLICHE INTELLIGENZ Jetzt informieren!
HKBiS Handelskammer Hamburg Bildungs-Service | German-Brand-Award-2023 | von links: Christian Hameister, Adrian Hönig, Philipp Fischbeck

Herzklopfen

German Brand Award 2023 🏆 fĂŒr unseren Website Relaunch

19. Juni 2023 , Christian Hameister

German Brand Award 2023 🏆 fĂŒr unseren Website Relaunch

19. Juni 2023 , Christian Hameister

German Brand Award 2023 Gold fĂŒr Excellence in Brand Strategy & Creation

Kategorie: Brand Communication – Web and Mobile

Mit unserem Website Relaunch wurde uns am 15. Juni der German Brand Award 2023 in Gold verliehen. Guter Grund fĂŒr einen Blog-Artikel, der beschreibt, wie es dazu gekommen ist.

Wir bieten unseren Kunden nicht nur eine umfassende Palette an Weiterbildungskursen, die sich an den jeweiligen BedĂŒrfnissen orientieren, sondern verstehen uns auch als Innovationstreiber in der IHK-Weiterbildungslandschaft und garantieren dabei höchste QualitĂ€t. Das war auch unser Anliegen bei der Konzeption und Umsetzung unserer neuen Website, die im Sommer 2022 live geschaltet wurde. Ziel des umfassenden Website-Relaunchs war es Aufgeschlossenheit abzubilden – bedeutete fĂŒr uns: Staub wegpusten und zeigen, dass Weiterbildung Spaß macht!

Denn wir sind der Meinung, dass Lernen nicht nur effektiv sein sollte, sondern auch Freude bereiten kann. Deshalb haben wir uns fĂŒr ein modernes und ansprechendes Design entschieden, das unsere Kunden begeistert. Unsere neue Website bietet unseren Kunden nun eine noch bessere Übersicht ĂŒber unser Angebot an Weiterbildungskursen. Dabei legten wir besonderen Wert auf eine intuitive Navigation und klare Strukturen. So finden alle schnell den passenden Kurs fĂŒr ihre BedĂŒrfnisse.

Aber nicht nur die Optik wurde verbessert: Auch inhaltlich haben wir unsere Website komplett ĂŒberarbeitet. Mit unserer Story möchten wir unseren Kunden einen umfassenden Einblick in unser Unternehmen geben – von unserer Philosophie bis hin zu unserem Team. Zudem bieten wir jetzt noch mehr Möglichkeiten zur Interaktion mit uns. Wir sind stolz darauf, dass es uns gelungen ist, unsere Idee einer zeitgemĂ€ĂŸen IHK-Weiterbildungslandschaft auch online umzusetzen. Mit unserer neuen Website wollen wir zeigen: Weiterbildung muss kein trockenes Thema sein! Bei uns steht der Spaß am Lernen im Vordergrund – denn wer Freude hat beim Lernen wird schneller Erfolgserlebnisse verbuchen können!

HKBiS Handelskammer Hamburg Bildungs-Service | Logo German Brand Award 2023

JurybegrĂŒndung

„Die Handelskammer Hamburg Bildungs-Service gemeinnĂŒtzige GmbH (HKBiS) bedient mit 129 Kursen nicht nur ein ĂŒberaus breitgefĂ€chertes Angebot, sondern vertritt auch Werte wie Ethik und Nachhaltigkeit. Die neue Website besticht mit einem frisch und jung wirkenden Look-and-Feel, der in vier verschiedenen Farbwelten verfĂŒgbar ist und von den Userinnen und Usern nach Belieben ausgewĂ€hlt werden kann. Hinzu kommt eine motivierende und effiziente User Experience, bei der InteraktivitĂ€t und Spaß eine zentrale Rolle spielen, was sich auch positiv auf die Verweildauer und das Ranking in den Suchergebnissen auswirkt. Alles in allem kann man der HKBiS zu dieser großartigen Website nur gratulieren. Wie hier Kursangebote und ethische Werte emotional vermittelt werden, ist herausragend und hebt die Marke vom Wettbewerb trennscharf ab.“

HKBiS Handelskammer Hamburg Bildungs-Service | German Brand Award 2023 | Jury: Dr. Saskia Diehl (GeschĂ€ftsfuhrerin GMK Markenberatung), Axel Löber (Leiter Global Brand & Marketing E.ON SE), Katrin Menne (Head of Brand & Research commerzbank AG), GĂŒnter Moeller (GeschĂ€ftsfĂŒhrer hm+p. Herrmann. Moeler + Partner), Stefan Raake (Geschaftsfihrer AMC Finanzmarkt GmbH), Prof. Ute Röseler (Professorin fĂŒr Markenkommunikation Brand University of Applied Sciences Hamburg), Michael Rösch (Co-Founder TOMINO MitgrĂŒnder wirDesign AG), Prof. Dr. Simone Roth (Professur fĂŒr Marketing Hochschule Ruhr West), Christian Rummel (Deputy Global Head of Brand Communications & CSR Deutsche Bank AG)

Mit unserem innovativen Ansatz setzen wir neue MaßstĂ€be in der Branche

Neben einer Reihe von technologischen Innovationen haben wir auch neueste Trends in der Gestaltung bzw. Darstellung unserer Angebote im Netz berĂŒcksichtigt. Und wie es fast bei Allem ist, ist der Großteil fĂŒr Nutzer gar nicht sichtbar. Mit einem eigens programmierten All-in-One-Webservice haben wir nun fast alle Services im Login-Bereich „Mein HKBiS“ abgebildet, die fĂŒr unser tĂ€gliches Tun unabdingbar sind und unseren Lehrenden und Lernenden einen umfassenden Service bieten. Dieser Service ist so intuitiv und benutzerfreundlich gestaltet, dass sich jeder Nutzer schnell zurechtfindet. Die Navigation erfolgt einfach ĂŒber eine ĂŒbersichtliche MenĂŒstruktur, die alle wichtigen Funktionen enthĂ€lt. Optisch haben wir unsere Angebote auf den neuesten Stand gebracht. Mit einem modernen Design und einer klaren Strukturierung prĂ€sentieren wir uns im Netz nun noch ansprechender fĂŒr unsere Zielgruppe.

Auch in puncto Sicherheit haben wir keine Kompromisse gemacht. Unsere Plattform ist mit den neuesten VerschlĂŒsselungstechnologien ausgestattet und erfĂŒllt höchste Datenschutzstandards. Wir sind stolz darauf, unseren Lehrenden und Lernenden einen allumfassenden Service bieten zu können – von der Anmeldung bis hin zum Abschluss. Unser All-in-One-Webservice vereinfacht nicht nur unseren Arbeitsalltag enorm, sondern bietet auch ein Höchstmaß an Komfort fĂŒr unsere Kunden.

Inhalte einer umfangreichen Lernumgebung in einem attraktiven Design

Eher funktional, oder doch mit modernem Design, ausgefeilter UI, UX und ĂŒberzeugendem Brand Storytelling? Diese Frage haben wir mit unserer Agentur Nova Digital ganz klar beantwortet. Vielen Dank an dieser Stelle fĂŒr die vertrauensvolle Zusammenarbeit!

Gemeinsam haben wir uns auf ein modernes Design mit einer klaren Struktur und intuitiven Bedienung geeinigt. Wir wollten, dass „Mein HKBiS“ nicht nur funktional ist, sondern auch optisch ansprechend und motivierend fĂŒr die Nutzerinnen und Nutzer wirkt. Dabei war es uns wichtig, dass das Design zum Inhalt passt und unsere Brand Story authentisch widerspiegelt. Mit gezieltem Einsatz von Farben, Formen und Bildern haben wir eine visuelle Sprache entwickelt, die den Charakter unserer Marke mehr als zuvor unterstreicht.

Auch bei der User Experience (UX) haben wir besonderen Wert auf eine hohe QualitĂ€t gelegt. Die Navigation durch die Lernumgebung sollte einfach sein – ohne lange Wartezeiten oder umstĂ€ndliche Prozesse. Stattdessen setzen wir auf schnelle Ladegeschwindigkeiten sowie einen benutzerfreundlichen Aufbau der Inhalte. Um sicherzustellen, dass unser Konzept funktioniert, hat Nova Digital verschiedene Tests durchgefĂŒhrt: Von Usability-Tests ĂŒber A/B-Tests wurden alle Aspekte des Designs sorgfĂ€ltig evaluiert.

Das Ergebnis kann sich sehen lassen

hkbis.de ist nicht nur funktionaler als je zuvor – es sieht auch noch großartig aus! Dank des gelungenen Zusammenspiels von UI/UX-Designs sowie einem ĂŒberzeugenden Brand Storytelling konnten wir die Zufriedenheit unserer Kundinnen und Kunden steigern – was will man mehr?

Farbgestaltung

Starke Farben sind in den letzten Jahren ein wichtiger Design-Trend. Mutige Farben sind reichhaltig, hell und sogar extrem lebendig. Sie können primĂ€re oder sogar sekundĂ€re Farbtöne sein. Über den fast schon normalen Dark Mode hinaus haben wir einfach mal 4 Farb-Modi integriert. So kann sich jeder User seine Lieblings-Ansicht selbst auswĂ€hlen: Classic, Dark, Pride oder Pastell.

  • Der Classic-Modus ist perfekt fĂŒr diejenigen, die es klassisch mögen. Hier dominieren neutrale Farben und natĂŒrlich Classic Blue.
  • Der Dark-Modus hingegen ist ideal fĂŒr alle NachtschwĂ€rmer oder Menschen mit empfindlichen Augen. Dunkle HintergrĂŒnde in Kombination mit hellen Schriftarten sorgen dafĂŒr, dass das Lesen auch bei schlechten LichtverhĂ€ltnissen angenehm bleibt.
  • FĂŒr all jene, die gerne auffallen oder einfach ihre Persönlichkeit zum Ausdruck bringen wollen, gibt es den Pride-Modus. Hier erwarten einen krĂ€ftige Regenbogenfarben – ein klares Statement gegen Diskriminierung und eine Hommage an Vielfalt und Toleranz.
  • Last but not least haben wir noch den Pastell-Modus im Angebot: Sanfte Farbtöne wie RosĂ©, MintgrĂŒn oder Babyblau schaffen eine beruhigende AtmosphĂ€re – perfekt um sich zu entspannen oder konzentriert zu arbeiten.

Egal wer welchen Modus bevorzugt – unsere Plattform bietet immer das beste Nutzererlebnis!

Animierende Grafiken

Sie sind ein Ă€ußerst wichtiger Trend in unserem UI-Design und machen den Unterschied zwischen einer einfachen und einer außergewöhnlichen Website. Mit animierten Icons, wiederkehrenden Bewegungen und Memojis anstelle von Bildern heben wir uns von vielen Mitbewerbern ab. Wer im UI-Design auffallen möchte, sollte nicht nur auf Ästhetik setzen, sondern auch innovative Elemente wie animierte Icons integrieren. Denn diese kleinen Details können den Unterschied ausmachen!

Liebe zum Detail

Mehr Liebe zum Detail war uns im UI-Design sehr wichtig. Von den SchaltflĂ€chen, Symbolen, dem Laden bis zur Navigation machen die kleinen Details ein außergewöhnliches Design. Denn es sind gerade die kleinen Dinge, die den Unterschied ausmachen und das Nutzererlebnis verbessern. Wir haben uns daher intensiv mit der Gestaltung von Icons und Schriftarten beschĂ€ftigt, um eine klare Lesbarkeit zu gewĂ€hrleisten.

Auch bei der Farbauswahl haben wir uns Zeit genommen. Denn jede Farbe hat ihre eigene Bedeutung und kann unterschiedliche Emotionen hervorrufen. Deshalb haben wir bewusst auf bestimmte Farbkombinationen gesetzt, um ein harmonisches Gesamtbild zu schaffen.

Ein weiteres wichtiges Detail ist die Ladezeit unserer Website. Hierbei achten wir darauf, dass unsere Seiten schnell geladen werden können, ohne dabei Kompromisse beim Design einzugehen.

Und nicht zuletzt spielt auch die Navigation eine entscheidende Rolle in unserem UI-Design-Konzept. Wir möchten unseren Nutzern einen intuitiven Weg durch unsere Anwendung bieten – damit sie sich jederzeit sicher fĂŒhlen und einfach navigieren können.

All diese Details tragen dazu bei, dass unser UI-Design nicht nur Ă€sthetisch ansprechend aussieht, sondern auch funktional ĂŒberzeugt!

Fette Typografie

Das war ein wesentlicher Wunsch fĂŒr unser Design, der das Bild als Hauptelement ersetzt. Tapfere Typografie kann sowohl im Webdesign als auch im Grafikdesign einen Unterschied machen – das haben wir mit variablen Fonts umgesetzt. Wir sind uns sicher: Variable Fonts werden sich mit hoher Wahrscheinlichkeit als zukĂŒnftiger Standard in der digitalen Netzwerktypografie – z.B. bei Websites, in Mobil Apps oder als Systemschriften – etablieren. Denn sie bieten eine noch nie dagewesene FlexibilitĂ€t und ermöglichen es, dass sich Schriftarten automatisch an verschiedene BildschirmgrĂ¶ĂŸen oder GerĂ€te anpassen. Das bedeutet nicht nur mehr Komfort fĂŒr den Nutzer, sondern auch ein gesteigertes Ă€sthetisches Erlebnis.

Auch in puncto Barrierefreiheit spielen variable Fonts eine große Rolle: Durch die Möglichkeit einer dynamischen Anpassung können Texte besser lesbar gemacht werden – egal ob auf kleinen Smartphone-Displays oder großen Monitoren.

Wohlgeformte FunktionalitÀten

Der wichtigste Teil unseres UI-Designs war die FunktionalitĂ€t, das heißt, jedes Element wird basierend auf seinem Zweck und seiner Funktion ausgewĂ€hlt. Viele Leute denken, dass man sich zwischen Design und FunktionalitĂ€t entscheiden muss, aber mit den neuen Technologien gehen diese beiden sehr gut zusammen und ergĂ€nzen sich gegenseitig. Das Design ist dafĂŒr verantwortlich, die Aufmerksamkeit auf die Website oder Anwendung zu lenken, und die FunktionalitĂ€t erleichtert die Erfahrung. Dadurch kann der Benutzer die Informationen schneller finden.

DarĂŒber hinaus sollten auch die BedĂŒrfnisse verschiedener Zielgruppen berĂŒcksichtigt werden. Ein Design, das fĂŒr junge Menschen ansprechend ist, mag Ă€ltere Nutzer abschrecken oder umgekehrt. Daher ist unser UI-Design so gestaltet sein, dass es fĂŒr alle Altersgruppen zugĂ€nglich und verstĂ€ndlich ist.

Neben den Àsthetischen Aspekten spielt auch die Barrierefreiheit bei unserem Design eine wichtige Rolle. Es gibt viele Menschen mit unterschiedlichen Behinderungen wie Sehbehinderungen oder motorischen EinschrÀnkungen, die ebenfalls auf unsere Website zugreifen möchten. Das Design muss daher so angepasst werden können, dass es diesen Nutzern gerecht wird.

Insgesamt ging es uns darum, ein positives Erlebnis fĂŒr alle Benutzer zu schaffen – sei es beim Besuch der Website oder bei der Nutzung unseres Login-Bereichs auf einem Smartphone oder Tablet. Durch einen gelungenen Mix aus Ästhetik und FunktionalitĂ€t sowie BerĂŒcksichtigung der BedĂŒrfnisse aller Zielgruppen konnte dies erfolgreich umgesetzt werden.

Doch was steckt noch drin?

Und hier noch ein paar Details zu den Features unseres Login-Bereiches und Technischen Facts unserer Datenbank, denn bei uns ist mit unserer neuen Datenbankstruktur einfach alles Synchron: Website | Datenbank | Mailserver | Monitoring Tools. Das bedeutet fĂŒr unsere Nutzer eine höhere Sicherheit und schnellere Reaktionszeiten bei Problemen oder Fragen.

Unser Login-Bereich ist benutzerfreundlich gestaltet und bietet die Möglichkeit, sich einfach und sicher anzumelden. Dabei legen wir großen Wert auf Datenschutz und verwenden modernste VerschlĂŒsselungstechnologien, um Daten zu schĂŒtzen. In unserer neuen Datenbankstruktur haben wir außerdem darauf geachtet, dass alle Informationen in Echtzeit synchronisiert werden. Dadurch kann sich jeder Nutzer sicher sein, dass immer die aktuellsten Daten zur VerfĂŒgung stehen – egal ob es um Bestellungen, Kundeninformationen oder andere wichtige Details geht.

Auch unser Mailserver ist perfekt integriert: So gibt es schon eine Reihe an automatischen Benachrichtigungen ĂŒber den Status der Bestellung oder Neuigkeiten zum Unterricht direkt per E-Mail zugesandt.

Und last but not least sorgen unsere Monitoring Tools dafĂŒr, dass mögliche Störungen frĂŒhzeitig erkannt werden können – noch bevor sie Auswirkungen auf einen Besuch unserer Website haben könnten. Denn Kundenzufriedenheit steht bei uns an oberster Stelle!

Features

  • Multi-Mandant mit benutzerdefinierten Rollen, Unterschiedliche Nutzergruppen,  Verschiedene Produktcluster und Kursangebote sowie individuelles Buchungsverfahren
  • Nutzer-Management fĂŒr personenbezogene Daten, Adress-, Kommunikations- und Bankdaten sowie Profiling
  • Kurs-Management mit Ausgabe aller Kursdaten, eigener Sortierung und diversen Filter- und Sortierfunktionen
  • Dozenten-Management zum verwalten von Dozentendaten,  organisieren von Dozententerminen und StundenplĂ€nen und natĂŒrlich unser Upload-Center, in dem Dozenten Termin-, Fach & Kursdokumente organisieren und zum Veröffentlichen (Digital oder Print) beauftragen können
  • Dozenten-Termin-Verwaltung mit Terminplanung, einer Termintauschbörse und Stundenplanung
  • Dokumenten-Management fĂŒr Personendokumente (Zertifikate, Bescheinigungen, Digitale Zertifikate & Teilnehmerbescheinigungen inkl. Mailversand und Validierungsfunktionen, abrufen von Unterrichtsdokumenten (PrĂ€sentationen, Fachliteratur)
  • E-Commerce-Funktion fĂŒr individuelle Merklisten, einem Shop fĂŒr kostenpflichtige Buchungen, Buchungen fĂŒr Dritte (z.B. Unternehmen), Wartelistenbuchung, die Möglichkeit Addons zu buchen, Guthaben und Gutscheine anzuwenden und natĂŒrlich das Angebot unterschiedlicher Payments

Tech Facts

  • 250+ FunktionalitĂ€ten
  • Modernste Technologien mit Java 17/21, Spring Boot, GraphQL, MongoDB und Microsoft SQL
  • Kein Underfetching und Overfetching durch GraphQL
  • High Performance der Anfragen durch Caching und Query-Optimierung auf Datenbankebene
  • Vereinfachung der Zusammenarbeit mit Drittanbietern durch den Einsatz vom Altair-Web-Client
  • Skalierbarkeit durch JSON Web Token
  • Hohe Wartbarkeit durch Test-Driven-Development-Ansatz
  • Continuous Integration / Continuous Delivery Pipeline durch GitLab

DANKE! DANKE! DANKE!

Wir möchten uns an dieser Stelle bei allen Beteiligten bedanken, die mit uns zusammen dieses Projekt ermöglicht haben und uns dabei helfen, es stetig zu verbessern.

Widrige Bedingungen, wie zum Beispiel die organisatorischen Änderungsanforderungen der Corona-Pandemie oder eine groß angelegte bundesweite Cyberattacke auf das gemeinschaftlich von den Industrie- und Handelskammern betriebene Rechenzentrum, haben zunĂ€chst noch dafĂŒr gesorgt, dass viele der Funktionen nicht wie geplant fertig entwickelt werden konnten oder so wie angedacht funktioniert haben. Zahlreiche AnpassungswĂŒnsche und Hinweise durch alle Nutzer haben uns maßgeblich dabei geholfen, die Website zu dem zu machen, was sie jetzt ist.

Wir haben noch viele Ideen, wie wir die FunktionalitĂ€ten erweitern und optimieren können und gehen dies weiterhin mit Hilfe eines externen Entwicklers (SnapDev) und unserer Webagentur an. Danke fĂŒr das entgegengebrachte VerstĂ€ndnis wĂ€hrend der Phase der Widrigkeiten und danke fĂŒr jegliche konstruktive Kritik und alle Anregungen.