Project
Redesigning the booking flow on mobile to increase user engagement and provide a more enjoyable experience.
Context
I had the idea of redesigning this section on mobile when I was browsing KLM Website to buy a place ticket. I didn't have a great experience and I could easily see the points to improve in terms of interface elements and user experience. I wanted to design an experience that I would have enjoyed using myself.
Old mobile version
New user path
New design
The background image serves two purposes :
1) Clearly show the company’s name and reinforce the brand;
2) Put the user into the context of flying. The landing page clearly displays, in a short sentence, what the section is about. Only two choices are presented to the user.
1) Clearly show the company’s name and reinforce the brand;
2) Put the user into the context of flying. The landing page clearly displays, in a short sentence, what the section is about. Only two choices are presented to the user.
On the Redeem page, the user can choose between five categories, clearly displayed.
The registration process is broken down into four sections for a progressive disclosure.
The icon of the plane jumping from one step to the next is a nice touch that sticks to the theme but also tells the user where she is in the process. It also adds a sense of gamification to the experience.
The icon of the plane jumping from one step to the next is a nice touch that sticks to the theme but also tells the user where she is in the process. It also adds a sense of gamification to the experience.
This page is displayed after the user has chosen a category where to redeem her miles. The number of miles that each item costs is clearly displayed in orange. The call-to-action button is also clear. The user can click on the item to see it bigger.
If the user doesn’t have sufficient miles to buy the item, the number of miles required is displayed in orange and the Redeem button changes to a Buy button displaying the number of miles left. Don’t let the user calculates the miles.
If the user doesn’t have sufficient miles to buy the item, the number of miles required is displayed in orange and the Redeem button changes to a Buy button displaying the number of miles left. Don’t let the user calculates the miles.
Since FlyingBlue revolves only around accumulating, managing and redeeming miles, the number of miles is displayed in large orange font throughout the site. The most expensive item that the user can afford is always displayed big when she logs in.
Animations
Impact
Since this was a personal project, I presented the both the old and the new version to a group of designers at a monthly UX meeting.
The comments were unanimously positive. They liked how prominent call-to-actions were, less cognitive overload, the highlighting of important information, the feeling of being on an aviation-related site, the animations, etc.
The comments were unanimously positive. They liked how prominent call-to-actions were, less cognitive overload, the highlighting of important information, the feeling of being on an aviation-related site, the animations, etc.
Reflection
Getting feedback from UX designers was tremendously helpful and reassuring. While redesigning the interface, I really wanted the user to feel he/she was on a Website related to flying. Creating immersive experiences go a long way in increasing user engagement. It was also important to declutter the UI and reduce the cognitive overload in the registration process.
Other projects
