23.07.2020

Der Weg zur neuen Website

Sagen Sie „Moin“ zur brandneuen Internetseite von Pavel Hörgeräte

Wir möchten Ihnen hiermit gerne einen kleinen Einblick in unsere Arbeit geben und Ihnen zeigen, wie wir bei der Umsetzung von Webprojekten vorgehen.

Eine frische digitale Brise sollte es sein! Wir durften das in Kiel ansässige Familien-Unternehmen Pavel Hörgeräte bei der umfänglichen Überarbeitung Ihrer Website begleiten. Unsere Aufgaben lagen dabei sowohl in der strategischen Beratung, Konzeption als auch in der technischen Realisierung der Internetseite auf Basis der neuesten Web-Standards.

Eine frische digitale Brise sollte es sein!

Nach einer kurzen Bestandsaufnahme und anhand des Kunden-Briefings wurde klar, dass die Internetpräsenz von Grund auf neu zu strukturieren ist.

Der Aufbau soll alle unterschiedlichen Nutzergruppen wie Bestandskunden und Interessenten gut durch die Seite und mit wenigen Klicks zum gewünschten Ziel führen. Die Gestaltung und das „Look & Feel“ der Website soll dabei eben jene Lebensfreude und auch Qualität widerspiegeln, die der Endkunde durch eine optimale Hörgeräte-Versorgung bei Pavel Hörgeräte erfährt.

Neue Website von Pavel Hörgeräte
Die neue Website von Pavel Hörgeräte

Die wichtigsten Highlights

Optimierung der Informationsarchitektur und Nutzerführung
Entwicklung und Implementierung eines konsistenten Design Systems
Kartenmodul mit Standort-Übersicht
Online-Hörtest
Quiz zur Leadgenerierung
Mikro-Animationen und -Interaktionen zur Steigerung der Nutzererfahrung

zur Website

Projekt-Planung und Konzeption

Eine gute Planung und vor allem aber auch der enge Austausch sowie die Kommunikation mit dem Kunden ist stets der erste Schritt und ein wichtiger Grundstein, um gemeinsam die richtige Richtung einzuschlagen und um das Projekt erfolgreich realisieren zu können.

Der enge Austausch und die Kommunikation mit dem Kunden ist stets der erste Schritt und ein wichtiger Grundstein.

Während der Konzeptionsphase wurde mit dem Kunden wurde zunächst abgestimmt, welche Inhalte die Seite auf jeden Fall abdecken soll und wie diese grob strukturiert werden können. Auf Basis dieser Informationsarchitektur wurde der potenzielle Nutzerfluss analysiert und daraufhin ein Navigationskonzept erstellt. Die Navigation wurde dabei an der Oberfläche sehr reduziert gehalten und dafür weiterführende Themen über Unterseiten mittels Querverweisen verlinkt.

Navikonzept der Website
Navikonzept der Website

Ebenfalls wurde festgelegt, wie neue Inhalte präsentiert werden (Texte, Bilder, Grafiken, ...) und welche neuen Funktionen (Online-Hörtest, Testhörer-Quiz, ...) unterstützend eingesetzt werden.

Seitenaufbau

Ausgehend von dem Navigationskonzept, wird nun der inhaltliche Aufbau der einzelnen Seiten definiert. Hierzu haben wir Wireframes (deutsch: „Drahtmodell“) erstellt. Beim sog. „wireframing“ werden in sehr technischer, reduzierter Darstellungsweise die Elemente und Inhalte einer Website geplant. Bei diesem „Rohbau“ der Seite tritt das Design quasi völlig in den Hintergrund. Ziel des Wireframes ist es anhand des potenziellen Nutzerflusses, die inhaltliche Struktur und den Aufbau einer Seite zu planen. Stark ausgestaltete Elemente oder Farben lenken in dieser Phase nur ab.

Wireframe von Pavel Hörgeräte

Design System

Eines der Projektziele war es zudem, ein Design System zu entwickeln, welches einen gewissen optisch-funktionalen Rahmen definiert, um so mehr Struktur in die Seite bringt. Ein Design System bildet die Grundlage für einen einheitlichen Markenauftritt. Es ist eine Sammlung von wiederverwendbaren Komponenten mit klaren Regel, Prinzipien und Einschränkungen für die Entwicklung verschiedener Produkte. In einem Design System werden die Marke, Farben, Tonalität, Typografie und Datenvisualisierung definiert.

