Redesigning-
Porter Airlines’ booking system
Key Issues Identified:
-
Complex Navigation: Users feel the current booking flow requires too many clicks and lacks clarity.
-
Limited Fare Information: Fare differences and inclusions are unclear.
-
Non-Responsive Mobile Experience: The booking system doesn’t adapt well to mobile devices.
-
Accessibility Gaps: Lack of features for visually impaired users.
Design Goals
-
Simplify and streamline the booking process.
-
Improve fare presentation and seat selection.
-
Enhance mobile usability.
-
Incorporate accessibility best practices.
Redesigned User Flow
Homepage and Search Form
Current Problem:
Users encounter cluttered search inputs and unnecessary distractions.
Proposed Solution:
-
A minimalist homepage with a prominent flight search bar.
-
Autofill suggestions for airports and routes.
-
A clear calendar for date selection with flexible date search.
Visual Elements:
-
Use modern, clean typography and icons.Progressive disclosure for options like round trip vs. one-way flights.
Flight Selection
Current Problem:
Fare options are difficult to compare
Proposed Solution:
-
A grid-based layout displaying flight times, prices, and fare classes side-by-side.
-
Interactive fare cards highlighting what is included (e.g., baggage, refunds).
-
A price calendar for flexible date options.
Visual Enhancements:
-
Add icons for baggage, refunds, and meal options.
-
Clear distinctions between economy, flexible, and business fares with color coding.
HOME PAGE
&
SEARCH FORM
Original Flow
Redesigned Flow
FLIGHT SELECTION
Original Flow
Redesigned Flow
Add Extras (Enhancements)
Current Problem:
Seat selection is buried deep and difficult to modify.
Proposed Solution:
-
Inline seat map with interactive seat selection.
-
Options for baggage and meals are presented with toggle switches.
Review and Checkout
Current Problem:
The final review page is cluttered and lacks editing options.
Proposed Solution:
-
A summary page consolidating all selected options.
-
Editable sections for flight, seat, and extras.
Payment
Enhancements:
-
A clean, mobile-friendly payment form with error handling.
-
Options for credit card, PayPal, Apple Pay, and Google Pay.
Accessibility Enhancements
-
High contrast colors for readability.
-
Keyboard navigability for all form elements.
-
ARIA labels for screen readers.
Micro-Interactions and Feedback
-
Subtle animations for button clicks.
-
Real-time updates for pricing and seat availability.
-
Error states with clear instructions for resolution.
Conclusion
This redesign aims to create a streamlined, intuitive, and accessible booking experience that improves conversion rates and user satisfaction. The enhancements prioritize clarity, simplicity, and responsiveness across devices.