Codibly, Website-Redesign für ein IT-Unternehmen

Wie wir die Struktur der Codibly-Website optimiert haben, um Kunden einen schnellen Zugang zu den wichtigsten Informationen zu ermöglichen und die Zahl der Anfragen für Technologieprojekte zu erhöhen.

Codibly ist ein Krakauer Unternehmen aus der IT-Branche. Für Kunden aus unterschiedlichen Branchen (z. B. Insurance, Healthcare) entwickelt es individuelle Software-Lösungen, und über das größte Fachwissen sowie die meiste Projekterfahrung verfügt es in der Branche Energy & Utilities.

Die bisherige Website wurde auf Basis eines Templates mit sehr niedrigen technischen Kennzahlen erstellt, wie etwa: Optimierung, Indexierungsstatus in Google oder Performance (Geschwindigkeit und Aufbau des HTML-Codes). Ein zusätzliches Problem war ein sehr unfreundlich umgesetztes CMS WordPress, das Probleme bei der Verwaltung der Website verursachte.

Unsere Rolle

Im Rahmen des Projekts für Codibly bestand unsere Aufgabe darin, eine Website zu erstellen, die den dynamischen Charakter eines Technologieunternehmens widerspiegelt, das auf IT-Lösungen für die Energiebranche spezialisiert ist. Wir begannen die Arbeit mit einer eingehenden Analyse der Geschäftsziele und der Zielnutzer, um zu verstehen, wie sich das Angebot und die Werte des Unternehmens am besten präsentieren lassen.

Zielgruppe und Personas für Codibly

Die Codibly-Website wurde für zwei Hauptzielgruppen konzipiert: Unternehmen aus dem Energiesektor, die fortschrittliche IT-Lösungen suchen, sowie potenzielle Partner und Investoren, die an einer Zusammenarbeit im Bereich moderner Technologien interessiert sind. Jede dieser Gruppen hat ihre eigenen, einzigartigen Bedürfnisse, die wir im Designprozess der Website berücksichtigt haben.

Persona 1: IT-Manager in einem Energieunternehmen

• Profil: IT-Manager oder CTO (Chief Technology Officer) in mittleren und großen Unternehmen der Energiebranche, die nach modernen technologischen Lösungen suchen, die helfen, Prozesse im Unternehmen zu automatisieren und zu optimieren.
• Motivationen: Innovationen, Digitalisierung von Prozessen, Kostenoptimierung, Lösungen, die auf die spezifischen Anforderungen der Branche zugeschnitten sind.
• Probleme: Die Suche nach Technologiepartnern, die skalierbare und moderne IT-Lösungen anbieten, bei gleichzeitig fehlender klarer Vision für die Zusammenarbeit mit Technologieunternehmen.
• Erwartungen: Ein klar präsentiertes Leistungs- und Projektangebot, ein einfacher Zugang zu Case Studies und zu den von Codibly eingesetzten Technologien, die konkrete Vorteile für die Energiebranche aufzeigen.

Persona 2: Potenzieller Technologiepartner

• Profil: Operative oder entscheidungsbefugte Führungskräfte in Technologieunternehmen, die eine Zusammenarbeit mit erfahrenen IT-Partnern suchen, die auf die Entwicklung von Lösungen für den Energiesektor und erneuerbare Energiequellen spezialisiert sind.
• Motivationen: Gemeinsame Projekte, Entwicklung neuer technologischer Lösungen im Energiebereich, Zusammenarbeit in großem Maßstab.
• Probleme: Die Schwierigkeit, einen vertrauenswürdigen Partner zu finden, der über Erfahrung und Wissen zu den spezifischen Anforderungen der Branche verfügt.
• Erwartungen: Die Präsentation der Kompetenzen von Codibly, der Technologien, mit denen das Unternehmen arbeitet, sowie der bisherigen Projekte, die eine Zusammenarbeit auf hohem Niveau belegen können.

Persona 3: Investor

