Harbor Air
Reimagining the regional airline booking experience
Streamlined Booking for New England
Regional airlines struggle with complex booking interfaces that overwhelm users. HarborAir needed a streamlined experience that makes booking quick and intuitive for New England travelers. This project encompasses both the booking flow and a comprehensive design system built for scalability and consistency.
The Challenge
While researching for this project, I found that there were three major issues in existing airline booking experiences:
Key Problems
- Overwhelming interfaces: Too much information presented at once creates decision paralysis and increases booking abandonment rates.
- Unclear progress tracking: Users don't know how many steps remain or where they are in the booking process, leading to frustration.
- Generic branding: Regional airlines lack distinctive visual identity, making it hard to build trust and brand recognition with local travelers.
Research & Discovery
To understand how to create this booking experience, I looked at:
Competitive Analysis
I analyzed major airline booking platforms including Southwest, JetBlue, and Delta to understand common patterns and pain points.
What Works
- Clear progress indicators showing steps completed and remaining
- Logical information hierarchy with primary actions emphasized
- Mobile-responsive designs that adapt to different screen sizes
What Doesn't Work
- Too many options and upsells creating decision fatigue
- Inconsistent button styling and unclear CTAs
- Hidden fees and confusing pricing breakdowns
New England Regional Identity
I explored New England's visual culture, coastal landscapes, and local character to inform the design direction that would resonate with regional travelers.
Goals
After conducting my research, I created a list of my core goals for this project:
- Progressive disclosure: Break the booking process into manageable steps that don't overwhelm users
- Clear wayfinding: Users should always know where they are and how many steps remain
- Distinctive branding: Create a visual identity that feels modern, trustworthy, and regionally connected
- Scalable system: Build a design system that can grow with the product
Design Process
I broke down the booking flow into six clear steps, each focused on a single decision point.
Booking Flow Structure
- Location: Select departure and destination cities
- Dates: Choose travel dates
- Time: Pick departure times
- Review: Confirm flight details
- Pay: Enter payment information
- Confirm: Receive booking confirmation
Booking Flow Structure
I also learned how to plan out Flight times, patterns, and codes. I did this by deciding there were three planes in total and four possible destinations.
Visual Design Exploration
I developed a distinctive visual language using gradients, large corner radius, and decorative elements that reference New England's coastal character.
Landing Page
The hero section establishes the brand with gradient typography and a clear call-to-action.
Location Selection
A split-screen layout with distinctive visual zones for departure and destination creates clear separation while the progress bar keeps users oriented.
Design System
I created a comprehensive design system with many components to ensure consistency and enable future scaling.
Design Tokens
Figma Variables
Final Design & Prototype
The final design is a progressive multi-step booking flow with clear visual hierarchy and distinctive branding. The six-step process—Location, Dates, Time, Review, Pay, Confirm—breaks down complexity into manageable decisions. Each screen features the persistent progress indicator, large touch-friendly targets, and decorative elements like cityscape illustrations that reinforce the New England regional focus.
The bold gradient system, signature 120px corner radius, and Kanit typography create a modern, trustworthy identity that stands out in the regional airline market. The comprehensive design system ensures consistency across all touchpoints and enables efficient scaling as the product grows.
Final Takeaways
This project taught me valuable lessons about creating cohesive digital experiences:
- Progressive disclosure reduces cognitive load — Breaking complex flows into single-decision steps dramatically improves completion rates
- Design systems enable consistency at scale — Investing time in systematic component design pays dividends as products grow
- Distinctive visual identity builds trust — The signature 120px radius and gradient system created immediate brand recognition
- Research informs better decisions — Competitive analysis revealed patterns to follow and pitfalls to avoid
Final Design & Prototype
The final design is a progressive multi-step booking flow with clear visual hierarchy and distinctive branding. The six-step process—Location, Dates, Time, Review, Pay, Confirm—breaks down complexity into manageable decisions. Each screen features the persistent progress indicator, large touch-friendly targets, and decorative elements like cityscape illustrations that reinforce the New England regional focus.
The bold gradient system, signature 120px corner radius, and Kanit typography create a modern, trustworthy identity that stands out in the regional airline market. The comprehensive design system ensures consistency across all touchpoints and enables efficient scaling as the product grows.
Final Takeaways
This project taught me valuable lessons about creating cohesive digital experiences:
- Progressive disclosure reduces cognitive load — Breaking complex flows into single-decision steps dramatically improves completion rates
- Design systems enable consistency at scale — Investing time in systematic component design pays dividends as products grow
- Distinctive visual identity builds trust — The signature 120px radius and gradient system created immediate brand recognition
- Research informs better decisions — Competitive analysis revealed patterns to follow and pitfalls to avoid