This concept showcases a boarding pass that understands the user context. Depending on the context (flight day, at the airport, at the gate) the UI will make some infos more prominent to the user, making sure that he can easily find what he’s looking for at the moment.
This project was also an opportunity to test some motion design on the UI, helping the user to understand the context changes.
Interface Design, User Experience.
In this concept I created three contexts to show case how the boarding pass can be adaptive to the user needs to find specific information.
- CONTEXT 1 / FLIGHT DAY
Today is your flight day, so it’s nice to easily have access to your departure airport and landing airport. São Paulo is a great example for this, due to the fact that the metropolitan area has two airports. And trust me, mistakes have been made.
- CONTEXT 2 / AT THE AIRPORT
You arrived at the correct airport, so this data (highlighted on the previous context) can give space to what is more relevant now. You will probably dispatch your luggage, and after that you need to find your gate and double check your flight number. This is what we focus on the current context. Your boarding time is also very relevant.
- CONTEXT 3 / AT THE GATE
When you are at your gate it means that your boarding time started, or it’s close to. So now informations like line, seat and boarding priority are way more relevant.
The user won’t see the animations happening all the time, since there are long time-windows in between the contexts. But it’s still a nice way to show the user how things changes, and that nothing disappears.