OVERVIEW
Topflight is a new fictional airliner that offers jet flights for business and premium economy class traveler. The stakeholders are looking to creating a responsive web design for e-commerce with a mobile first approach, which involves the search, booking, and online check-in of flights.
THE CHALLENGE: Design a responsive website that focuses on the search and booking function of a plane ticket.
ROLE & DURATION: UX/UI Designer with the following responsibilities:
80 Hours
RESEARCH
To guide the direction of the project, market research and competitor analysis was conducted to give us a better understanding of the industry and who the main competitors are in the space. We also held interviews with participants that have recently bought a plane ticket to help us empathize how users go about searching and booking a plane ticket.
RESEARCH GOALS: Discover what information matters to the users when searching for flights. Find out what makes for an easy and effective process to search / book flights. Then determine the features that enhance the search and booking experience.
MARKET & COMPETITIVE ANALYSIS: Learning about the market and checking out other airline platforms was a good starting point for the research. For the airlines I chose to analyze a mix of low cost and premium carriers. Then looking into various online travel agencies.
USER INTERVIEWS: For this project I recruited 6 participants (3 females / 3 males) that are 30-55 yrs old and has booked at plane ticket in the last 6 months. The interviews were held over Zoom or through Google Meet.
Interview Findings
PARTICIPANT NEEDS: Many of the participants said they want the search and booking process to be as fast as possible. The flight information and details to be clear and understanding with a variety of search filters that narrows the search. A few of the participants like when they get email confirmations when the ticket is purchased and couple of them mentioned that 24 hour reservation hold is good to have as well.
PARTICIPANT WANTS: When it came to specific participants wants a few of them said a price calendar grid, the ability to view the flight cost in currency form and in miles/points. A view seat map view and to know what seats are available before selecting a flight. Many of the participants want the airline to have a loyalty program. Another want was an 24 hour cancellation option.
PARTICIPANT PAINS: Many point out that making changes to a reservation once it's paid for is a major pain. Some also mentioned that when looking at the flight costs knowing if the price is good price or not. Most hold off making any purchase until they exhaust all other options. All find that change fees are a pain or when the price is no longer available when booking.
PERSONA: By conducting secondary research and by empathizing with the participants during the interviews we were able to identify a persona who will help steer the product with a specific target audience in mind.
​
EMPATHY MAP: Visualizing the persona in a greater context will help us understand what influences the user in his natural environment.
INTERACTION DESIGN
After identifying the persona and empathizing with our users, next I sought out to determined the interaction of how users would navigate through the website to specifically search and book a plane ticket. First creating a user flow then followed by wireframes.
USER FLOW: Here I created the diagram illustrating the direct path the user to achieve that goal to search and book a flight.
MID FIDELITY WIREFRAMES : Since the main function of the website was the ability to search and book flights. That needed to be the focus for the first set of wireframes.
User Interface Design
Since this is a new airliner I designed the brand logo representing the brand attributes. It's an airliner that wants to be known for being a premium flight service provider in the travel industry defined by the international class of dignified pleasure seekers and business jetsetters alike. So I came up a brand logo that embodies this message.
​
Afterwards, we started the the visual design of the user interface with creating a UI kit complete with design elements and components for the Hi-Fidelity prototype.
​
Final Logo
Aspirational - World Class - Comfort - Sophisticated
UI KIT
HIGH FIDELITY WIREFRAMES : Following the updates I made to the flight cards from the mid fidelity wireframes. Then finalizing the brand logo and style tile. Putting it all together. Here are the results.
RESPONSIVE DESKTOP WIREFRAMES: I chose a few pages to illustrate the responsive design on desktop frames.
For this usability test I recruited 6 (3 females & 3 males) between the ages of 27-55 yrs old that have booked a plane ticket in the past 6 months.
The testing goals is to determine if they're any pain points with the prototype while performing the task. Then find if there is any unmet needs from the participants.
100%
ERROR FREE RATE
85%
TASK DETAILS
The task assigned to each of the participants was to search and book a roundtrip flight from LAX to JFK in premium economy on March 30, 20' to April 7, 20' under $800 roundtrip.
TESTING OBSERVATIONS
Overall the participants found the task easy to complete on the prototype. All completed the task successfully with varying times. Some completed the task relatively quick others took a little longer to complete. I observed some of the participants scroll through the homepage before jumping into the task. Those that looked through the homepage liked the content displayed, specifically the map and flight card components. Another observation made during the test was that after choosing a flight some of participants naturally tried to select seats for those flights. During the test the participants did not necessarily comment of any pains they where experiencing except for the limited functionality of the prototype which I took note for the next steps.
AFFINITY MAP: Shows the common successes, observations and remarks between the participants during the usability tests.
PROTOTYPE & TESTING
After putting together the high fidelity wireframes it was time to test the usability with users. The prototype for the test was created in Figma.
TEST OVERVIEW
TASK COMPLETION RATE
Next Steps
Following the usability tests, we will continue to iterate and expand the UI interface with other features detailed in the user flow like the full flight detail view, seat map view and seat selection process. Once these features are integrated into the design more usability should be conducted to learn new insights and validate the user flow.
Project Reflections
I'ved learned that although there are many flight search and booking e-commerce websites to mirror and base a platform off of it was still crucial to conduct ones research with users to validate those assumptions of best practices already designed in many of those booking websites.
MORE PROJECTS
A responsive e-commerce website for a new airliner
Enhance the connection with friends
