Ontwerpen van 'KLM Inspire', een mobiele interface en interacties voor een verbeterde vliegreiservaring in het vliegtuig

Geschreven door Dennis Ulijn in november 2021

Bij de opdracht voor KLM stond de dienstverlening van KLM centraal. Voor dit vak was het de vraag hoe de dienstverlening van KLM in het vliegtuig kon worden toegepast nu het In-Flight Entertainment en de mobiele apparaten van de gebruikers verbonden kunnen zijn met het internet.

Concept: KLM Inspire

Tijdens de vlucht kunnen reizigers verbinden met WiFi. Naast hun eigen apps voor messaging, social media en muziek- en video-streamingdiensten, kunnen zij zich in de KLM-app vermaken op hun eigen mobiele telefoon.

Concept 1: KLM Inspire. De vlucht in beeld
Concept 1: KLM Inspire. De vlucht in beeld

Het concept biedt functionaliteit die aansluit op de context van de reis die de reiziger. De app weet waar de reiziger naartoe vliegt, en kan informatie geven over deze route en de bestemming. Deze informatie is gedeeltelijk reeds bij KLM aanwezig in de Inspire-API.

Gebruikers, de typische stedentrippers (doelgroep), kunnen informatie opvragen over de landmarks waar ze over vliegen, en op deze manier een wereldreis maken, nog voor ze aangekomen zijn op hun vakantieplek. Hoe kan KLM deze ontdekkingsreis faciliteren?

Storyboarden

Het verwerken van het concept in een storyboard zorgr ervoor dat het concept tastbaarder wordt en de context van de gebruikers en zijn belangrijkste taken duidelijker is.

concept-weergave van het eerste concept en storyboarden van de context en gebruikersacties
concept-weergave van het eerste concept en storyboarden van de context en gebruikersacties

Interacties en patterns

Door de doelen van de gebruiker als actieve acties te benoemen, kunnen betekenisvolle interacties worden ontworpen, die aansluiten op de mogelijkheden van het apparaat en manieren van interactie die de gebruiker gewend is in andere apps.

Via alternatieve interacties heb ik verschillende methodes gezocht voor het bekijken van verschillende, verdiepende lagen van de interface
Via alternatieve interacties heb ik verschillende methodes gezocht voor het bekijken van verschillende, verdiepende lagen van de interface

Tweede iteratie: digitalisatie van het concept

Om het concept overzichtelijker te maken was ik tot het inzicht gekomen dat het beter is de vluchtlijn van de zijkant te bekijken. Hierdoor is er maar een as, van links naar rechts, waar de gebruiker door kon swipen. Dit maakte het concept concreter en gerichter.

Digitale vluchtlijn van de zijkant bekeken
Digitale vluchtlijn van de zijkant bekeken

Eerste prototype

Vanuit deze theorie heb ik een reisoverzicht ontworpen in Adobe XD, waarbij de gebruiker op landmarks kan tikken om hier meer informatie over te lezen.

Het concept van de vluchtlijn gedigitaliseerd in Adobe XD
Het concept van de vluchtlijn gedigitaliseerd in Adobe XD

Interactieflow

In een interactieflow is zichtbaar welke schermen er zijn en door welke elementen zij met elkaar verbonden zijn. Gebruikers hebben door ervaringen uit het verleden een model gecreƫerd van hoe ze denken dat iets werkt. Dit proces helpt bij het maken, onthouden of herkennen van patronen bij gebruik van fysieke of digitale object, of bediening van terugkerende elementen in digitale interfaces. Door het gedrag van deze elementen herkenbaar, voorspelbaar en in overeenkomst met natuurwetten te houden, sluit het ontwerp aan op deze mentale modellen.

interactieflow: weergave van hoe schermen met elkaar verbonden zijn
interactieflow: weergave van hoe schermen met elkaar verbonden zijn

Verder schetsen

Om hier verder te denken over mogelijk interactiemogelijkheden heb ik geprobeerd te blijven schetsen, ook al waren alle elementen al digitaal aanwezig.

Schetsen waarbij ik heb onderzocht hoe interacties kunnen aansluiten op de beleving en verwachting van de gebruiker
Schetsen waarbij ik heb onderzocht hoe interacties kunnen aansluiten op de beleving en verwachting van de gebruiker

Experience prototype

Door het ontwerp in XD om te zetten naar een Protopie-prototype kon ik microanimaties toevoegen. Hiermee werd het een high fidelity prototype wat ik kon gaan testen met gebruikers.

Interactief prototype: Protopie-schermen van het eXperience prototype
Interactief prototype: Protopie-schermen van het eXperience prototype

Interactieflow van het eXperience prototype
Interactieflow van het eXperience prototype

Field Trial

Ik heb het experience prototype met 3 gebruikers getest. Aan de hand van deze test kon ik vaststellen of mijn conclusies gedurende de ontwikkelingen klopten, en welke onderdelen moesten worden aangepast om het prototype aan te laten sluiten op de verwachtingen van gebruikers.

Artwork restyle

Om het Experience Prototype aan te laten sluiten op de ontwerpen huisstijl van KLM, heb ik onderzoek gedaan naar de stijl en het kleurgebruik in de KLM-app. Deze informatie heb ik gebruikt om de grafische stijl van mijn experience prototype aan te scherpen.

Artwork onderzoek en Redesign waardoor het concept beter in de app van KLM past
Artwork onderzoek en Redesign waardoor het concept beter in de app van KLM past

eXperience protopie Prototype

Dit artwork is toegepast in Protopie. Uit de field trial bleek ook dat gebruikers niet automatisch op de verschillende landmarks drukten, waarvoor ik heb gezorgd dat het overzicht bij het starten van de functie naar de huidige locatie schuift en hier een melding te lezen is over de functionaliteit.


Het uiteindelijke eXperience prototype met vernieuwde artwork

Aanverwante Artikelen