Project Details
Team
Individual Project
Timeline
January 2025 - March 2025
Tools & Methods
UX Strategy, Wireframing, Prototyping, Typography studies, Color exploration
Role
Visual/UI Designer
Overview
This project focused on conceptually redesigning Southwest Airlines' website, specifically the homepage, destination exploration, and trip booking flow. The goal was to simplify the user experience through improved visual hierarchy and content strategy.
The Problem
Southwest's website suffered from poor visual hierarchy and choice overload. Competing colors and text sizes misdirected user attention and made it difficult to complete tasks or find crucial information.
The "Explore Destinations" feature that was meant to inspire bookings just presented walls of text that failed to engage users or promote Southwest's hotel and car rental partnerships.
Image: Original Southwest website with confusing visual hierarchy
Goals
User Goals
- Book vacations faster and more confidently
- Discover destinations in an engaging, digestible way
Business Goals
- Increase flight bookings
- Drive hotel and car rental conversions through the platform
Research & Inspiration
I analyzed competitors and analogous experiences to identify best practices for travel booking websites.
Competitive Review
Amtrak:
Simple, streamlined layouts with destination imagery
Delta:
Clean information hierarchy
Visual Research
- Southwest promotional materials
- Typography examples from Fonts in Use
- Pinterest for layout inspiration
Image: Competitive analysis and research mood board
Key insight:
Successful travel sites balance information density with visual appeal. They use imagery to inspire users to take action while keeping navigation simple.
Design Process
Exploration & Wireframing
I sketched layout options for the homepage and destination page to explore how to organize dense information without overwhelming users. I tested column, modular, and hierarchical layouts through paper sketches before moving to digital wireframes in Figma.
Image: Early sketches and wireframe explorations
Decision:
I chose a hierarchical layout with an expanded hero section to accommodate destination descriptions while maintaining visual interest.
Typography Strategy
I needed typefaces that balanced professionalism with approachability for large blocks of text.
Testing process:
- Explored geometric and neutral sans-serif options
- Evaluated x-height, spacing, and readability at different sizes
- Tested pairings for contrast and harmony
Final choice:
Headings: Roca (rounded serifs, fluid and inviting)
Body: Open Sans (neutral, readable, professional)
This pairing felt natural and welcoming while providing readability and a sense of trust.
Image: Typography studies and pairing tests
Color Exploration
I conducted three color studies to find the right balance of energy and approachability:
- Triadic (red, yellow, blue):
- Bold and energetic, but clashes with natural imagery
- Monochromatic (blue tones):
- Calm and trustworthy, but lacked distinct call to action
- Complementary (blue and orange):
- Balanced tone, but felt occasionally too vibrant
Image: Three color study iterations
Final direction:
A modified version of the complimentary palette, with blue tones and yellow accents to create visual hierarchy while complementing destination photography.
Layout Refinement
After peer feedback, I adjusted the homepage to use a large cover image instead of graphics, establishing continuity with the destination pages and reinforcing the focus on inspiring imagery.
I then designed the Explore Destinations page and Low Fare Calendar, building a component library to keep each page consistent and allow for quick iteration.
Solution
Homepage
- Large hero image with simplified booking flow to call the user to action
- Reduced visual clutter to guide attention purposefully while keeping key information and advertising accessible
Video: Final homepage prototype
Destination Pages
- Digestible content sections with supporting imagery
- Integrated hotel and car rental promotions within content flow
- Modular structure adaptable across destinations
Video: Final destination page prototype
Explore Destinations & Low Fare Calendar
- Component-based design for scalability
Video: Explore destinations interface
Video: Low Fare Calendar interface
Iteration & Critique
I presented prototypes to peers for critique, focusing on:
- Layout cohesion across pages
- Interactive affordances in form fields
- Hero section consistency
Based on feedback, I refined the destination page hero and improved form interactivity before developing mobile responsive versions.
Image: Mobile responsive designs
Reflection
The most valuable lesson from this project was understanding how typography, color, imagery, and layout need to reinforce each other to create a cohesive experience.
I wanted this design to be scalable and implementable, which meant creating a system that could be easily maintained and updated across hundreds of destination pages. I wanted each destination page to feel tailored and compelling, but I had to account for varying content lengths, different image types, and inconsistent promotional offers across hundreds of destinations. Building a modular structure that could handle all these variations while maintaining visual quality was the biggest challenge, but the final system turned out to be robust and flexible.
With more time, I'd validate whether the system actually works at scale through usability testing and implementation with real content.