FLYWAY
End-to-End UX/UI Design
FLYWAY is a mobile app that resolves a common travel pain point by reducing stress by preparing users for canceled or delayed flights with a selection of alternative flights ready to book up until their departure.
AN OVERVIEW
WHAT IS FLYWAY?
Flyway is a mobile booking app that tracks your flights and provides alternative options to make air travel smoother and less stressful. With increasing uncertainties in flying, Flyway helps users proactively find alternative flights before delays or cancellations occur.
No need to scramble for the best flight—Flyway offers a curated list of backup options and keeps you informed of any changes to your original booking.
MY ROLE
As the UX/UI Product Designer for this end-to-end mobile app, I led the design process from concept to final delivery.
I conducted user research, defined user flows, created wireframes, and developed high-fidelity prototypes.
My focus was on crafting seamless interactions, visually appealing interfaces, and ensuring usability at each stage of the user journey.
This project was part of a mentor-facilitated boot camp program through Design Lab.
THE PROBLEM & SOLUTION
UNAVOIDABLE STRESS?
Navigating flights is the #1 cause of stress for travelers. With the number of delays and cancellations occurring on a daily basis, travelers are often found stranded or scrambling to find something that works.
How might we reduce travelers’ stress when flying?
PREPARE TO PREVENT
-
Flyway’s goal is to provide users peace of mind with a list of alternative flights based on their original booking.
-
No need to stress when you have a backup plan!
THE GOALS
PROJECT GOALS
-
I wanted to understand what stresses users the most during the traveling process and how they currently react
-
I hoped to develop an app that provided a solution to a possible flight issue which would alleviate a primary travel worry that users experience
-
I wanted to keep the design of the app simple and attractive and provide a calming interface for users
-
Develop an effective UX/UI design of a useful and working product
BUSINESS GOALS
-
Generate ad placement revenue
-
increase user acquisition
-
increase site traffic & product use
-
stay competitive
-
partner with travel companies and airlines
USER GOALS
-
Feel less stress when planning a trip
-
Possess peace of mind even with the chance of a flight delay or cancellation
-
Ease of financial management and expense tracking
TECHNICAL GOALS
-
Collect all current available flights
-
Develop a workable app for both Android and iOS
-
Ship products in time for launch
-
Develop functioning features
BUSINESS x USER
-
Develop a necessary tool for all travel trips
-
Build into a commonly known and used traveling app
USER x TECHNICAL
-
Easy-to-Use
-
Minimal bugs & errors
TECHNICAL x BUSINESS
-
Efficient product development
-
Accurate data collection
KICKOFF
UNDERSTANDING THE COMPETITION
-
All competitors implemented basic flight booking and tracking as a general feature
-
No competitors had a reliable solution for managing canceled or delayed flights.
TARGET USERS
The pandemic is over, and travel demand has surged, with people eager to explore or reconnect more than ever. However, flight-related stressors like delays, cancellations, and rebooking challenges continue to affect travelers.
Primary Users
-
Frequent flyers aged 30-50
-
70-75% personal travelers
-
25-30% business travelers
Users seek a travel app that reduces stress, provides proactive solutions, and offers quick access to alternative options when disruptions arise.
DEEPER INSIGHTS
THE USER'S POV
1. Limited support - Airlines do not provide enough customer support for delayed or canceled flights
2. Tracking changes - Tracking flight changes is difficult to manage for multiple travelers
Despite the stresses of flying, it is a necessary mode of transportation that travelers must manage as best as possible. And users are always looking for a new way to simplify their traveling processes. And typically, better pre-planning and alternatives are the best solutions for stressful situations.
THE TASK FLOW
ACCESS ALTERNATIVE FLIGHT LIST OF EXISTING FLIGHTS
This task flow is for users who have already booked a flight and would like to import their flight confirmation to access notifications and an alternative flight list.
THE USER FLOW
BOOK ALTERNATIVE FLIGHT
This user flow is for users whose original flight was canceled or delayed. The user can filter and sort the alternative flight list results and book through the app.
THE DESIGN
CREATING A RELIABLE BRAND
Reliability
The deep blue evokes a sense of trust and reliability, reinforcing a feeling of dependability for users
Trust
Keeping the design lines simple creates a transparent, honest aesthetic with nothing to hide
Adventurous
A sense of adventure is essential in travel, and the bright pop of yellow draws the user's eye, adding a dynamic sense of movement
Calming
The complementary pairing of blues and yellow creates a harmonious balance, offering a steady, calming effect with a touch of playful energy
Icons
I designed the icons with simple, sharp lines to ensure they were instantly recognizable and visually clean. This minimalist approach not only made the icons easy to identify but also aligned with the app's modern aesthetic, enhancing usability and providing a cohesive look across the interface. These icons help users navigate intuitively, reinforcing a seamless and user-friendly experience.
USER INTERFACE
LOW-FIDELITY
Sample flow to find an existing flight and view alternative flights.
After a review, I decided that the low-fidelity wireframes needed to be simplified.
-
Varying card sizes were inconsistent
-
Hierarchical font sizing throughout each screen led to a disorienting flow
-
Users provided feedback that the logo was a bit too childish and did not reflect the minimalist and reliable image of the company.
SEARCH FLIGHTS
Task: Find or Book a Flight
I simplified the buttons and added a consistent highlight color for the CTA, making the next action easy for users to identify.
I also redesigned the navigation bar icons and logo, creating a more minimal and cohesive look.
FLIGHT RESULTS
Task: Search Existing Flight
I implemented subtle aesthetic adjustments, like increasing text spacing to create more white space for a calmer viewing experience.
Additionally, I made the flight cards clickable in the prototype, ensuring users could easily select them.
ASSIGN FLIGHT SCREEN
Task: Add Flight to Select Passenger
To streamline the booking process, I designed a screen where users can select passengers from previously saved profiles, reducing the time needed to rebook flights when every second counts.
To enhance ease of use, users can create multiple passenger profiles for families or groups, allowing them to quickly assign specific passengers to each booking.
FLIGHT LIST SCREEN
Task: Access Alternative Flights List for Existing Flight
This screen initially appeared overwhelming due to the amount of detailed information. To improve readability, I increased the white space between sections and adjusted the color scheme.
I also resized the flight card to better fill the screen and aligned it with other components for a more consistent visual flow.
THE TESTING
PROTOTYPE AND TESTING
Flyway stands out from competitors with unique features, such as importing existing flights for tracking and accessing a curated list of alternative flights to replace delayed or canceled ones.
For this study, four user flows were tested using Maze.
Task 1
Creating an account and logging in
Task 2
Finding a flight and adding it to a flight list
Task 3
Applying filters and sorting results for flight search
Task 4
Completing the booking process of a flight
USABILITY TESTING RESULTS
Each flow was measured by completion percentage and iterations were made based on feedback collected from users. Task flows were listed in order of highest to lowest based on completion percentage and the iterations required to resolve the issues.
MAJOR ITERATIONS
HOME PAGE
One major iteration I made was to the original home page. Initially, I designed it as a social photo-sharing space for travelers to connect and share positive travel experiences. However, users felt it was too similar to Instagram and didn’t clearly relate to travel.
In response, I redesigned the home page as a flight discovery hub, allowing travelers to explore and find new trips. This change enhanced the app's focus on travel and increased meaningful engagement with the booking features.
.png)
FILTER SCREEN
Users felt disoriented when taken to a new screen after selecting filters and sorting options, so I switched to using a modal instead. This change allowed users to easily access filters without losing their place on the current page.
Additionally, I removed the navigation bar during filter tasks to reduce unnecessary interactions and minimize the potential for user error.
FINAL RESULTS
KEY TAKEAWAYS
Air travel often brings significant stress due to the uncertainty of delays, cancellations, and last-minute changes.
Flyway aims to alleviate this by providing travelers with a curated list of alternative flights, ready for quick booking when unexpected disruptions occur.
By proactively offering solutions and backup options, Flyway empowers users to navigate travel challenges with ease and confidence, transforming stressful situations into manageable ones.
INTO THE FUTURE
MULTIPLE QUOTE REQUESTS
In the future, Flyway will expand to track flight expenses, refunds, and credits for canceled or delayed flights, becoming a one-stop app for managing all aspects of travel. This evolution will provide users with an efficient way to reduce travel-related stress by streamlining their flight management in one place.
An advanced feature in development is auto-booking, which will automatically secure new flights based on preset user preferences when specific criteria are met. This ensures users can keep their travel plans intact, even if a cancellation happens while they're sleeping. These enhancements aim to make Flyway an indispensable tool for frequent travelers.
THE END.
THANK YOU FOR JOINING ME FOR MY FLYWAY CASE STUDY.