• Profil: Private und institutionelle Investoren, die daran interessiert sind, Technologieunternehmen aus dem Energiesektor zu unterstützen.
• Motivationen: Investitionen in innovative Projekte und Technologien, die langfristig Gewinn bringen können, insbesondere im Bereich erneuerbarer Energien und der Digitalisierung.
• Probleme: Die Suche nach vertrauenswürdigen, etablierten Unternehmen, die innovative Lösungen mit Erfolgspotenzial garantieren können.
• Erwartungen: Die Website muss das technologische Potenzial von Codibly klar darstellen und die bisherigen Erfolge sowie die Entwicklungspläne deutlich kommunizieren, die für Investoren von Interesse sein könnten.

UI-Design

In der Phase des Interface-Designs (UI) haben wir uns darauf konzentriert, ein modernes und zugleich übersichtliches Layout zu schaffen, das Fachleute aus der Technologiebranche anspricht. Unser Ziel war es, ein innovatives Erscheinungsbild mit Benutzerfreundlichkeit zu verbinden, damit die Nutzer die wichtigsten Informationen leicht finden können.

1. Minimalistisches Design, Die Website setzt auf klare Linien und großzügige Abstände zwischen den Elementen, wodurch jeder Abschnitt übersichtlich und angenehm für das Auge ist. Eine klare Inhaltshierarchie hilft den Nutzern, die wichtigsten Informationen schnell zu finden.
2. Dynamische visuelle Effekte, Dezente Animationen und visuelle Interaktionen verleihen der Website einen modernen Charakter, ohne die Nutzer übermäßig abzulenken. Diese subtilen Effekte, wie Buttons, die ihre Farbe ändern, oder Animationen beim Scrollen, geben der Website Dynamik und vermitteln den Eindruck von Innovation und technologischem Fortschritt.
3. Kontraste und Typografie, Wir haben kontrastreiche Farbkombinationen eingesetzt, die helfen, die wichtigsten Inhalte hervorzuheben. Eine klare, moderne Typografie sorgt dafür, dass alle Informationen leicht lesbar sind und gleichzeitig die professionelle Ästhetik unterstützt.
4. Übersichtliches Menü und einfache Navigation, Die zentralen Navigationselemente wurden intuitiv gestaltet, sodass die Nutzer die für sie interessanten Abschnitte schnell finden können. Die Website bietet einen einfachen Zugang zu den wichtigsten Informationen über Leistungen, Projekte und Case Studies, was eine schnelle Entscheidungsfindung potenzieller Kunden und Partner begünstigt.

Das Endergebnis ist eine Website, die nicht nur durch ein dynamisches Design Aufmerksamkeit erregt, sondern den Nutzern vor allem ein schnelles und intuitives Navigieren ermöglicht und die Präsentation der technologisch fortschrittlichen Leistungen von Codibly unterstützt.

Audit der bestehenden Website

Heatmaps und Google Analytics

Die bestehende Website nutzte während des Audits und nach den Analysen mit Heatmaps (hotjar.com sowie mouseflow.com) und der Untersuchung des Nutzerflusses in Google Analytics ihr Potenzial nicht aus. Die Mehrheit der Nutzer:

• gelangte nicht weiter als bis zu den Haupt-Unterseiten des Angebots,
• die Nutzung des riesigen Formulars auf der Startseite lag auf einem sehr niedrigen Niveau von ca. 0–2 %,
• etwa 50 % der Personen scrollten die Seite auf mobilen Geräten nur bis zur Hälfte,
• rief die Unterseite Karriere auf,
• der Formular-Button erfüllte trotz seiner Hervorhebung ebenfalls nicht seine Funktion (sehr geringe Klickrate)

Um das Ziel zu erreichen, arbeiteten wir gemeinsam mit dem Team von Codibly in Form von Remote-Hangouts an der Konzeption eines neuen und an der Analyse des bestehenden Angebots sowie der Leistungen. Im Laufe mehrerer Iterationen aus Fragen und Antworten sowie der Konsolidierung der Daten wurde eine neue Seitenstruktur und eine Reorganisation des Angebots der Unterseiten Industry und Services erarbeitet.

