Simplifying Flight Card Information Hierarchy
Challenge
JetBlue, a leading airline known for its customer-centric approach, sought to elevate its e-commerce booking experience to match its reputation for excellence. The existing platform was outdated and lacked a cohesive design language, making it difficult for users to navigate and complete their bookings efficiently. The goal was to create a visually appealing, user-friendly interface that would seamlessly guide customers through the entire booking process, enhancing their overall experience and driving business growth.
Project Details
Company: Big SpaceShip
Team: Design Lead -Ashton Vazquez O’Connor / Senior UX Design - Nikki Plyem / Senior UI Design - Cesar Corpus
The Work
Users found the existing booking process confusing and overwhelming, leading to frustration and cart abandonment. The primary culprit was the excessive information presented on the flight cards, hindering a clear comparison and informed decision-making process.
Information Prioritization:
Based on business needs, we prioritized key information crucial for user decision-making, such as price, duration, layovers, and airline.
Defined secondary information (e.g., flight amenities) and explored ways to present it without cluttering the interface.
A high-level breakdown of the different information buckets
Visual Hierarchy & Design:
Leveraged visual hierarchy principles to guide users' attention towards prioritized information through:
Emphasis: Employing larger fonts and bolder weights for critical details.
Grouping: Categorizing related information visually.
Whitespace: Utilizing space strategically to create separation and enhance readability.
Icons & Microinteractions: Implementing icons and subtle animations to present additional information without overwhelming the card.
Research & Analysis:
The two areas of main focus were how to distinguish the travel specific details (time, layovers, airport, etc) and where to place the expand and collapse controls for the cards.
Conducted user interviews and usability testing to understand user information needs and pain points.
Analyzed user behavior data to identify areas lacking clarity and causing confusion.
Testing & Iteration:
After testing of the flight card options we narrowed them down to two paths. With those we conducted more in-depth user testing, adding the proposed card designs into the overall user flow.
Utilized non-moderated, A/B testing and user feedback to refine the information hierarchy and visual design.
Iterated continuously based on data and feedback to achieve the optimal user experience.
Desktop Version
Mobile Version
Results
The redesigned flight cards were met with positive user feedback. The clear visual separation between essential travel details (airports, times, etc.) and less critical information (plane type, amenities, etc.) resonated with users. This distinction allowed them to quickly grasp key information and make informed decisions faster.
Impact:
Improved user satisfaction scores through surveys and user feedback.
Reduced customer support inquiries related to flight information understanding.
Reduced customer confusion regarding fares, amenities, and travel details.
