Wing Airlines
Project: RMIT UI Design Course Final Project
Role: Student | brand design and interaction design
Overview: I applied methods of UX/UI design to create a clickable prototype/mobile website for a fictional airline. I developed the brand of Wing Airlines as the case study for this project.
Problem Statement
Wing Airlines is a fictional airline that seeks to promote its ultra-comfortable yet economical flights via a mobile website. The Wing Airlines brand and mobile website should distinguish itself within the competitive world of low-cost carrier airlines.
According to the provided project brief, the UX team has already conducted the following tasks:
Desk Research
User Interviews
Ideation
Concept Design
User Testing
Low-fi wireframing
Goal: Develop a brand for Wing Airlines and create a clickable prototype for the mobile website. Users should be able to book a flight, browse flight deals, and learn more about airline services.
Low-fi wireframes and customer personas provided as part of the case study.
Brand Development: Mood Board
I created a mood board that would influence the design for the Wing Airlines brand and mobile website.
Inspiration
Dynamic and swift looking fonts that evoke the feeling of flying.
Brand colors inspired by nature and birds.
Best practices from competitor mobile websites.
Clean and modern icons that would be easy to understand in a mobile experience.
Imagery to show the fun of traveling and Wing Airlines experience.
Component Library
I created a component library that would form the backbone of my design. I found components to be incredibly convenient when using them across multiple screens. The component library was not only time-saving, but also ensured a consistent visual identity throughout the Wing Airlines experience.
UI Flow
I mapped out a UI flow chart to give me an idea of the different screens required for the user flow of booking a flight. This helped me see what states of the UI stack would be necessary to accompany those screens. I could also use this flow to note where any pain points for users might arise.
Mid-Fi Wireframes of Desktop, Tablet, and Mobile Screens
I iterated a set of mid-fi wireframes based on the mood board, UI flow, and low-fi wireframes provided by the brief. I created three versions of the home screen—one for desktop, tablet, and mobile. Creating the home page in these three formats helped me to understand the limitations and relationships between each device layout. It was good practice in seeing how I could simplify my design and highlight the most important feature—like booking a flight— for a mobile screen.
Mid-Fi Usability Testing
I conducted usability testing with three users on the mid-fi prototype. The users embodied three different personas expected to produce repeat business for Wing Airlines: a business traveler, a leisure/price-sensitive traveler, and a frequent flyer program enthusiast. Each user was familiar with airline websites and mobile apps. I added photos and detailed content to the prototype to simulate a more realistic experience for users.
Affinity Mapping and Synthesis
I conducted qualitative interviews and usability testing with the three aforementioned users—a business traveler, a leisure/price-sensitive traveler, and a frequent flyer program enthusiast. The interviews helped me to understand the challenges and motivations each of them face when using the mobile website. Data was captured on digital post-it Miro boards which were used for affinity mapping and synthesis. See examples of comments captured during interviews.
Insights
Users want to know what to expect in their experience—what they’re paying for and what they’ll get for that money.
They seek comfort in knowing exactly what to expect going into their trip.
Frequent flyer programs are important. They would like more information on benefits of this program.
Users want clarity on extra costs, fees, and what’s included so they can make the most informed choice—from meal ingredients to baggage fees.
Users may struggle with reading prices, pushing buttons, toggles, etc.
Design Decisions
Break down all of the costs for services during the booking process.
Include accurate photos of the experience like food options, seats, and in-flight entertainment.
Include a Call-To-Action to learn more or sign-up for a frequent flyer account.
Use a clearer font for prices and increase the size of buttons to accomodate users with mobility issues. Comply with accessibility standards for colors and fonts.
Hi-Fi Prototype
I finally iterated a hi-fi prototype that reflected user preferences based on the testing sessions and insights gathered in the mid-fi stage.
You can test out the hi-fi prototype by clicking the button below or on the prototype photo to the right.
Please test it by booking a trip to Chiang Mai, Thailand.
Since this is a prototype, you will be unable to browse specific travel dates and flight times. However, you can browse deals, learn about the Wing Experience, Benefits, and visit the Help Center.
Outcomes
This project confirmed for me that UX/UI design is the next step for me to grow my career. This kind of work suits my skills and strength in visual design. I enjoy the social aspect of interviewing users and synthesizing their feedback to gain a deeper understanding of the user experience. It was rewarding to design a brand and visual identity from scratch and see the results laid out in a clickable prototype.
Image References
Interior photos of A220-100 airplane by Airbus
In-flight entertainment photos by Air France
Avengers and Eternals posters by Marvel and Disney