Auf Basis von Google Analytics und den Heatmaps konnten wir außerdem feststellen, dass der am häufigsten angeklickte Menüpunkt und der mit dem größten Interesse die Position Careers war. Am seltensten angeklickt wurde hingegen jene Position, die für das Unternehmen am wichtigsten war (Energy&Utilities). Die Verschachtelungstiefe der Unterseite im Menü erschwerte den Nutzern den Zugang zu ihr. Nach dem Gespräch mit dem Team erfuhren wir, dass das Unternehmen in letzter Zeit sehr viele Rekrutierungen durchführte, was die Ergebnisse unserer Analysen erklärte.

Durchführung der SEO-Recherche und Analyse der Google-TOP10-Seiten

Anschließend gingen wir zur Analyse der SERPs (Google-TOP10-Ergebnisse) über. Die Hauptaufgabe bestand darin, festzustellen, welche Seiten Google bevorzugt, und die Daten zu mitteln. Dazu mussten die Seiten hinsichtlich der Onsite-SEO-Faktoren analysiert werden, d. h. unter anderem:

• Umfang der Inhalte – Länge der Absätze und Gesamtlänge der Inhalte,
• Dichte der wichtigsten und ergänzenden Schlüsselbegriffe sowie die Verwendung verwandter Wörter und Fragen,
• interne Verlinkung,
• Einsatz der Überschriften h1–h4 und der Alt-Attribute,
• prozentualer Anteil der wichtigsten und ergänzenden Schlüsselbegriffe in der Grundform sowie deren Platzierung,

Es wurde außerdem eine Wettbewerbsanalyse im Hinblick auf den Aufbau des Angebots und die gewählte Stilistik durchgeführt.

Informationsarchitektur

Erarbeitung der Informationsarchitektur und Erstellung einer Darstellung des Nutzerflusses sowie der Inhalte der Unterseiten.

Die Informationsarchitektur wurde erstellt auf Grundlage von:

• allen bisher gesammelten Daten aus den Analyseprogrammen, dem Audit und vom Team,
• der durchgeführten Wettbewerbsanalyse,

Erwähnenswert ist die Umsetzung der UX-Prototypen sowie der UI-Designs im Programm figma.com. Dank Figma fand sich alles, woran wir arbeiteten, in einem einzigen Projekt wieder. Der Kunde hatte Einblick in den Arbeitsfortschritt und konnte jederzeit in Figma zu jedem Element des Projekts Kommentare hinterlassen.

Das Ergebnis der Arbeit an der neuen Seitenarchitektur war:

• die Verringerung der Anzahl der Unterseiten, ihre Reduzierung und Konsolidierung,
• die Beseitigung von Unterseiten des Typs Thin Content, d. h. solcher, die wenig Mehrwert bieten oder sehr kurz sind,
• die Verschlankung der Untermenü-Positionen des Angebots Industries auf nur die wichtigsten Branchen, d. h.: Energy&Utilities / Insurance / Healthcare,
• die Verringerung der Anzahl der Unterseiten im Menü Services und die Konsolidierung ihrer Inhalte zu einer neuen Struktur,
• die Herauslösung der Unterseite „Technology Expertise“ als eigene neue Position im Hauptmenü (die vorherige Version der Website enthielt diese Informationen in verschiedenen Unterseiten und einer separaten Unterseite Technology Stack)

Neues Angebot

Eine große Herausforderung war die Vorbereitung des neuen Angebots sowie der Unterseiten Industry und Services, die die wichtigsten Leistungen des Unternehmens enthalten. Diese Positionen wurden schließlich als Hauptpositionen des Menüs herausgezogen und klappen nur eine Ebene auf. Die vorherige Version der Website enthielt ein Untermenü auf dritter Ebene, aus dem der Nutzer erst das ihn interessierende Thema auswählen konnte.

Nutzeranalyse

Nach den Analysen haben wir zwei Nutzergruppen herausgearbeitet:

• den bewussten Nutzer, der die Website auf der Suche nach konkreten Produktgruppen besucht,
• den Nutzer, der eine Leistung nach Branchen sucht und der am Menüpunkt Industries interessiert sein wird und dort einen passenden Ort findet, um Informationen zu suchen,

UX-/UI-Design

