Projet
Comme projet personnel, je voulais refaire le design de la version mobile de la section KLM Flying Blue.
Défis
Épurer au maximum la page d'accueil de la section Flying Blue car elle présente trop de liens et d'informations redondantes.
Donner à l'utilisateur l'impression d'être sur un site lié à l'aviation.
Ajouter une touche ludique sans trop charger l'interface.
Résultats
Comme utilisateur, j'aurais aimé utiliser cette application beaucoup plus que l'ancienne version.
J'ai passé beaucoup de temps à penser aux animations et à rendre l'expérience plus vivante.
J'ai passé beaucoup de temps à penser aux animations et à rendre l'expérience plus vivante.
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
Autres projets
