Haufe Karriereboost: Relaunch eines Corporate Blogs

Durch diese Veränderungen ging es für Karriereboost hoch hinaus

Facts

Kunde
Haufe Karriereboost
Kategorie
Website
Technologie
Wordpress
Unsere Leistungen
Konzept
Design
Frontend Development
Backend Development
Support
Team
Alisa Schöbel
Projektmanagement
Matthias Mees
Frontend Development
Mario Villavecchia
Backend Development
Andreas Maros
Tech Lead

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

Design modernisieren
Produktsichtbarkeit steigern
User Experience verbessern
Arbeitsaufwand für Redakteur*innen reduzieren
Performance optimieren
Podcast einbetten

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.

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

Website
/
WordPress

Rinklin Naturkost: Technische Umsetzung einer Corporate Website

Mit dem Komplett-Update seiner Website kommt der Bio-Großhandel seinen Kund*innen näher.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

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:

Oder senden Sie uns eine unverbindliche Projektanfrage:

Vielen Dank für die Anfrage! Wir melden uns schnellstmöglich bei Ihnen.
Das /gebrüderheitz Team
Ups! Da scheint etwas schief gelaufen zu sein. Ist die Email-Adresse korrekt? Sind Einverständniserklärung und ReCAPTCHA mit einem Häkchen versehen?