Portfolio tags: UI/UX DESIGN

ENTWICKLUNG

Die WordPress-Site basiert auf einem vollständig benutzerdefinierten Theme. Zur Individualisierung haben wir spezielle Bibliotheken und Plugins verwendet und das Admin-Panel ganz auf die Bedürfnisse des Kunden angepasst. Die individuelle Entwicklung hat die Performance der Website trotz der hohen Datenlast durch die Medien bedeutend gesteigert.

ANIMATION & INTERACTION DESIGN

Für die Animationen haben wir mit der Greensock JavaScript Bibliothek gearbeitet, die es uns ermöglicht hat, verschiedene Animationen zu erstellen, wie z.B. den Parallax Scrolling Effekt, bei dem sich der Hintergrund einer Webseite langsamer bewegt als der Vordergrund. Dies schafft eine Illusion von Tiefe auf der Seite und gibt dem Inhalt einen 3D-Effekt, wenn der Nutzer nach unten scrollt.

Ausserdem haben wir «Isotope» verwendet, d.H. die Benutzereingaben werden in Echtzeit ausgewertet und die Daten entsprechend aktualisiert, ohne dass die Seite neu geladen werden muss. Ein Beispiel kann man auf der Teamseite beim Aktivieren/Deaktivieren des Weekend-Modus sehen.

Die ganze Website ist natürlich responsive und funktioniert auf allen modernen Browsern einwandfrei.

UX / UI

Methoden wie Card Sorting und A/B-Testing wurden eingesetzt, um die Seite neu zu strukturieren. Ziel war es, zu verstehen, wie Benutzer Informationen kategorisieren und so eine besser vorhersehbare User Interface (UI) für sie zu schaffen.

REDESIGN

Bis anhin musste ein schlanker Onepager als Informationsquelle hinhalten. Ziel der neuen Website war es, die verschiednen Services und Teilbereiche der Firma optimal darzustellen. Die Website präsentiert  das breitgefächerte Angebot inklusive interaktiven Werbemitteln. Zur optischen Auffrischung wurde mit Animationen und Übergängen gearbeitet.

VORSCHAU WERBEMITTEL

Das Hauptgeschäft (digitale Werbeanzeigen) wird auch auf der neuen Website stark gewichtet und ist in einem eigenen Bereich interaktiv erlebbar. Der Besucher kann in einer Liste aller verfügbaren Anzeigeformate stöbern und die Werbemittel dank dynamischer Einbindung direkt auf der Website erleben. Die Werbemittel können über WordPress einfach ausgetauscht werden.

EINFACHE HANDHABUNG DANK WORDPRESS

Der Aufbau der Website mithilfe von WordPress, ermöglicht es der ETH Zürich, den Unterhalt und das Nachtragen von Informationen grösstenteils eigenständig vorzunehmen. Das Menü bietet zudem eine gute Übersicht über die einzelnen Themenbereiche und Kontaktinformationen. Die Besucher gelangen von der zentralen Website auf alle wichtigen Links und Portale rund um den Anlass.

INHALT & STRUKTUR

Die Website bietet einen Überblick über das Programm des Symposium. Alle Speaker werden persönlich vorgestellt und auf deren Website verlinkt. Zudem werden Auszüge aus Themen vorgestellt, zu welchen ebenfalls weitere Informationen eingeblendet werden können. Die Anmeldung läuft über ein Event-Management Tool der ETH. Eine Liste von Unterkunftsmöglichkeiten ermöglicht es den Teilnehmenden, ein Hotelzimmer zum vergünstigten Tarif zu buchen.

EINFACHE HANDHABUNG DANK WORDPRESS

Da es sich bei dieser Website um eine Neuentwicklung handelt, haben wir uns für das CMS (Content Management System) WordPress entschieden. Es ermöglicht es dem Bearbeiter, inhaltliche Änderungen einfach vorzunehmen. Zudem ist das System für die Zukunft beliebig skalierbar. Dank sogenannten Plugins kann die Funktionalität der Website auch erweitert werden.

