FlySmart - A Traveling booking site
A fuss-free travel booking website.
Role:
Researcher and designer
Category:
Travel
When:
September - February 2023
Why:
UX bootcamp project
What:
Desktop website
Where:
Vancouver, Canada
Why I made this project
As an avid traveller, I love exploring and discovering new places. Both my parents happen to work in the travel and hotel industry. They often share their frustrations with me on poorly designed travel websites that use jargon and confusing navigation, making it difficult for anyone to book flights and hotels easily.
I was inspired to create a travel booking site optimized for usability, free of jargon, and easy for anyone to use. I wanted to provide a user-friendly experience that would simplify the booking process and make it more enjoyable for travellers and industry specialists. I set out to create a platform that would help people easily book flights and hotels, allowing them to focus on the excitement of travelling rather than the stress and overwhelming feeling that often comes with flight planning.
The problem
In recent years, there has been a significant transition from booking travel through agents to doing it independently online. While the rise of online booking has made it easier for travellers to book their trips by eliminating the middleman, it has also brought challenges. A huge issue is users are thrown an overwhelming amount of information at them: every possible flight, hotel, and route. This makes travel planning an extremely confusing and stressful process for users.
The claim
The travel sector has been exponentially recovering since the pandemic. Compared to the pre-coronavirus numbers, it has regained over 50% of its gross revenue by the end of 2021. This recovery is projected to reach 85% by the end of 2022. The interest surrounding travelling post-COVID is on a gradual rise. The worldwide online travel market reached the $433.2 billion mark in 2021, and it’s expected to reach $690.71 billion by 2026.
Air Canada
-
When entering the site, it does not redirect me to the local country site and I have to change the country/currency manually.
-
Presented with too much information which could overwhelm users such as price summary, booking completion timer, and itinerary summary.
-
No progress bar.
Emirates
-
Icons and text are too light and small – only darken when hovered over.
-
Not a very intuitive location search bar – some cities or airports don't show up. Possibly because there is no route but the user is not informed.
Skyscanner
-
Too many filters along the side bar, gets confusing to the user.
-
No progress bar.
Competitive analysis
I analyzed 2 popular airline websites and an airline aggregator site – Air Canada, Emirates, and Skyscanner. I also analyzed the Cathay Pacific website but have not included it due to size constraints. I compared the positive and negative comments online to look for patterns.
The good
Emirates
-
Non-intrusive feedback option for users
-
Pre-populated departure location
-
Flight summary available at any point of the booking process
-
Currency converter
-
Can search airlines by airline code (convenient for travel agents too)
-
It has a progress bar
-
Promoting cheapest rate
Skyscanner
-
Non-intrusive feedback option for users
-
COVID-19 advice portal
-
Choose where to book a flight from (redirects to external site)
-
The fastest, cheapest, and greenest options are highlighted for convenience
Air Canada
-
Site feedback is non-intrusive
-
Currency converter
-
Visual cues on selected options with hover states
-
Information on making changes and displaying itineraries at each stage of the process
-
COVID-19 travel protocol information.
-
The fastest, cheapest, and greenest options are highlighted for convenience
Problems from the comments
The Not so Good
Initial research shows
Initial research highlights a need in the travel market for a product that is efficient to use, jargon-free, easy to navigate with clear visual cues, and a product that ensures the user is not subject to hidden fees with everything clear and upfront at any of the booking process.
In-depth interview + Usability testing
Usability testing was conducted on the current Air Canada and Emirates website.
Usability testing and the in-depth interview were effective in validating the following key insights from the user survey and competitive benchmarking with a real user:
-
The user noticed when the currency was not pre-populated.
-
He also found difficulties describing the purpose of the Emirates icon which represents flights via Emirates.
-
The user noticed that Air Canada provides in-flight services such as wifi availability.
Air Canada
-
Default currency and the country were not set to Canada and CAD$. The user had to change the location and currency manually.
-
When searching for flights, Air Canada provided whether the flight had wifi available.
-
When inputting a specific date, Air Canada also displayed options before and after that specific date.
-
The user could input a date range to compare the fares, and a table was presented that highlighted the departure/return date with the price so the user could easily compare different departure/return combinations within the range he inputted.
-
The user thought the interface was too simple as there was a lack of prompting from the site's visual hierarchy.
Emirates
-
The user was intrigued by how Emirates promoted Dubai (airline origin). Emirates promoted their city well for tourism purposes for those considering destination options.
-
Emirates utilized user information to set the website country to Canada automatically.
-
One of Emirates' website features includes informing the user where exactly emirates fly to as an airline (not connecting with another airline) which is presented as a logo icon next to the relevant cities. When asked, the user could not tell what the icon's purpose was.
-
Currency converter was displayed with the flying options
-
The user liked the features and the more straightforward navigation.
User flow and flow diagram
To outline the functionality of FlySmart, I created a simple and easy-to-use flow diagram which takes the user through the flight searching, selecting, and payment process. The user flow aided me in understanding the user's journey from the first interaction to the last. A user flow diagram was beneficial in visualizing the user experience at each screen state to ensure I met the users' goals at each stage.
Examples of user goals being met on the landing page are:
-
Personalized travel recommendations based on preferences.
-
Popular travel destinations and activities.
-
Information about travel restrictions and visa requirements.
-
Accessing customer support for assistance.
The user flow diagram can be viewed by clicking the link here.
Low-fidelity wireframes
Once the user flows were established, I created low-fidelity wireframes of the primary user flow. This guided my design process when creating the high-fidelity prototype and screens. The mid-fidelity version can be found by clicking the link here.
High-fidelity prototype
I connected my high-fidelity designs into a clickable prototype. With this clickable prototype, I can validate my design decisions with a usability test on a potential user.
The clickable prototype can be viewed by clicking the link here.
Key takeaways from the survey
User survey
I conducted an online survey via Survey Monkey on individuals who travel, and a total of 64 participants responded.
Conducting user surveys was essential to gather a large number of responses quickly. The data gathered from the surveys provided a general understanding of user opinions regarding airline booking sites and helped guide the user interviews later.
The link to the survey responses can be found here.
A summary of the responses:
-
Most participants are aged between 18-44.
-
The participants use a flight booking service between 1-4 times a year.
-
Most participants were either trying to search for flights or check various fares.
-
The survey gathered that participants were looking for easy navigation to find what they were looking for, clearly visible booking instructions, and a faster overall process.
-
Most participants completed their tasks within 15 minutes.
-
Some participants thought the process was confusing and complex and not easy to navigate the site they were on.
-
Most participants consider price, date, time, and duration when they are on an airline booking site.
Affinity diagram
I worked with another designer, and we both presented each other with our collected data. We collaborated on Miro to structure our data into an affinity diagram. This helped us with the following:
-
Categorizing our collective information, visualizing all the data, and prioritizing important factors.
-
Learning to collaborate on research as a team.
-
Identifying areas of opportunity and user pain points.
-
Aiding our designs with clear reference points.
Link to view our Miro board can be found here.
Findings
The affinity diagram helped validate some of the points made during my research with other peers’ research. We numbered each factor from most important (26) to least important (1). Some of the key takeaways I plan to integrate into my designs include the following:
-
The airline sites contain a lot of unnecessary jargon that confuses the user and slows their experience.
-
Users prefer access to their flight summaries at any stage of the booking process.
-
The flight search bar should be clear and not lost on a busy page.
-
Baggage policies should also be visible early on in the booking process.
Challenges
-
Some difficulties in communicating and arranging meetings as we were in different timezones and had to work remotely.
-
We were also unfamiliar with Miro and simultaneously acclimated ourselves to the platform, so it took a little longer to complete the affinity diagram.
Customer journey map
Through a customer journey map, the customers' emotions at each stage could be visualized. It was easy to identify which moments were crucial and mattered most to the user, so those could be addressed accordingly.
The main takeaways from my customer journey map were:
-
Points of confusion occurred when selecting dates in the drop-down calendar, as the calendar did not provide colour-coded prices alongside the flying dates for an easier selection experience.
-
The flight search results could show a larger variety of flying dates before and after the users’ chosen date.
-
Users also felt confused when finalizing their preferences as hidden fees appeared.
The link to view the customer journey map can be found here.
Postives
-
Pre-populated geolocations
-
Lowest fare highlighted
-
Passenger types provided
-
Flight classes distinguished
-
Flexible dates option available
Pain points
-
Unnecessary jargon confuses the user.
-
Calendar drop-down selectors should provide an ample amount of date options to pick from.
-
Prices should be visible during date selection as prices fluctuate day by day. Users should be aware of the various price jumps before confirming a certain date.
-
Any CTA during the whole booking process should be clear.
-
Airline booking site should focus on airline booking – no need to provide car or hotel booking services.
High-fidelity UI
Once the user flows were established, I began designing the main structure of the screens for the FlySmart website. First, the colour palette and fonts were finalized.
Alignment and grid
I worked with an 8-point grid and set the margins to 248px. The space between the selection boxes is 8px, space between the text and image is 64px. The space separating the text and the call-to-action button is 96px. The hierarchy was established throughout the screens, following a top-to-bottom format with all the information provided to the user with a main action button, followed by a clear call-to-action button below.
A total of 43 screens were designed
The screens needed to look sleek to the user and increase brand legitimacy against its competitors.
