Project
As a personal project, I wanted to redesign the mobile version of KLM Flying Blue section.
Challenges
Make the interface more pure and declutter it from the links and redondant information.
Give to the user the feeling that he/she is on a site related to flying.
Add a joyful touch without overload the interface.
Results
As a user, I would have liked to use this application a lot more than the old version.
I spent a lot of time thinking about animations and making the experience more lively.
I spent a lot of time thinking about animations and making the experience more lively.
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
Other projects