MENÜFÜHRUNG & STRUKTUR

Die Website nutzt eine Navigation, die dem Nutzer bereits im Menü weitere Informationen zur entsprechenden Seite angezeigt. Dies gibt dem Nutzer ein besseres Verständnis zu den Menüpunkten. Zudem unterstützen Bilder auf den Unterseiten den textlichen Inhalt und zeigen reale Anwendungsbereiche.

DESIGN MIT ADOBE XD

Für die Designvorschläge nutzen wir das Prototyping-Tool Adobe Experience Design. Es bietet eine Gestaltungsgrundlage für die Webentwicklung und ermöglicht es dem Kunden, bereits vor der aufwändigen Entwicklung, die Website inklusive Verlinkungen und Animationen zu erleben. Die Prototypen können einfach über einen Link mit dem Kunden geteilt werden. Im Online-Portal steht ein Chat zur Verfügung, über welchen man sich über Änderungswünsche austauschen kann.

MEHRSPRACHIGKEIT

Die Website ist in Deutsch und Englisch einsehbar. Die Zweisprachigkeit wird durch ein Plugin namens WPML ermöglicht. Die Erweiterung kann individuell konfiguriert werden und bietet dem Bearbeiter eine übersichtliche Benutzeroberfläche zur Bearbeitung und Übersetzung der Texte.

AUSGANGSLAGE

Die frühere Website wurde im Jahre 2014 entwickelt und hatte dementsprechende Schwächen in der Benutzerführung und der Darstellung auf mobilen Endgeräten.
Zudem war diese durch eine veraltete PHP Version technisch nicht mehr aktuell.

UMSETZUNG

Generell wurde die Website einladender und heller gestaltet. Grosse Bilder vermitteln Emotionen. Die Kommunikationsagentur miggroup hat zudem neue Keyvisuals für Website und Printprodukte gestaltet. Ziel war es, das Lächeln als neues Element auch auf der Website zu verwenden.

Die beiden Kernbereiche (Zahnbehandlung und Anti-Aging) werden farblich getrennt sowohl in den Keyvisuals als auch mithilfe der Schriftfarben. Mit neuen Farben, Formen und Bildern wirkt die Website deutlich frischer und moderner.

Auf der Seite «Zahnbehandlung» werden zusätzliche Informationen zu den spezifischen Bereichen mithilfe eines Akkordeon-Elements angezeigt.

Die Übersichtsseite für die Teammitglieder wurde ebenfalls überarbeitet und die verschiedenen Elemente wurden neu angeordnet. Die Mitarbeiter sind jeweils nach Tätigkeitsbereich sortiert und die Teambilder mit Name und Position versehen.

Zudem gestaltet sich das Bearbeiten von Inhalten sehr einfach und bietet eine hohe Flexibilität.

RESULTAT

Mithilfe des CMS WordPress bietet die Website eine hohe Flexibilität in der Bearbeitung von Inhalten. Zudem bietet das neue Erscheinungsbild eine bessere Übersicht und einen freundlichen Empfang für Besucher der Website. Die Bilder aus der Praxis machen den Besucher bereits auf der Website mit den Räumlichkeiten vertraut.

Wir bedanken uns ganz herzlich bei Mathias und Marianne Nydegger für die angenehme Zusammenarbeit.
point break Ihr kompetenter Partner aus St.Gallen. Gerne unterstützen wir Sie in den Bereichen Digital Strategie, Online Marketing und Webentwicklung.

BRANCHENSPEZIFISCHE ZIELGRUPPEN-ANSPRACHE

FOTOSHOOTING & B2B WEBANALYSE

Für die persönliche Vorstellung des BBA INNOVA Teams wurde ein Fotoshooting in Zusammenarbeit mit Thomas Knellwolf Photography durchgeführt.

Mittels Integration von Google Analytics sowie MultiView Visitor View ist eine erfolgsversprechende Web-Analyse sichergestellt.