Nach drei Iterationen des UX-Prototypings sowie Gesprächen mit dem Team (in denen die neuen Konzepte der Menüstruktur präsentiert wurden) konnten wir zur Erstellung der UX-Wireframes übergehen.

Das übergeordnete Ziel dieser Phase war:

• die Präsentation des Konzepts und der Ansichten der Unterseiten Services und Industries, ihre Verknüpfung mit Case Studies, der Startseite sowie untereinander. Die einzelnen Leistungen (Solutions) waren den entsprechenden Kategorien der Unterseite Industries zugeordnet. Die Position Energy&Utilities, die über das Menü Industries erreichbar ist, enthält im zweiten Bereich thematisch mit der Branche Energy&Utilities verbundene Lösungen (Solutions),
• die Strukturierung der Ansichten auf den Unterseiten und ihre Ergänzung um Inhalte.

Navigationsleiste

Für die Unterseiten Solutions und Services wurde eine zusätzliche Navigationsleiste gestaltet, die beim Scrollen unterhalb des Hauptmenüs verbleibt. Sie ermöglicht es dem Nutzer, sich zügig durch die Abschnitte innerhalb der jeweiligen Unterseite zu bewegen.

Die Phase des UX-Prototypings ermöglichte:

• die Gestaltung von Raum und Inhalten in den Wireframes
• die Bewertung der Interpretation der Inhalte durch die Nutzer (Raum, der für die Phase der Texterstellung vorgesehen war)
• die wichtigsten Informationen zu ordnen sowie Prioritäten und Abschnitte für die Unterseiten festzulegen
• die Darstellung der Navigationselemente, die für den Nutzer interaktiv sind

UI-Design

UI

Die Gestaltung der visuellen Ebene und der Interaktionen war sehr kreativ. Die erarbeitete Stilistik knüpft an die Marke des Unternehmens an. Es wurden die Farbgebung aus der Unternehmensmarke, individuelle Icons sowie Fotos aus der verfügbaren Codibly-Datenbank verwendet.

Interaktion

Einige Unterseiten der einzelnen Lösungen (Solutions) wurden mit interaktiven Bereichen ausgestattet, die auf Klick reagieren oder ihren Inhalt beim Scrollen der Unterseite verändern.

Style Guide

Die verschachtelte Struktur sowie die Vielzahl der Navigations- und interaktiven Elemente führten zu der Notwendigkeit, Regeln zu erstellen und alle grafischen Elemente in Form eines Style-Guide-Dokuments zu systematisieren. Der Style Guide ist ein Dokument, das die im Projekt eingesetzten Elemente beschreibt, d. h.: entsprechend ihre Größen, Abstände, die Zustände aktiver Elemente (z. B. Farbe) jedes Elements auf der Website, wie etwa: Überschrift, Button, Absatz oder Textabschnitte sowie Formularelemente.

Das Dokument ist bei größeren Projekten nützlich, bei denen es besonders wichtig ist, eine einheitliche Stilistik der Elemente im Rahmen der für sie festgelegten Regeln beizubehalten.

Entwicklung

Die Umsetzung der Website erfolgte:

• auf der Front-end-Ebene: individueller HTML-, CSS- und JS-Code, von uns im Framework Foundation geschrieben und über Gulp kompiliert. Die gesamte Programmierung lief über die Entwicklerplattform GitLab,
• auf der Back-end-Ebene: Implementierung und individuelle Integration des CMS WordPress unter Verwendung der dynamischen Felder ACFpro, wodurch vordefinierte Module genutzt werden können, mit denen der Administrator selbstständig weitere Abschnitte erstellen kann,

Zusätzlich wurde eine Implementierung der Google-Tag-Manager-Skripte durchgeführt, deren Vorteil

• das asynchrone Laden der Tags ist, wodurch die Seite schneller lädt
• die freie und eigenständige Möglichkeit, verschiedene zusätzliche Skripte einfach zu verwalten und zu implementieren (z. B. die Einbindung von Google Ads, SalesManago, Salesforce, Heatmaps usw.), was für die Marketingabteilung des Unternehmens wichtig war,