Projet
Refaire le design du processus de réservation sur mobile afin d'augmenter l'engagement des utilisateurs et offrir une expérience plus immersive.
Contexte
J'ai eu l'idée de refaire le design de cette section sur mobile lorsque je naviguais sur le site de KLM pour acheter un billet d'avion. Je n'ai pas eu une superbe expérience et je pouvais facilement voir les points à améliorer en termes d'éléments d'interface et d'expérience utilisateur. Je voulais concevoir une expérience que j'aurais aimé utiliser moi-même.
Ancienne version mobile
Nouveau parcours utilisateur
Nouveau design
L'image de fond sert deux objectifs :
1) Montrer clairement le nom de la compagnie et renforcer la marque;
2) Mettre l'utilisateur dans un contexte d'aviation.
La page d'accueil affiche clairement, en une seule phrase, ce sur quoi porte la section. Seuls deux appels à l'action présentés à l'utilisateur.
1) Montrer clairement le nom de la compagnie et renforcer la marque;
2) Mettre l'utilisateur dans un contexte d'aviation.
La page d'accueil affiche clairement, en une seule phrase, ce sur quoi porte la section. Seuls deux appels à l'action présentés à l'utilisateur.
Sur la page de réclamation, l'utilisateur peut choisir parmi cinq catégories clairement affichées.
Le processus d'inscription est divisé en quatre sections pour une découverte progressive.
À chaque étape, l'icône de l'avion saute d'une destination à l'autre ce qui ajoute une belle touche ludique qui colle au thème de l'aviation.
À chaque étape, l'icône de l'avion saute d'une destination à l'autre ce qui ajoute une belle touche ludique qui colle au thème de l'aviation.
Cette page s'affiche après que l'utilisateur a choisi une catégorie pour réclamer des miles. Le nombre de miles que coûte chaque objet est clairement affiché en orange. L'appel à l'action est également très clair. L'utilisateur peut cliquer sur la photo pour voir l'objet en gros.
Si l'utilisateur n'a pas assez de miles pour acheter un objet, le bouton Réclamer est masqué et montre le nombre de miles manquants ainsi que l'action Acheter. Cela évite à l'utilisateur de faire le calcul.
Si l'utilisateur n'a pas assez de miles pour acheter un objet, le bouton Réclamer est masqué et montre le nombre de miles manquants ainsi que l'action Acheter. Cela évite à l'utilisateur de faire le calcul.
Étant donné que FlyingBlue gravite autour l'accumulation, la gestion et la réclamation de miles, le nombre de miles est affiché en gros caractères oranges dans toute la section.
L'objet le plus cher que l'utilisateur peut s'offrir est toujours affiché en gros caractères au moment de la connexion. Comme principe UX, il est bien de laisser l'application proposer des choix à l'utilisateur pour potentiellement éviter des recherches.
L'objet le plus cher que l'utilisateur peut s'offrir est toujours affiché en gros caractères au moment de la connexion. Comme principe UX, il est bien de laisser l'application proposer des choix à l'utilisateur pour potentiellement éviter des recherches.
Animations
Impact
Comme il s'agissait d'un projet personnel, j'ai présenté l'ancienne et la nouvelle version à un groupe de designers UX lors d'une rencontre mensuelle sur le design. Les commentaires ont été unanimement positifs. Les designers ont apprécié la proéminence des boutons, la diminution de la surcharge cognitive, la mise en évidence des informations importantes, l'impression d'être sur un site lié à l'aviation, les animations, etc.
Réflexion
Les commentaires des designers UX ont été extrêmement utiles et rassurants. Lors de la refonte de l'interface, je voulais vraiment que l'utilisateur ait l'impression d'être sur un site Web lié à l'aviation. Les expériences immersives contribuent grandement à accroître l'engagement des utilisateurs. Il était également important de désencombrer l'interface utilisateur et de réduire la surcharge cognitive lors du processus d'inscription.
Autres projets
