INAIRVATION Website Case Study

Ein neuer online Markenauftritt

INAIRVATION ist ein Gemeinschaftsunternehmen zwischen Lufthansa Technik und F/List, einem führenden Hersteller von Luxus-Innenausstattungen aus Österreich.

Zusammen arbeiten sie an exklusiven Premium-Kabinen für Business- und Privatjets und verbinden damit einzigartiges Design mit modernster Technik.

Podcast Cover und Player Design

01

Hintergrund, Aufgaben und Ziele

Dieses Projekt entstand in Kooperation mit Matthias Hamann

Unsere Aufgabe bestand darin, zwei unterschiedliche Geschäftsbereiche in einer neuen Website zusammenzuführen. Diese sollte im Kern verschiedene Zielgruppen ansprechen, aber trotzdem als ein Produkt von INAIRVATION gesehen werden.

Der neue Auftritt musste ihr Konzept klar und verständlich rüberbringen und Vertrauen zu neuen Kunden aufbauen. Zudem wollten sie sich stärker im Web positionieren, den Bekanntheitsgrad steigern und besser über Suchmaschinen gefunden werden.

Zwei Geschäftsbereiche vereint in einem Online-Auftritt

Retrofit

Der Retrofit Bereich bietet Gesamtlösungen für hochwertige Kabinenausstattungen und verbindet dabei neueste Technologie mit perfekt verarbeiteten Interieurkomponenten.
Zielgruppe: Completion Center, Flugzeugbesitzer, Flugzeugbetreiber und Unternehmen, die Privatjets vermieten.

CHAIR

CHAIR ist eine revolutionäre Plattform für Flugzeugsitze. Sie bietet Designern die Möglichkeit, Konfigurationen flexibel zu gestalten und Sitze modular und individuell anzupassen. Das bedeutet optimale Funktionalität und Luxus für Flugzeugbesitzer.
Zielgruppe: Designer, Completion Center und Repräsentanten von Jet- und Jachtbesitzern.

Website Unterteilung Geschäftsbereiche und Unterseiten
Optional sollte die Website in Zukunft auch um einen dritten Geschäftsbereich erweitert werden können.
iPhone X Teaser Website Mobile Version

02

Ein digitales Erlebnis schaffen

Da das Konzept von INAIRVATION einzigartig ist, konnten wir es auch dementsprechend „neu“ kommunizieren. Es musste auffallend anders sein und sich gezielt von Wettbewerbern unterscheiden.

Eine umfangreiche Konkurrenzanalyse bestätigte, dass zu wenige Unternehmen ihre Qualität an Produkten und Dienstleistungen über einen ebenso hochwertigen Internetauftritt präsentierten. Keiner hebte sich so richtig von anderen ab.

Auch die ursprüngliche Website von INAIRVATION entsprach nicht dem Premium-Angebot ihrer Marke. Unsere Aufgabe war es, genau das zu ändern und mit neuen Inhalten ein digitales Erlebnis zu formen.

iPhone X Website Galerie mit Flugzeug Holzboden

Gutes Design spielt nicht nur in ihrem Angebot eine wichtige Rolle. Das Konzept und die Idee musste ebenso hochwertig präsentiert werden. Eine Website aufzubauen, die modern, verständlich und zeitgemäßes funktionierte, war die Grundlage für dieses Projekt.

Das Ziel: Einen frischen Weg einschlagen.

INAIRVATION sollte mit einem Startup-Charakter neu und modern rüberkommen, aber trotzdem die Sicherheit von Lufthansa Technik durchscheinen lassen. Deshalb durfte das Auftreten nicht zu Premium sein, trotzdem aber genau das in Bild und Inhalt widerspiegeln.

Für mich und das Layout hieß es:

„Der Grundaufbau muss klar strukturiert sein. Jeder Besucher muss seinen vorgesehenen Bereich schnell und einfach finden. Beim eigentlichen Layout kannst du dich austoben und auch etwas Neues ausprobieren.“

iPhone X Website Ansicht Über Uns Seite Vorschau

03

Die Ideen- und Konzeptphase

Zielgruppenorientiertes Storytelling als strategische Grundlage

Da wir mit dem Projekt einen straffen Zeitplan verfolgten, musste das Website Design und der Inhalt parallel erfolgen. Um Zeit zu sparen und die Textagentur früh mit einbinden zu können, fingen wir vorerst an, Ideen in einem groben Aufbau (Wireframes) festzuhalten und Inhalte auf einzelne Seiten zu verteilen. Diese durchdachten wir immer wieder erneut, was das Konzept auf ein sehr spezifisches Level brachte. Das half uns und den Textern gut zu verstehen, welche Aussagen und Inhalte an bestimmten Stellen kommuniziert werden mussten.