Ein gutes Design System ist konsistent, sorgt für Orientierung und eine optimale Bedienbarkeit. Im Rahmen dieses Projektes sind wir nach den Grundlagen des „Atomic Design System“ vorgegangen. Wie der Name bereits erahnen lässt, wird hierbei im übertragenen Sinne vom Atom, dem kleinsten Teil, hin zu größeren „Atom-Einheiten“ wie Molekülen, Organismen etc. gearbeitet. Aus diesen vordefinierten Teilen wir dann der Seitenaufbau zusammengestellt. So greift man stets auf einen einheitlichen Baukasten zurück, der die Konsistenz der Gestaltung sicherstellt. (mehr dazu in englischer Sprache unter https://atomicdesign.bradfrost.com)

Ein gutes Design System ist konsistent, sorgt für Orientierung und eine optimale Bedienbarkeit.

Um uns zunächst einen klaren Überblick zu verschaffen, haben wir die bestehende Website in Ihre Einzelteile „zerlegt“ und den IST-Zustand erfasst. Auf der bestehenden Website wurden verschiedene Elemente für ein und denselben Zweck genutzt. So gab es beispielsweise für die Terminvereinbarung Buttons in verschiedensten Farben und Ausführungen – in hellrot, dann in grün oder auch in einem dezenten grau. Der Nutzer muss sich so quasi immer wieder neu orientieren, da Design und Funktion keinem klaren roten Faden folgen.

Das Design System von Pavel Hörgeräte
Das Design System von Pavel Hörgeräte

Alle vorhandenen Buttons, Icons, Headlines etc. von der bestehenden Website wurden dabei kritisch geprüft. Auf Basis der Marke Pavel Hörgeräte, den damit verbundenen Werten sowie Emotionen und in stetiger Abstimmung mit dem Kunden, wurden die einzelnen Elemente und Komponenten im Rahmen des Design Systems neu definiert. Klare und ausdrucksstarke Farben und einheitliche Design-Elemente sind das Ergebnis.

Muss noch etwas hinzugefügt – oder kann reduziert werden? Wie wirkt das Design auf den Nutzer? Spiegelt es das Unternehmen und die Marke optimal wieder? Erfüllt jedes Element seinen Sinn und Zweck? Fragen über Fragen die es in einem stetigen Entwicklungsprozess zu klären gilt. Immer auf das Ziel ausgerichtet, eine gute Basis für den weiteren Prozess zu schaffen.

Designphase

Nach Abschluss der vorherigen Prozessschritte wird nun alles zusammengefügt. Auf Basis der Navigationsstruktur, den Wireframes und dem Design System, haben wir Design-Entwürfe der Startseite und der verschiedenen Seitentypen angelegt.

als Blaupause für die technische Entwicklung

Ebenso wurden wichtige einzelne Elemente wie Icons oder Bereiche wie z.B. der Schnellkontakt im Detail ausgestaltet. Diese Design-Vorlagen geben dem Kunden dann einen realen Eindruck, wie die Website später aussehen wird und dienen ebenso als Blaupause für die technische Entwicklung.

Entwicklung

Nach letzter Feinabstimmung mit dem Kunden während der Designphase, geht das Projekt nun in die Webentwicklung. Die Website von Pavel Hörgeräte wurde dabei individuell mit modernen Webtechnologien und auf Basis des Content-Management-Systems Contao aufgebaut.

Ein Content-Management-System (CMS) ist eine Art Redaktionssystem hinter der Website, mit dessen Hilfe Inhalte erstellt, bearbeitet und organisiert werden. Das CMS bietet Anwendern ohne Programmierkenntnisse zudem eine grafische Oberfläche und Werkzeuge wie Dateiverwaltung oder ein einfach zu bedienender Texteditor. So hat der Kunde die Möglichkeit, eigene Inhalte wie Blogeinträge/Newsartikel hinzuzufügen oder eigenständig kleinere Änderungen an der Website vorzunehmen.

Um das Nutzererlebnis abzurunden und die Seite weiter aufzuwerten, wurden Mikroanimationen und -interaktionen entwickelt. Durch kleine Animationen und visuelle Feedbacks wird der Nutzer zum Entdecken neuer Inhalte und zur Interaktion mit der Seite angeregt.