WestJet Redesign
WestJet is a Canadian airline known for its affordable fares and customer-friendly service.
Context
As part of the bootcamp by Designlab, I completed a solo Responsive Web Design capstone
Role
UI/UX Designer
Time
65 hours, April 2024
Overview
The redesigned website delivers a streamlined, user-friendly experience with enhanced navigation for easy flight booking and travel planning. The project prioritized responsive design, ensuring a seamless experience across all devices, whether at home or on the go.
Problem
Solution
I aim to help budget-conscious travelers find the most efficient, cost-effective routes, ensuring they don’t miss valuable savings and convenience.
A website redesign focused on making flight comparisons more convenient and visually intuitive.
Research 1: Competitor Analysis
Compared to other airlines, WestJet's design feels less modern than Air Canada's and lacks the smooth user flow of Swiss Airlines. EasyJet offers a cleaner homepage and better user flow, with features like auto-jumping to relevant sections. WestJet’s main page has excessive white space and needs improvements in the background, font colour, and hover/pressed effects.
Research 3: Interview
Interviewed 7 participants mainly following them through their booking story and asked follow-up questions
Takeaways:
-
Mobile view offers limited info due to screen size, so users prefer larger screens.
-
Participants download apps for easy check-in and record keeping.
-
Users often forget details like luggage info or timing.
-
Many prefer booking through travel agencies for updates, personalized service, and lower prices.
-
Package deals are popular.
-
Price is prioritized over time or convenience when choosing travel options.
Persona
Low-fidelity Wireframes
Usability Test
5 Participants attended zoom meetings, the goal is to gain comprehensive insights into user interactions with the wireframe to understand their behaviour and ensure a seamless user flow.
Success Metrics
-
Task Completion Rate
-
Error Rate
-
Comparison Feedback
-
Ease of use
-
Appearing Rank
Task Flows
-
Flow 1: log in to view upcoming trips and select seats in advance
-
Flow 2: find the status of a flight
-
Flow 3: book a flight from the landing page
-
Flow 4: compare flights through classic mode/express mode
Key Insights:
-
Users were confused by the "compare flights" section on the search page.
-
The card sorting feature looks modern but may be challenging for developers to implement.
-
Three participants preferred the new design, noting it guided them through the booking process with fewer distractions.
-
All users found the main flow easy to navigate.
-
The design received an average rating of 3.7, with some details needing refinement.
Conclusion
Project Insights
I learned the value of researching competitors' websites to identify strengths and areas for improvement, uncovering opportunities for my own designs. Additionally, creating a component UI kit proved to be a more efficient approach.
Challenges Faced
The most challenging part was creating a unique idea for the website that stands out from competitors, given the standard format for flight search and booking pages.
Lessons Learned
This project taught me to think responsively and understand user interactions across different screen sizes.
I enjoyed making the prototype interactive and observing user testing in Figma. Users clicked on elements I hadn't considered, leading to iterations that improved the website's user-friendliness.
Unexpected Findings
Many participants preferred booking through agents for cheaper fares and personalized experiences. To attract these users to the official website, I streamlined it to include only the core features for booking a flight, leading to the creation of an "Express Mode" for those who prefer simplicity.