Haufe Karriereboost: Relaunch eines Corporate Blogs
Durch diese Veränderungen ging es für Karriereboost hoch hinaus
Facts
Die Ausgangssituation
Karriereboost ist eine Blog-Initiative, die das Berufsleben von Berufseinsteigenden, Young Professionals und Führungskräften in Schwung bringt. Vielfältig gestaltete Informationsbeiträge zu aktuellen Trends und Evergreen-Themen der Berufs- und Unternehmenswelt geben spannende Impulse, die junge Berufstätige inspirieren. Mit einem Relaunch will Karriereboost seine moderne und engagierte Persönlichkeit in Design und Technik wiederfinden.
Ziele des Projekts
Unsere Vorgehensweise
Nach jahrelanger Zusammenarbeit ist es heute selbstverständlich, dass jeder Austausch zwischen uns und dem Karriereboost-Team auf einer vertrauensvollen und partnerschaftlichen Stimmung stattfindet. So auch in diesem Projekt. Spannungen und Probleme, aber auch Freuden und Erfolge wurden ohne Zurückhaltung geteilt - was sich direkt auf die Motivation und Produktivität unserer beiden Teams auswirkte.
Konzept
Zu Beginn musste eine durchdachte Verbindung von Design und Technik gestaltet werden, die die Ziele des Projekts geschickt in sich einbund. Dazu wurden die Zielgruppen und User Storys konkretisiert, woraufhin Optimierungsflächen sichtbar wurden. Dabei stellte sich u.a. heraus, dass die Menüdarstellung und -struktur umkonzipiert werden sollte. Um frühzeitig Feedback zu erhalten, wurde mit Prototyping gearbeitet.
Design
Jede Organisation verändert sich im Laufe der Zeit und bildet neue Charakterzüge aus. Um die gegenwärtige Version von Karriereboost auch visuell abzubilden, wurde zeitgleich mit der Konzeptentwicklung ein neues Design gestaltet.
Frontend
Zeit, das Design in Technik zu übersetzen. Einige Designwünsche benötigten dabei besondere Aufmerksamkeit. Beispielsweise verlangte die korrekte Übertragung von Micro Interactions klare und regelmäßige Gespräche, da gewünschte Effekte nur schwer schriftlich vermittelt werden können. Auch die Umsetzung des Dark Modes benötigte besonderes Engagement. Denn der Dark Mode ist eine junge Technologie: So jung, dass beim Edge-Browser erst zum Projektbeginn ein CSS-Feature veröffentlicht wurde, das für die Einbindung unbedingt erforderlich war. Den Umgang mit einer neuen Technologie und die Ansprüche verschiedener Browser kennenzulernen, erforderte Fokus und Fingerspitzengefühl.
Backend
Für die Artikel-Distribution auf verschiedenen Social-Media-Kanälen werden drei unterschiedliche Bildformate benötigt. Diese individuell auszuschneiden und einzupflegen bedeutete großen Aufwand für die Redakteur*innen, den wir reduzieren wollten. Zudem hatte eine hohe Anzahl von Plugins die Website aufgebläht und die Performanceleistung gedrosselt. Ein weiteres, anspruchsvolles Backend-To-do bestand darin, ein DSGVO-konformes Tracking mit Usercentrics zu implementieren, das auch die auf der Seite befindlichen Inhalte von Drittanbietern mitdachte.
Testen
Vor dem Livegang wurde die Website gründlich durchgetestet: Unserem 4-Augen-Prinzip entsprechend prüften Projektunabhängige die Website auf möglichen Optimierungsbedarf. Unter anderem wurden die Darstellung auf allen gängigen Browsern und die mobile Ansicht auf verschiedenen Endgeräten getestet.
Dieses Projekt hat die hohe Qualität der Arbeit von /gebrüderheitz noch einmal bestätigt. Ein großes Dankeschön von unserer Seite an das gesamte Team – wir freuen uns auf die gemeinsame Weiterentwicklung von Karriereboost!
Das Ergebnis
Design modernisieren
Das optimierte Design unterstreicht den Facettenreichtum der Marke wirksam: Große Flächen und lebhafte Farbakzente fangen die inspirierende Karriereboost-Persönlichkeit ein und geben der Website einen verspielten, aber gleichzeitig cleanen und modernen Look.
Produktsichtbarkeit steigern
Die Produkte von Haufe und Schäffer-Poeschel finden sich nun in steter Präsenz, sind dabei aber unaufdringlich in die Gesamtkulisse eingebunden.
User Experience verbessern
Micro Interactions heben in gelungener Ergänzung zum Design den aktivierenden Charakter des Karriereboost-Contents hervor. Gleichzeitig helfen die Micro Interactions, den Fokus der Nutzenden geschickt über die Inhalte zu lenken und führen so zu einer verbesserten User Experience.
Zusätzlich finden User*innen nun schneller zu den Inhalten, die zu ihnen passen: Durch ein angepasstes Menü, einen zweifachen Filter, der den Content in Benutzer*innengruppen und Themenblöcke unterteilt und einer an die Website zugeschnittene Algolia-Suchmaschine können Nutzende mühelos durch die Seite navigieren.
Darüber hinaus wurde der Dark Mode implementiert. Dieser ist ein effektives Mittel, um die Augen von Vielsurfer*innen vor Trockenheit und Rötungen zu schützen. Zudem berücksichtigt der Dark Mode die individuellen Ästhetik-Vorlieben der User*innen.
Arbeitsaufwand für Redakteur*innen reduzieren
Durch die neue Backend-Funktion und Custom Post Types sparen die Redakteur*innen von Karriereboost Zeit und Arbeitsaufwand. Die neue Funktion ermöglicht ihnen, verschiedene Bildformate direkt bei der Auswahl des Bildes zu generieren und an der gewünschten Stelle im Frontend einzubinden.
Performance optimieren
Durch die Entwicklung eines eigenen Themes und Custom Post Types wurde die hohe Plugin-Anzahl drastisch reduziert, was sich umgehend auf die Seiten-Performance auswirkte. Unter anderem verbessert sich die Pagespeed, was vor allem mobilen Nutzer*innen entgegenkommt.
Podcast einbetten
Die Idee, einen Podcast zu implementieren, kam erst gegen Ende des Projekts auf. Das Gute ist: Ein Projekt muss nicht nach dem ersten Release abgeschossen sein. Deshalb wird die Karriereboost-Website auch nach dem Livegang weiterbearbeitet und der Podcast nachträglich eingebettet.
Weitere Case Studies
OWIS: Technische Umsetzung einer Corporate Website mit Shop
Dynamische Außenwirkung in jedem Detail
Zur Case Study →Treten Sie in Kontakt mit uns
Sie haben Fragen oder wollen uns einfach mal kennenlernen? Vereinbaren Sie doch ein kostenloses Beratungsgespräch:
Gesprächstermin vereinbaren →Oder senden Sie uns eine unverbindliche Projektanfrage:
