Puzzle ITC

Vom Briefing zum Design

Um Anforderungen, Wünsche und Herausforderungen der neuen Webseite von Beginn an umfassend zu erfassen, waren ein erweitertes Briefing sowie anschliessende Workshops mit den verschiedenen Stakeholdern essenziell. Dabei konnten bereits erste wertvolle Erkenntnisse und Daten gesammelt werden, die den Grundstein für die finale Website legten.

Marktanalyse, Best Practices & datengestützte Insights

Für eine noch tiefere Analyse führten wir eine umfassende Marktanalyse der Konkurrenz durch. Dabei konzentrierten wir uns auf Inhaltsstruktur, Benutzerführung und die visuelle Darstellung der Inhalte. Neben der direkten Konkurrenz betrachteten wir auch lokal und thematisch weiter entfernte Webseiten, um ein möglichst breites Spektrum an Inspirationen und Ideen zu gewinnen.

Ergänzt wurde die Analyse durch die Auswertung der Echtzeitdaten der bisherigen Webseite mit Matomo (ein Tool zur Erfassung und Auswertung von Nutzerverhalten). So stellten wir sicher, dass wichtige Themen und das bestehende Ranking in der neuen Struktur erhalten bleiben und nicht verloren gehen.

Über die User Journey zur Sitemap und Inhaltsstruktur

Aus den gesammelten Daten konnten wir in der Modellierungsphase verschiedene User-Journeys entwickeln, um die potenziellen Anforderungen der Besucher besser zu verstehen. Dadurch ließen sich unterschiedliche Szenarien in den wichtigsten Bereichen gezielt durchspielen.

Auf Basis der gewonnenen Erkenntnisse entwickelten wir gemeinsam mit Puzzle die neue Sitemap. Diese sollte in erster Linie das neu definierte Angebot übersichtlich und klar strukturieren, zugleich aber auch Bereiche wie Jobs, Referenzen und „Über uns“ integrieren. Das Wording war dabei besonders wichtig: Mithilfe einer Keywordanalyse stellten wir sicher, dass sowohl Google als auch die Besucher die teilweise technischen Begriffe der Angebote verstehen und diese zielgruppengerecht wiedergeben.

Auf Grundlage der Sitemap entwickelten wir die Inhaltsstruktur und bestimmten die Themen der einzelnen Seiten. Dabei legten wir besonderen Wert auf einen klaren und vertrauensvollen Aufbau: Übersichtlichkeit zu Beginn und eine vertiefende Behandlung der Themen beim Weiterlesen. Zudem fassten wir den Ansatz, für passende Call-to-Actions (Handlungsaufforderungen) die jeweils richtigen Ansprechpartner darzustellen. Sie sollen als Experten verstärkt mit eigenen Blogbeiträgen, Referenzen und als direkte Kontaktpersonen stärker in den Fokus der Webseite rücken.

Mit dem Wireframe die Erkenntnisse visualisieren

Um die Daten greifbar zu machen, entwickelten wir ein Wireframe. Es visualisierte die Inhaltsstruktur und das Wording. Außerdem gab es einen ersten Überblick über den Umfang der neuen Webseite. Das Wireframe diente als Diskussionsgrundlage im Projektteam. Dabei zeigte es die technischen Anforderungen an Module, Inhaltstypen, Filter und weiteren Elementen auf.

Das Design – die Visualisierung der Idee

Als krönender Abschluss gestalteten wir, basierend auf dem Corporate Design, das Design der Webseite. Dabei legten wir Wert auf eine moderne Optik sowie eine klare und übersichtliche Struktur mit viel Weissraum und klar abgegrenzten Sektionen. Die Webseite sollte nicht überladen wirken, sondern einen durchgehenden roten Faden erkennen lassen.

Webentwicklung mit WordPress

Als CMS wurde von Beginn an WordPress gewählt, da es der Redaktion bereits vertraut war. Die Inhaltselemente sind modular aufgebaut, was eine flexible und wiederverwendbare Struktur ermöglicht.

Mehrstufiges Menü für eine vertiefende Navigation

Um die Angebote übersichtlich und dennoch umfassend zugänglich zu machen, entschieden wir uns für ein mehrstufiges Megamenü. Dabei wird zunächst nur die oberste Navigationsebene angezeigt. Besuchende können je nach Bedarf tiefer in die Struktur eintauchen oder auf höherer Flughöhe bleiben.

