CASE STUDY: Optimize a mobile website for UX
Southwest Airlines recognizes the growing importance of mobile website bookings in the airline industry. Although they have an existing mobile website, it is outdated compared to its competitors. To remain competitive and meet customer expectations, Southwest is determined to improve the performance and user experience of their mobile website, aligning it with the industry trend and providing a seamless booking experience for their passengers.
In this project, my objective was to enhance the efficiency, usability, and accessibility of the website while minimizing errors that could potentially drive users away. I aimed to implement screen modifications that would significantly increase user engagement and encourage them to utilize the site for flight bookings.
Below are a few of the changes I made.
I wanted to start with a Heuristic Markup for this project. This was to help me understand how a user might experience this website and build a narrative that illustrates potential areas for improvement within the website. I went through the entire flow of purchasing a round-trip flight.
What I found from an initial parse were some visually outdated pages that were sometimes cluttered and required a lot of extra clicks to accomplish simple tasks. This gave me a starting point for some of the changes I wanted to make.
Top Occurring Usability Issues:
1) Information Architecture
2) Task Efficiency
3) Accessibility
Following the Heuristic Analysis, I took a look at some the of competitors within the airline industry. Given the highly competitive nature of the industry in the USA, I aimed to gain insights into the information that competitors prioritize. It became evident that airlines have a strong grasp of their respective target markets and prioritize the display of information that aligns with their customers' preferences. Notably, budget airlines emphasize key details such as special deals and low-fare days to attract and cater to their specific audience. This insight ultimately contributed to my designs for Southwest.
Opportunities:
1) Show information that Southwest’s budget conscious customers care about
2) Highlight deals and discount vacation destination
3) Modernize UI
After conducting 4 interviews with participants (ages 24-28) who ranged from frequent fliers to barely fliers, I noticed some interesting trends. Everyone I interviewed mentioned 'cost' as their deciding factor for booking a flight. And my interviewees also mentioned that doing the research to find the lowest price was the hardest part of flight booking process. This insight highlighted to me that some of the key information that would be crucial for Southwest to show on their site is their low cost flights!
Another test I conducted during the research phase was a SUS test for Southwest Airline's current mobile website. I wanted to do this because it was easy to administer and effective at determining usability.
The results of my SUS test were interesting:
- 2 of the participants who don’t have any concept of UX gave scores of 82.5 & 87.5.
- One participant who was a UX student gave a score of 45!
The average score was 71.67, which meant Southwest is doing OK, but could improve.
1) Joseph: College student who is budget conscious for his travels.
2) Jessica: Young professional who travels frequently for work.
These personas provide insights into the specific needs and challenges faced by individuals like Joseph and Jessica who are purchasing flights on a budget.
Next, I created the current user flows for the Southwest website. I then made some edits and created a new user flow with some improvements to make the flow more efficient.
After I decided on the changes I wanted to make to the UX, I started sketching the main screens. I aimed to keep both user and business goals in mind while sketching the screens.
After receiving feedback on my sketches, I began to digitize the screens and building out the flows. I made the screens into a prototype to be used for usability testing.
With the prototype, I conducted moderated usability tests and a Systems Usability Scale (SUS) with 4 participants.
1) Add title to page and highlight whether user is picking departure or return date.
2) Gray out dates once a departure date is selected as visual feedback to users.
2) Disabling the 'Done' button until both departure and return dates are selected, reducing the likelihood of misclicks.
1) During the initial System Usability Scale (SUS) tests, I held the assumption that the outdated appearance of the Southwest Airlines website would result in poor ratings. However, I found that functionality can outweigh aesthetics, especially for users who are not hypercritical of UX. Interestingly, the tests conducted with my friends with no UX background yielded good scores for Southwest Airlines, while it received very low ratings from my fellow UX peers!
Furthermore, I observed a consistent design pattern among airlines, which contributed to users' familiarity with the booking process despite the outdated screens. This indicates that users have developed a level of expectation and understanding of how airline websites typically work.
2) In a group critique with my peers and instructor, I presented my high-fidelity screens and received valuable feedback. One key insight was the importance of incorporating more than just color changes as visual feedback, as a slight color shade change might not be fully accessible. This feedback played a crucial role in my improvement process of the screens, and I'm now more thoughtful with my design choices.
