A redesign of Southwest Airlines website with a focus on responsive mobile to desktop design.
Southwest Responsive Redesign
My Role:
Research, personas, user flows, sketching, wireframing, visual design, prototyping, user testing, iterations
Duration:
June 2023 - July 2023
4 weeks: 80 hours
Project Background
According to the United States Department of Transportation, Southwest carries more air travelers flying nonstop within the United States than any other airline. This project aims to improve the responsiveness of their mobile and desktop website.
The Why
Understand users' motivations and frustrations when booking air travel in order to evaluate what improvements can be made to the Southwest Airlines Mobile site in order for users to enjoy a more efficient and satisfying air travel experience.
Project Goal
Discovering
First, a heuristic evaluation and accessibility check was completed in order to assess Southwest’s current website accessibility and usability.
Audit of Current Website
Insights Gained
"User control and freedom" received 9 no’s out of 14 categories during heuristic evaluation.
Current design does not enable users to quickly correct mistakes or back track on choices made.
Low contrast between colors in current design.
A competitive analysis was conducted to gain an understanding of what is both direct and indirect competitors currently offer for users and any gaps that may exist to improve user experience.
Competitive Analysis
Insights Gained
Companies offer booking, check-in, and flight status services from their homepage.
Booking information front-and-center on the homepage without requiring any additional clicks to access is common.
Companies use of calendar popups when selecting departure and return dates.
Mobile sites for airlines often require several clicks to access information such as layover length and flight status.
Interviews were conducted to obtain qualitative data about the target user’s experiences, pain points, and needs.
Participants who travel for business and personal reasons were recruited for this study.
Interviews
2 females and 2 males between the ages of 25 and 50 were interviewed.
Following the completion of interviews, affinity mapping was used to identify and understand the patterns and relationships observed across participants.
Affinity Mapping
Booking a flight can be a frustrating process for users due to the amount of time it takes and the price tag of a trip.
The highest priority for users when booking a flight is price.
Users are most frequently frustrated by an inability to efficiently compare prices between different airlines and within an airline across days.
When specifically asked about the Southwest Airlines mobile site, users reported that the current site appears cluttered and overwhelming.
User pain points with the Southwest mobile site included:
Difficulty comparing flight prices at a glance
Small hard to click on buttons
Multiple clicks required to access “Book a Flight” from the homepage
Difficulty accessing and using the “Low Fare Calendar”
Insights Gained
Defining
Based on the findings of my user research, I decided to explore ways to help price conscious air travelers find the best flight price because finding a price within their budget can be frustrating and time consuming.
How might we assist price conscious air travelers find the best flight price?
With a clearly defined problem in mind, personas were created to better understand the target user and to ground later design decisions.
Using insights gained from initial user interviews, I created 2 budget conscious user personas to keep in mind when designing: The Family Man & The Budget Traveler.
Personas
I started by creating a user flow for the existing Southwest mobile site so that I could understand the steps users currently take to book a flight. Recreating this flow revealed that there were several spots on the existing site where users could get stuck in a loop with no easy exit points.
After recreating the existing user flow of Southwest’s mobile site, I brainstormed ideas and reimagined how the process of booking a flight could be simplified for users and how to solve users price comparison problem.
The new user flow includes the ability to modify a flight search, streamlined design that requires less clicks, and a comparison feature for users.
User Flows
Designing
I began by sketching low fidelity wireframes of the homepage to explore what design patterns might be useful in the design of this product.
After exploring 6 possible homepage designs, I decided to move forward with sketch #6 due to its attention grabbing flight search card and use of mobile friendly elements. Then I began sketching the needed mobile and desktop screens in the same style.
Low-fidelity Sketching
Low-fidelity sketches were moved to medium-fidelity wireframes to obtain a more accurate depiction of my design in order to receive feedback and make changes to the design as needed.
In initial designs, the compare feature was designed more like a filter to narrow the users choices when booking a flight. After feedback, I created a second design so that the compare feature worked more like a grid. The grid layout allows users to compare each element of a flight when making a decision about which flight to book. I decided to test the two designs of the comparison feature using A/B testing.
Medium-fidelity Wireframing
Reviewing Southwest Airlines existing site and app, I was able to understand the current style of the brand. Utilizing the brand's style guide was instrumental in crafting UX/UI screens that seamlessly aligned with the existing experience.
High-fidelity wireframing allowed me to make visual design decisions about how to use Southwest’s brand colors, gain additional insight into my medium-fidelity wireframes, and create a high-fidelity prototype for usability testing.
High-fidelity Wireframing
Testing
3 participants were recruited to complete usability testing for the high-fidelity Figma prototype of the redesigned Southwest mobile site. During in-person testing, participants were asked about the visual design of the site and then asked to complete 2 tasks.
Task 1: Compare 3 flights during the booking process.
Task 2: Book round trip air travel for a specified trip.
Usability Testing
2 females and 1 male between the ages of 25-50 who travel for personal reasons participated in usability testing.
Success Metrics:
Task completion
Error rate
Time on task
Satisfaction
Insights Gained:
Users felt the site was well organized the headings helped guide users
Users liked the flight cards showcasing flight information
Users preferred the grid comparison page vs the filtered comparison page
Users found the comparison feature easy to navigate to
Users did not like having to close and reopen the booking calendar to select a return date
Users wanted to know more information about the fare types
Users found the colors used for the fare types overpowering/overwhelming
Users need more visual contrast to show selected states
Users required more time to understand the comparison chart
Feedback from usability testing was used to iterate on designs in order to increase user experience for the future.
Iterations
Changes I Made:
Added flight number and visual indication to assist users in understanding how information is grouped on comparison page (vertically or horizontally)
Added dropdowns to fare types so that users can understand what each fare type means
Used colors on fare type elements as an accent instead of the main focus, elements will become fully colored when selected
Made Round trip, one way, dollars, points bold when selected
Kept fare calendar open when selecting return trip
These screens represent how the mobile design would adapt to a desktop layout in order to facilitate usability, navigation, and information seeking across devices.
Responsive Desktop Screens
Final Thoughts
This project allowed me to work on managing my time effectively while completing an independent project. Managing time effectively during my UX/UI project was a continuous learning process. It demanded a balance between structure and flexibility, as well as a keen awareness of how time was being used. By applying these lessons, I not only completed the project on schedule but also delivered a high-quality user experience.
Matching the existing style of the website was a thrilling creative challenge, as it allowed me to infuse my designs with the website's established personality, resulting in a harmonious and visually engaging user experience
Reflection
Apply time management lessons from this project to future projects in order to optimize my time for greater efficiency
Explore responsive design solutions for preflight check-in
Develop “direct flight” filter for time-conscious travelers