Verschiedene Inhaltstypen für zentrale Datenerfassung

Die zentrale Erfassung von Daten ermöglicht eine einfache Verwaltung. Elemente aus den zentralen Inhaltspools können dann gezielt per Modul in gewünschter Anzahl ausgegeben, nach Kategorien gefiltert und nachgeladen werden.

Success Stories

Erfolgsgeschichten zeigen die Bandbreite der realisierten Projekte. Sie schaffen Vertrauen und geben Einblick in konkrete Herausforderungen und Lösungen. Wir entschieden uns im Design dafür, ihnen in der Übersicht besonders viel Platz einzuräumen und sie mit stilistisch passenden Elementen einzurahmen. Auch die Detailseite soll für kleinere wie auch grössere Referenzen die richtigen Möglichkeiten bieten und die erarbeiteten Lösungen mit den Angeboten, Tools und Experten verknüpfen.

Blog

Der Blog dient als Plattform für Fachwissen, Meinungen und Einblicke in den Arbeitsalltag bei Puzzle. Beiträge von Mitarbeitenden stärken die Expertenposition und machen die Marke persönlich erlebbar. Auch wollten wir einzelne Mitarbeiter im Zusammenhang mit ihrem Fachwissen zeigen, was im Design eine geeignete Darstellung erforderte.

Eine besondere Herausforderung war die korrekte Darstellung von Code-Blöcken in verschiedensten Programmiersprachen. Zudem sollten Beiträge mit mehreren Autor:innen auch entsprechend gekennzeichnet und dargestellt werden.

Events

Puzzle ITC lebt und organisiert viele Events an verschiedenen Standorten. Auch kommende Events sollten als Rückblick weiterhin zugänglich bleiben. Ausserdem sollen sich interessierte über Formulare einfach anmelden können.

Trainings

Die einzelnen Trainingsangebote werden teilweise von Puzzle selbst oder über andere Plattformen angeboten. Je nachdem leitet der Teaser auf das externe Angebot oder eine integrierte Detailseite. Auch hier werden zur Stärkung des Kurses Experten und Referenzen gezeigt.

Tools

Puzzle baut auf Open-Source Lösungen und möchte diese auch in verschiedenen Kontexten zeigen. So wird die technische Kompetenz und Vielfältigkeit sichtbar. Die Tools können wahlweise als Slider oder grössere „Cloud“ angezeigt werden.

Team

Da die Member von Puzzle Expert:innen auf ihrem Gebiet sind, soll ihre Fachkompetenz auch auf der Webseite sichtbar werden. So sieht man auf der Detailseite eines Mitarbeiters nicht nur die üblichen Angaben, sondern auch Zertifizierungen, verfassten Blogbeiträgen und Beteiligungen an Success Stories. Die Mitarbeiter können zudem als Ansprechpersonen bei den Call to Action Modulen ausgewählt werden.

Jobs

Geeignete Fachkräfte zu finden, ist in der IT-Branche eine echte Herausforderung. Um dem zu begegnen, zeigt Puzzle ITC im Karrierebereich nicht nur offene Stellen, sondern auch Einblicke in den Arbeitsalltag – mit Benefits, Bildern, Zahlen und der Unternehmensvision. Die Stellenausschreibungen präsentieren zudem potenzielle zukünftige Kolleg:innen samt ihren Blogbeiträgen – als authentischer Anreiz, Teil des Teams zu werden.

Suche & Filter

Viele dieser Inhaltstypen sind durchsuch- und filterbar. Bei den Filtern achteten wir darauf, dass keine leeren Ergebnislisten geben würde. Daher filtern sich die Filter gegenseitig.

Auch die Suche wurde gezielt optimiert: Neben einer sauberen Indexierung war wichtig, dass die Ergebnisse thematisch sortiert und im passenden Format dargestellt werden. Nutzer:innen können dabei bequem zwischen Seiten, Blogbeiträgen, Events und Trainings wechseln.

Weiterentwicklung und Support

Seit dem Go-Live ist bereits vieles weiterentwickelt worden. Wir lieben Webseiten, die nicht stehen bleiben, sondern sich technisch und inhaltlich weiterentwickeln.