Travelocity (PiXEL Designathon)
Revamping the Travelocity mobile app by Expedia.
Role:
Researcher and designer in a team of 3
Category:
Travel and tours
When:
April 7-10, 2022
Why:
UX designathon sprint
What:
Native Mobile App (iOS)
Where:
Remote from Vancouver, Canada
About the project
Participating in this UX designathon was an opportunity for me to gain experience collaborating with others on a project and surround myself with other UX designers. I participated in a team with 2 other students from the different University of California schools. We participated in the beginners' prompt and our team won first place against several other teams and fourth overall with both the beginner and advanced prompt.
Information on the designathon prompt can be found here.
This design sprint required the teams to review Travelocity's travel booking app and its functionality. Some pain points that our design aims to tackle are: revamping the user interface better reflect the brand, house booking collaboration features, promote and engage with the travel community by sharing reviews of other travellers, and the ability to save trip planning progress to review at a later time.
The problem
The issue with online travel agencies is the terminology used is too complex for travellers; when removing the travel agent, it becomes difficult to understand and navigate through the heaps of information thrown at the user. The technology of travel apps still has a long way to go as it lacks many functionalities common in the modern travel booking process.
The claim
The online travel and tourism industry is slowly recovering from the impact of COVID-19. According to the World Tourism Organization (UNWTO), international tourist arrivals fell by 73% globally in 2020 compared to the previous year. There is still work to be done to improve the user experience for travellers; by focusing on the needs of their users and adopting new technologies and strategies, travel booking sites can help ensure that the online booking experience is more seamless, stress-free, and enjoyable for all. Improving the user experience is crucial as there is a huge surge in travel needs, with travel and tourism spending projected at $USD9.3Bn.
Hopper
-
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.
Trip advisor
-
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.
Travelocity
-
Too many filters along the side bar, gets confusing to the user.
-
No progress bar.
Competitive analysis
The team analyzed four popular online travel agency apps – Hopper, Trip advisor, Travelocity (the app we are redesigning), and Kayak. I did not include Kayak portfolio due to size constraints. We compared the positive and negative comments online and tested the apps ourselves to look for patterns.
The good
Trip advisor
-
Forums (reviews of different countries/places)
-
Images from real trips
-
Allows users to book hotel rooms, flights, restaurant reservations, attractions, and guided tours
-
Businesses can join the attraction or places to stay
-
Can respond to reviews
-
Feature local businesses
-
View curated guides created by other users
-
Save places that you’d like to visit
-
Can explore the country/place you’d like to visit
- provides things to do, stay, eat, etc.
Travelocity
-
Things to do option
-
Cruises option
-
Customer service button
-
COVID-19-related refund options
-
Ability to change travel details
-
Combine flight, hotel, and car packages
-
Light and dark modes
Hopper
-
Cash backs (carrot cash which is on brand)
-
Vouchers to save money
very cute, colourful interface with branded animations -
Price freeze
-
Flight price predictions
-
Watch flights by yourself or with travel buddies (easy to share flight information with travel companion(s))
-
Allows you to switch to non-stop flights immediately if there is one available for the same price
Problems from the comments
The Not so Good
Initial research shows
Our initial research indicates a need in the online travel market for a efficient product with collaboration functionalities, the ability to share reviews, and the ability to save and resume searches for a more optimized and inclusive travel booking process.
User flow
To outline Travelocitys' flow, the team created a simple user flow, which takes the user through the login/signup process, search/discover, and selection process. The user flow us visualize the user's journey from the first interaction to the last. It also helped us ensure user goals are met at each screen state.
Examples of user goals being met at various screen states are:
-
Saving and organizing travel options for future reference.
-
Comparing prices and features of different travel options.
-
Planning and organizing trips in advance by saving potential options.
-
Sharing travel options with others for collaborative trip planning.
-
Accessing information about travel restrictions and visa requirements for different destinations.
Mid-fidelity wireframes
Once the user flow was established, we created mid-fidelity wireframes based off the user flow, which guided our design process when we created the high-fidelity prototype and screens. We collaborated in real-time on Figma to work on wireframing together.
The wireframes 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
Our team crafted an online survey via Google forms, and 21 participants responded.
Conducting user surveys was essential to gather many responses in the short time we had. The data gathered from the surveys provided a better understanding of user opinions regarding airline booking apps and helped guide our design decisions.
The link to the survey responses can be found here.
A summary of the responses:
-
Participants seldom travel or plan trips alone.
-
Most people travel due to the beauty of the location and for family.
-
“There was no option to choose the class of travel when booking a multi city trip on an airline website.”
-
“The prices keep changing constantly. I always have to view using incognito so i can get more accurate rates.”
-
Most popular services:
- Flights (89.5%)
- Accommodations (47.4%)
- Tours and activities (42.1%)
-
Most popular features:
- Customer reviews
- Comparing options
- Favorites button, top deals, pictures
Affinity diagram
As a team, we worked together to structure our collected data and insights 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 affinity diagram can be found here.
Findings
The affinity diagram helped validate some of the points made during our research stage. Some of the key takeaways we will incorporate into our designs include:
-
Users tend to take a longer time booking things so the ability to save a cart and revisit is beneficial.
-
Lots of jargon that confuses users.
-
Most people plan trips collaboratively so apps should facilitate functionalities to allow collaboration.
-
User should not be punished for not registering for an account by having a different experience on the app to members.
Challenges
-
There was a time constraint as we needed to work fast while still maintaining the quality of work.
-
Coordinating a time to work together as a team.
High-fidelity UI
Since Travelocity already has its branding established and our focus was not on rebranding, we mapped out its branding for ourselves to ensure we followed it when designing our screens.
A total of 31 screens were designed
The screens needed to in a way which drew in users to use Travelocity to book their trip and to gain brand recognition.
My role
Within my team, I took the lead in breaking down, prioritizing, and delegating tasks to others. With more prior knowledge of the UX design process than my teammates, I took on more of a leadership role to ensure we went through the relevant steps to complete the project in the short time we had for the competition.
My own tasks included:
-
Researching 2/4 other apps for our competitive analysis
-
Collaborating on crafting our user survey
-
Adding my research to the affinity diagram
-
Collaborating on the user flow
-
Collaborating on the wireframes
-
Worked together on prototyping
-
Specifically worked on the screens for the landing page, onboarding login and signup, interests, the homepage dashboard, calendar picker, saved cart, and the collaborating feature.
This was the first time I collaborated in a remote team setting, and my team was overjoyed when we won first place for the beginner's prompt.