PAN AMERICAN Airways
project developed for DesignLab
User Research, IA, Interaction Design, Prototyping, Usability Testing, UI Design, Branding
Google Forms, Sketch, Adobe Illustrator, Marvel
In the process, I went through different stages while I was evaluating my insights and designs on each stage. The design process involved the following six stages.
Conduct 1-to-1 Interviews to gain a more in-depth understanding of the needs and pain points of airline passengers and how we can improve their online booking experience.
See what competitors do and what services do they offer. Try to understand their target audience. Check their websites to discover what features they use on their websites and how the booking process works.
Collect users demographic data, what devices they use in order to book their flight tickets, which are their preferable features and what other services they like to use
Find out what competitors do
Determine whether users prefer to book their tickets online of offline and why
Identify users needs, goals and pain points during the online and offline booking process
Collect demographics of the target audience
Specify what features users search in an airway online booking website
— Survey Participant
Through the 1-to-1 interviews with 4 participants (2 men, 2 women) I was able to learn about the travelers' pain point and frustration about online booking flights tickets. At the same time, I run an online survey. 63 people from all over the world participated in the online survey from which I managed to gain useful quantitative insights.
All these insights helped me to understand better the target audience by building 3 personas along with their empathy maps.
Lack of transparency in extra fees
Difficulty to contact customer service
Impolite stuff of very cheap airlines
Hard to understand differences and information of the different kinds of ticket classes
Can't arrange everything from one website (e.g. hotel, car rental, entertainment tickets, extra discount etc.)
Based on the brief which asked for an elegant, yet playful, hip and aspirational but not luxurious logo, I started with some hand-drawn sketches to get inspired. Then I chose the best ideas and started working with Illustrator.
With the completion of the sitemap and the task flow, I then started to work on the low fidelity wireframes.
Once a few ideas were sketched, iterated and refined some more, I began designing the digital wireframes for desktop monitors and mobile screens, always keeping in mind that my designs should work equally well in all different screen sizes.
Respecting the brief which mentioned to keep blue as the main color in the website's color palette, I used bluish gradients to give a feeling of an air element while selected images retain this color palette. At the same time, a more modern, simple and minimal font is used to match the new logo and give a more elegant touch.
Starting with the desktop screens, I decided the look and feel of the website and finalize some core steps like search results page and checkout.
I then decided to work in depth the designs for the mobile screens resolutions instead of the desktop, because I found it really challenging to design a website with so much content for such small screens.
When I finalized the designs in the majority of the UI elements I created a UI kit to ensure that my designs are focused around the project and provide developers with accurate design specifications prior to codegoals.
After the completion of the usability test sessions with 5 participants, the results came to be really encouraging.
The total of users who tested the prototype agreed that everything looks straightforward and easy to understand, while they mentioned that the flights' presentation was clear and reminiscent of other flight websites. Lastly, participants found the whole checkout process simple and very clear. They especially mentioned that they liked they were able to see the next steps that were coming up.
Designing a flight booking site requires attention to details and provide additional features users expect to find. After my initial version, I believe that there are still many iterations needed before it will be ready to launch.
With the first round of iteration, the next step to think about would be alternative ways to show the checkout steps (eg in different screens) and also other alternatives on how users could add up-selling packages (like hotels, car rental, entertainment tickets) without adding extra checkout steps.