Christopher GramCG
Alle Projekte

Wintershall
Dea

UX-Prinzipien und Spezialkomponenten für die neue Corporate Website nach der Fusion von Wintershall und DEA.

Kartenkomponente im Vollbild mit geöffnetem Länderporträt Libyen
Kunde
Wintershall Dea
Rolle
UX/UI Designer
Jahr
2015-2018
Disziplinen
UX-Prinzipien, Interaction Design, Komponenten, Prototyping
Aufgabe
UX-Prinzipien für ein herausragendes Markenerlebnis definieren und spezielle Komponenten wie eine Kartenkomponente und eine Inpage-Navigation entwickeln und gestalten.

Zwei Unternehmen, eine neue Website

Wintershall Dea ist Europas führendes unabhängiges Gas- und Ölunternehmen und in 13 Ländern aktiv. Nach der Fusion von Wintershall und DEA brauchte das Unternehmen eine neue Corporate Website.

Meine Aufgabe: Prinzipien festlegen, wie sich die Website verhält, und Komponenten entwickeln, die es im Standardbaukasten nicht gab.

Vom Markenwert zum Verhalten

Die UX-Prinzipien habe ich aus den Produkten und Markenwerten des Unternehmens abgeleitet. Sie sind im Playbook zusammengefasst und dienen UI-Designern und Entwicklern als Leitfaden dafür, wie sich die Website bewegt und reagiert.

Der Weg dorthin: Research zu Markenwerten wie Technologie, Zuverlässigkeit, Nachhaltigkeit und Effizienz sowie zu den Produkten, daraus vier Prinzipien, ihre Übereinstimmung mit den Werten und schließlich konkrete Anwendungen mit Do's und Don'ts.

Die vier UX-Prinzipien als farbige Karten
Vier Prinzipien: Organic & Flowing, Connected Levels, Responsible Accuracy, Shift in Focus
Titelseite des Wintershall Dea PlaybooksResearch zu Markenwerten und ProduktenÜbereinstimmung der Prinzipien mit den MarkenwertenAbleitung der Prinzipien für globale und lokale AnwendungenDo's: organische und vertikale Bewegungen, SeitenübergängeDo's: Ein- und Ausblenden, Unschärfe, SkalierungDo's: Tiefe, Ebenen, Off-CanvasGanzheitliches Markenprinzip im digitalen ErlebnisDon'ts: horizontale Bewegungen, Wechsel ohne Animation
Aus dem Playbook: von der Recherche bis zu Do's und Don'ts

Alle Felder auf einen Blick

Rechte und Vergabeprozesse für Gas- und Ölfelder sind langwierig und schwer zu überblicken. Auf Basis von ESRI habe ich eine Karte entwickelt, auf der alle Felder sichtbar sind und die zu jedem Feld Detailinformationen zeigt.

Die Karte sitzt als kompakte Komponente in der Seite und öffnet sich per Klick im Vollbild. Dort lassen sich Länder und Lizenzgebiete auswählen, filtern und im Detail ansehen, zum Beispiel Betreiber, Lizenzpartner und Anteile.

Kartenkomponente eingebettet in eine InhaltsseiteKartenkomponente im Hover-ZustandVollbildkarte mit eingeklappter InfospalteSpezialansicht Norwegen mit LizenzgebietenDetailinformationen zu einem Lizenzgebiet in NorwegenFilter für Lizenzgebiete in der Norwegenansicht
Zustände der Kartenkomponente, von der Einbettung bis zur Detailansicht

Orientierung auf langen Seiten

Für lange Inhaltsseiten habe ich eine Inpage-Navigation entwickelt, die am linken Rand im Inhaltsbereich mitwandert. Das Verhalten habe ich als Prototyp ausgearbeitet.

Standbild aus dem Prototyp der Inpage-Navigation auf der Seite Investor Relations
Standbild aus dem Prototyp

UX und UI

Ich habe die UX-Prinzipien entwickelt und die Karten- und Navigationskomponenten konzipiert, gestaltet und als Prototyp umgesetzt. Werkzeuge: Sketch, Principle und inVision.