Umsetzung – Design – Webentwicklung
Es sollte eine neue Seite zu den Präventionsangeboten der Klinik gestaltet werden. Dabei war es besonders wichtig, das Thema Krebsvorsorge neutral und sachlich darzustellen. Auf gestalterischer Ebene gelang dies durch eine Bildsprache und entsprechende Motivik, die unemotional Methoden und Vorgehensweisen aufzeigt. Gleichzeitig wurde bei der Umsetzung darauf geachtet, gegenüber der eher technisch und medizinisch geprägten übrigen Seite einen gestalterischen und inhaltlichen Kontrast zu erzeugen, um den besonderen Charakter der Angebote zielgruppengerecht darzustellen. Zugleich galt es, Markenidentität und Kernwerte der Klinik auf das Präventionsangebot zu übertragen und darauf einzahlen zu lassen.
Wesentliches Ziel war es, die Seite zu den Präventionsangeboten der Klinik von den übrigen Inhalten der Webseite qualitativ und gestalterisch abzugrenzen und eine individuelle Schwerpunktsetzung gegenüber dem sonstigen Leistungsangebot der Klinik vorzunehmen. Die Alleinstellung der Präventionsangebote sollte so unterstützt und zielgruppengerecht aufbereitet werden. Zugleich galt es, gestalterisch und inhaltlich eine Verbindung zu den übrigen Angeboten der Klinik herzustellen und den Transfer wesentlicher Kernwerte der Marke auf die Präventionsangebote zu gewährleisten.
- Das komplette Layout wurde durch eine stimmigere Unterbringung der Bildelemente und eine bessere Aufteilung der Textblöcke verbessert. Auf Basis eines von uns erstellten Wireframes, konnten wir genau planen, wo welche Elemente platziert werden müssen. Am Anfang gefüllt mit Platzhaltern, kann das Wireframe später mit den fertigen Inhalten gefüllt werden.
- Wir haben uns für neutraleren / moderneren Bildinhalt entschieden, welcher aber nicht klinisch kühl wirkt. Die Bildsprache ist für den Nutzer deutlich ansprechender und themenbasierter geworden. Dies erleichtert es sofort, die Texte besser zu verstehen.
Um die neue Infoseite zu optimieren, musste die alte Seite mit ihren Inhalten zerlegt und genau auf ihre Nutzerfreundlichkeit überprüft werden. Das neue Wireframe und der darauf erstellte Prototyp der Website wurden mit Adobe XD gefertigt. Hier haben wir einige Dinge wie Typografie und eine passende Farbgebung beachtet, welche dem Aufbau der Webseite zugutekamen.
Um bei der Zielgruppe eine bessere User-Experience zu gewährleisten, wurden Personas angefertigt, die sie repräsentieren. Demografische Daten, Merkmale der Persona, Onlineverhalten, Identifikatoren und viele weitere Eigenschaften der Zielgruppen-Persona werden zusammengefasst. So kann die Zielgruppe enger geschnürt und die Webseitennutzung genau für diese Personas optimiert werden.
Die Navigation der Hufeland-Präventionsseite muss so einfach und sinnvoll wie möglich aufgebaut werden. Es durfte keine Sackgassen geben, damit der User-Flow nicht unterbrochen wird.