Auch für mich war das im Anschluss die perfekte Grundlage, um mit dem Design zu starten. Ich wusste genau, was auf welcher Seite zu sehen sein musste und wie sich verschiedene Elemente zueinander verhalten. Dadurch konnte ich mich in der Designphase komplett auf die Gestaltung konzentrieren.

Wireframe Konzept Hauptseite
Wireframe Konzept Über Uns Seite
Wireframe Konzept Website Startseite
Wireframes Konzept Website About Seite
Wireframes Konzept Website Features
Wireframes Konzept Website Intro Splitscreen
Wireframes Konzept Website Partner Seite
Wireframes Konzept Website Haupt-Startseite

04

Das Layout

Kühne Typografie, starke Bilder und eine minimale Eleganz

 

Ebenen flach übereinander
Pfeil nach unten
Ebenen mit Schatten übereinander

Unsere Aufgabe war es, zwei unterschiedliche Bereiche auf einer Website zu vereinen und diese „aus einem Guss” erscheinen zu lassen. Dafür ist Design genau das richtige Werkzeug.

Ich suchte nach einem Stilmittel, das durchgängig auf der ganzen Website verwendet werden konnte, um so die Bereiche „Retrofit” und „CHAIR” gestalterisch zusammenzuführen.

Webseiten werden häufig sehr „flach“ gestaltet und vom Betrachter eher als eine Ebene auf dem Bildschirm gesehen. Ich wollte aber genau das Gegenteil bewirken und eine gewisse Tiefe in die Seite integrieren.
Ich verwendete deshalb Schattierungen um die Hierarchie von Elementen zu kennzeichnen. Das hilft dem Seitenbesucher leichter zu verstehen, welches Objekt über einem anderen liegt. So konnte ich zum Beispiel Bilder von Hintergrundflächen und Texten abheben und dem Betrachter näher bringen.

Website Tablet Version Features Vorschau
Website Slideshow
Bilder Slideshow, die auf mehreren Unterseiten eingesetzt wird.
Website Homepage
Website Features Vorschau

Durch die Überlagerung von Bild, Text und Hintergrundflächen, bekommt die Seite eine gewisse Tiefe. Leichte Schattierungen kennzeichnen zudem die Hierarchie von Elementen.

Website Partnerseite

05

Eine neue Designsprache etablieren

Die Farbumgebung und die Schriftzüge passte ich an bestehende Markenrichtlinien und vorhandene Styleguides an.

Das ganze Layout wurde primär für die Desktopansicht konzipiert, ist aber voll anpassungsfähig. Das heisst, alle Seiten und auch die Navigationsstruktur ändern sich zwischen Mobile, Tablet und Desktop. Somit kann jeder Benutzer je nach Gerätetyp und -verhalten bedient werden.

Responsive Website iphone Variante
Inairvation Website Mobile Ansicht
Responsive Website Mobile Version
Responsive Website Galerie Vorschau

06

Das gewöhnliche Raster brechen

Ein Seitenraster hilft dem Layout, Elemente konsistent aneinander orientieren zu können. Da die Website aber etwas „Eigenes” und „Modernes” bekommen sollte, versuchte ich das gewöhnliche Raster etwas zu brechen. Es sollte nicht wie sonst, alles perfekt bündig und gradlinig sein. Elemente konnten im Raum „verteilt“ platziert werden. Trotzdem durfte es für den Betrachter nicht durcheinander wirken.

Website Homepage
Website News/Blogbereich

Desktop-Ansicht: Links ein Ausschnitt der Startseite auf der alle Unterseiten kurz ankündigt werden und rechts der Newsbereich, der Neuigkeiten ankündigt und gleichzeitig auch für Suchmaschinen regelmäßig frischen Content liefert.

Das Hauptaugenmerk der Website lag auf einer gesunden Balance zwischen Design, starkem Inhalt und Funktionalität. Mit dieser Kombination schafften wir einen Internetauftritt, der die unterschiedlichen Geschäftsbereiche von INAIRVATION vereint in einer Marke zusammenführte.

Die Website repräsentiert heute ihr gesamtes Angebot und bietet alle relevanten Informationen zugeschnitten auf die definierte Zielgruppe.

Projekt Details

Arbeit: UX Strategie und Responsive Website Design
Kunde: INAIRVATION
Jahr: 2017
Vorschau: inairvation.aero
Website Smartphone Vorschau
Website Smartphone Slideshow

Interessiert an einer Zusammenarbeit?

Projektanfrage senden