Wunderlust
Flight booking website
Project
The UX Design Institute assigned me this project as a requirement for my professional diploma in UX DesignThe Challenge
The client is a start-up airline called Wunderlust. They’re looking to create an online experience that is fast, easy, and intuitive: one that’s based on a deep understanding of their target usersMy Role
I was involved in the end-to-end process, which encompassed research, ideation, prototyping, wireframing, writing, and visual concept design.The goal
My goal was to design an airline for the client, with a specific focus on the flight booking process. I concentrated on how users searched for and selected flights online. The end goal was to create and develop a clickable prototype that could be tested with users, accompanied by a comprehensive set of wireframes.The process
I utilized a user-centered design process that involved a research phase, followed by analysis. Subsequently, I progressed to design and prototyping, which required validation through usability testing. Finally, I completed the project by handing over the wireframes and delivering them.
Research
Before making any assumptions, my initial approach was to understand user needs, preferences, and pain points. I also aimed to gain an understanding of how other airlines were addressing similar challenges. To achieve these goals, I conducted online surveys, usability testing, and competitive benchmarking. This process revealed numerous pain points and opportunities for improvement. Additionally, I gained valuable insights into UX conventions that ultimately guided my project's design.Online- Survey
Online surveys have played a significant role in my UX design journey as a valuable research method for gathering user insights and feedback. Through utilizing online surveys, I have been able to gain a deeper understanding of user needs, preferences, and pain points.Quantitative insights:
- 6/10 visited airline websites in less than 4 weeks
- 8/10 prefer to use the computer/Laptop to visit airline websites
- 3/10 Ryanair was the most cited airline, followed by Air lingus (2/10)
- 6/10 prices and offers were what most motivated people to buy from that airline
- 2/10 bought with another airline as this was the only one operating at the destination
- 4/10 The main determining factors for deciding which airline to buy tickets on were tied: price and day/time
Usability testing
I believe usability testing stands as the most powerful tool available to a UX designer. It grants us the opportunity to directly gather valuable insights from users, which, in turn, greatly informs our design decisions. By leveraging these insights, we are able to create products that are truly user-friendly.Method: I conducted remote moderated testing, recording subjects' interactions, facial expressions, and voice via Zoom for additional contextual information, which I referenced while taking notes.
I invited an airline customer to participate in a comparative test involving two different airline websites. The purpose was to observe how different companies approach and solve similar problems. To begin, I explained the objectives and goals of the test, and then provided the participant with a specific scenario to navigate through the websites of Ryanair and Swiss Airlines.
In particular, my aim was to gain insights into the following aspects:
- Test participant behavior when booking a return flight for two people on the Ryanair and Swiss Airlines websites.
- The primary goals of the test participant.
- Identifying elements that cause friction during the process.
- Identifying elements that aided the test participant during the process.
- Understanding the test participant's expectations for each page, including what they expected or did not expect to see.
- Determining which information was deemed relevant and important by the test participant.
- Assessing the test participant's positive and negative emotional reactions while using the websites.
- Evaluating the ease, speed, and overall experience the test participant had with the booking process.
Key takeaways: :
- The subject unintentionally forgot to add a passenger during the booking process and only realized this oversight upon reaching the Review and Checkout page.
- Due to the inability to make edits during the booking process, the subject was required to restart the entire process. This unfortunate limitation resulted in the user losing valuable time.
- The subject faced challenges when selecting the fare due to unclear call-to-action (CTA) buttons, leading to confusion and hesitation.
Competitive Benchmarking
I aim to learn from best-in-class websites and apps on how they solve the problems we are addressing. This includes understanding the conventions we should adhere to and identifying best practices that we should strive to emulate.
Analysis
Once the research phase concluded, I was left with a substantial amount of data that required analysis and organization. To accomplish this, I employed two key methods: the affinity diagram and the customer journey map. These techniques facilitated the structuring and visualization of the research findings.Affinity Diagram
This method is a fantastic tool for organizing extensive raw data, and it also promotes effective communication and a shared understanding of the product being developed. To accomplish this, I invited a friend of mine to assist me with the project.
We began by reviewing all the prior research I had conducted, taking detailed notes and writing relevant comments on individual post-it notes. Instead of using a wall, we utilized a table to arrange and organize the post-it notes, focusing on goals, behaviors, pain points, mental models, and contextual information. After several hours of intense brainstorming, we completed the process with a table filled with valuable information. Subsequently, we compiled the relevant information in a meaningful manner, grouping them together and assigning appropriate labels.
Customer Journey Map
My next step was to create a customer journey map to further organize and analyse the raw research data. I opted for Figma to design the customer journey map. The customer journey map proved to be an invaluable tool in visualizing the user experience when interacting with the software or website, enabling me to see things from the customer's perspective. With the completion of this phase, I had a highly structured output and a deeper understanding to guide the design of my airline website.
Design
Having defined and analysed all the data, it was time for me to embark on designing the airline website. My primary goal was to address and resolve the issues I had discovered during my research, as indicated on the customer journey map.
To accomplish this, I employed various designing techniques including flow diagrams, an extensive number of sketches, medium-fidelity prototypes, and wireframes. These tools enabled me to visualize and iterate on the design process effectively.
Flow Diagram
The data derived from my research and analysis played a crucial role in defining the high-level flow for booking flights on the new airline website. To begin, I utilized Figma to sketch out the flow diagram, which served as a visual representation of the user journey throughout the booking process.
Sketch
At this stage, I confidently sketched screens for the flight booking website, considering the main flow, key issues, benchmarking insights, and design conventions. After multiple iterations, I finalized seven screens that covered the entire booking process, from flight search to seat selection and checkout.
Prototype
Using Figma, I designed an interactive medium-fidelity prototype for the Wunderlust flight booking process. My goal was to create a prototype that captured enough detail to test the high-level flow, screen layouts, text, and basic interactions effectively.
I gave careful attention to the following aspects:
- Ensuring consistency in layout, shapes, and whitespace to create a seamless user journey.
- Establishing a clear visual hierarchy and appropriate button sizes for enhanced clarity.
- Focusing on the tone of voice, visual design, and UX writing to deliver an intuitive website experience.
Validate
To test and validate the solution, I invited two friends to participate in a usability test. I provided them with an explanation of how the prototype worked, presented them with a scenario, and observed their interactions and reactions. Following the test, I gathered feedback on their experience in completing the task.Design annotations and Handover
During the final stages of my work, my main focus was on creating a comprehensive set of wireframes that included all the necessary details, such as feedback, guidelines, content, and animations, to facilitate accurate website development. I dedicated significant time to adding detailed notes, ensuring that all aspects were thoroughly covered. This not only saved valuable time for the developers but also minimized the potential for miscommunications or misunderstandings.
To ensure the effectiveness and real-life applicability of the wireframes, I sought feedback from two Full-stack developer friends. Their input was invaluable in assessing the understandability and alignment of the wireframes' design annotations.
Click to view the annotations
UI Design
Although not initially required in the course, I found it important and challenging to create high-fidelity user interface screens based on my sketches. This allowed me to focus on polished visual design, establish a basic brand identity, and incorporate appealing imagery. It was crucial to ensure a consistent level of fidelity to avoid any potential confusion during user testing.
For the visual style, I aimed for a clean and friendly theme, which was reflected in the selection of images, icons, colors, and fonts.
Using Figma, I iterated through four versions until I reached the final design that would proceed to the final prototyping phase.
Lastly, I designed the Wunderlust company logo as a way to enhance the authenticity of the project and showcase my willingness to tackle challenges and expand my skill set.
Bussiness Benefits
The success of designing the Wunderlust website would be evident through measurable improvements in various areas, including:
- Increased revenue: A successful design would lead to an uptick in sales and revenue generation.
- Reduced cost: A well-designed website can streamline processes and reduce operational costs.
- Increased customer acquisition: The website's design can attract more customers and expand the customer base.
- Increased conversion: A user-friendly design can enhance the conversion rate of visitors into customers.
- Increased customer satisfaction: A positive user experience can result in higher levels of customer satisfaction.
- Increased customer retention: A well-designed website can foster loyalty and encourage repeat business.
- Reduced customer churn: A successful design can help minimize customer attrition and retain existing customers.
