United Airlines
United Airlines
UX Research | UI/UX Design | Product Design
UX Research | UI/UX Design | Product Design
In-flight entertainment (IFE) on new planes no longer means staring into tiny, hard-to-see overhead monitors. They have become sophisticated seat-back computers loaded with more movies than most multiplex cinemas, or wireless setups that stream content to passenger’s smartphone or tablet.
The goal of this project is to explore the user needs, airline requirements, and necessities to design a prototype for United Airlines in-flight entertainment (IFE) system that facilitates the user needs during flight and keeps them entertained.
In-flight entertainment (IFE) on new planes no longer means staring into tiny, hard-to-see overhead monitors. They have become sophisticated seat-back computers loaded with more movies than most multiplex cinemas, or wireless setups that stream content to passenger’s smartphone or tablet.
The goal of this project is to explore the user needs, airline requirements, and necessities to design a prototype for United Airlines in-flight entertainment (IFE) system that facilitates the user needs during flight and keeps them entertained.
Team
Team
Myself
Myself
Role
Role
End-to-End Product Designer
End-to-End Product Designer
Timeline
February 2021 - June 2021
Research
Research
In-Home Entertainment System
Deconstruction
In order to get myself familiar with available entertainment systems, I began this project by deconstructing the in-home entertainment system of a smart TV. I documented three levels of deconstruction and represented it through the flowchart diagram.
In order to get myself familiar with available entertainment systems, I began this project by deconstructing the in-home entertainment system of a smart TV. I documented three levels of deconstruction and represented it through the flowchart diagram.
The deconstruction process helped me to understand the importance of a good user experience and learn from the information structure of the Apple TV system.
The deconstruction process helped me to understand the importance of a good user experience and learn from the information structure of the Apple TV system.
Mind Map
I created a mind map in Miro to help me brainstorm ideas. These ideas focus on user experience with In-Flight Entertainment (IFE) system, showing the user needs, problems, and wishes. These ideas helped me to formulate the questions for my user survey.
I created a mind map in Miro to help me brainstorm ideas. These ideas focus on user experience with In-Flight Entertainment (IFE) system, showing the user needs, problems, and wishes. These ideas helped me to formulate the questions for my user survey.
User Survey: Questions
With the ideas gathered from the mind map, I formulated my questions and came up with a 10-minute survey questionnaire in Google Forms.
With the ideas gathered from the mind map, I formulated my questions and came up with a 10-minute survey questionnaire in Google Forms.
User Survey: Results
From the survey, I have gathered all the responses from the participants, and here are some of the responses showing pain points and gain points. This result shows the overall user experience with the IFE system.
From the survey, I have gathered all the responses from the participants, and here are some of the responses showing pain points and gain points. This result shows the overall user experience with the IFE system.
These are the four common pain points from the survey responses. The result of this questionnaire helped me to create my empathy map, user persona card, and user journey map. It also helped me to make design decisions about the User Interface (UI) of the IFE system.
These are the four common pain points from the survey responses. The result of this questionnaire helped me to create my empathy map, user persona card, and user journey map. It also helped me to make design decisions about the User Interface (UI) of the IFE system.
Empathy Map
User Persona Card
User Journey Map
Competitive Analysis
For the competitive analysis, I researched the top airlines in the world and also looked at the participants’ responses on their airlines preference in regards to the IFE system. I created a competitive analysis of 6 airlines (Singapore Airlines, United Airlines, Qatar Airways, Delta Air Lines, Emirates, Cathay Pacific Airways) and organized them in Miro.
For the competitive analysis, I researched the top airlines in the world and also looked at the participants’ responses on their airlines preference in regards to the IFE system. I created a competitive analysis of 6 airlines (Singapore Airlines, United Airlines, Qatar Airways, Delta Air Lines, Emirates, Cathay Pacific Airways) and organized them in Miro.
I reviewed the six existing airline apps and airline websites to create a comparison chart of various features that they offer to their passengers regarding the service and in-flight entertainment.
I reviewed the six existing airline apps and airline websites to create a comparison chart of various features that they offer to their passengers regarding the service and in-flight entertainment.
Design
IFE Flowchart
Use-Case Scenarios
Base on my IFE flowchart, I came up with 3 different use-case scenarios to show how a potential user might engage with my IFE system. Each scenario touches at least 3 to 4 different sections of my IFE system. For the interactive prototype presentation video, I’ve combined use-case scenario 1 and 2 to show a deep-involved and engaging scenario.
Base on my IFE flowchart, I came up with 3 different use-case scenarios to show how a potential user might engage with my IFE system. Each scenario touches at least 3 to 4 different sections of my IFE system. For the interactive prototype presentation video, I’ve combined use-case scenario 1 and 2 to show a deep-involved and engaging scenario.
Visual Asset Inventory
For the start of the design, I began to look at various airlines and see how they have designed their system and how they have divided the screens in terms of designs, visuals, and assets. I began my design by deconstructing United Airlines’ system and gathered their visual asset inventory. This helped me to look into their icon and button styles, color palette, navigations, and features offered. This also helped me to think more about the foundation for designing the structure of my IFE system.
For the start of the design, I began to look at various airlines and see how they have designed their system and how they have divided the screens in terms of designs, visuals, and assets. I began my design by deconstructing United Airlines’ system and gathered their visual asset inventory. This helped me to look into their icon and button styles, color palette, navigations, and features offered. This also helped me to think more about the foundation for designing the structure of my IFE system.
Hi-Fi Wireframes
After creating the visual asset inventory for United Airlines, I did some sketches on paper and came up with these high-fidelity wireframes. During this step, I tried to focus on the spacing and layout of the IFE screen. This also helped me to build a strong IFE system structure before moving on to the final UI design.
After creating the visual asset inventory for United Airlines, I did some sketches on paper and came up with these high-fidelity wireframes. During this step, I tried to focus on the spacing and layout of the IFE screen. This also helped me to build a strong IFE system structure before moving on to the final UI design.
Final UI Screen
This is the home screen of my final UI design. There are 6 features on this screen - “My Flight”, “Entertainment”, “Food Menu”, “Shopping”, “Communication”, and “Information”. These features are also located at the bottom navigation for users to easily move from one tab to another. After getting feedback from professor Anvari, I decided to add a background color to the bottom navigation so that the users will be able to navigate the system easily.
This is the home screen of my final UI design. There are 6 features on this screen - “My Flight”, “Entertainment”, “Food Menu”, “Shopping”, “Communication”, and “Information”. These features are also located at the bottom navigation for users to easily move from one tab to another. After getting feedback from professor Anvari, I decided to add a background color to the bottom navigation so that the users will be able to navigate the system easily.
The “Favorites” screen shows different entertainment categories - movies, TV, music, books, podcasts, and games. I designed it into different categories so that the users can quickly go to the category that they are looking for.
The “Favorites” screen shows different entertainment categories - movies, TV, music, books, podcasts, and games. I designed it into different categories so that the users can quickly go to the category that they are looking for.
This is the “My Flight” screen which shows the flight information, weather, flight schedule, and a flight map with an aircraft camera for people to see. I added the flight schedule so that the users will roughly know when the meal will be served. For this screen, I tried to keep all the information in rounded containers so that the users can easily get the information they want.
This is the “My Flight” screen which shows the flight information, weather, flight schedule, and a flight map with an aircraft camera for people to see. I added the flight schedule so that the users will roughly know when the meal will be served. For this screen, I tried to keep all the information in rounded containers so that the users can easily get the information they want.
This is the “Message” section where people can message other passengers. When the user turns off the announcements in the settings, they will only receive emergency announcements and all the other filtered announcements can be seen in the message inbox.
This is the “Message” section where people can message other passengers. When the user turns off the announcements in the settings, they will only receive emergency announcements and all the other filtered announcements can be seen in the message inbox.
Final Prototype
Start Screen
Key Features & Tabs
Connecting Wireless Headphones Via Bluetooth
Direct Message Feature
Screen Sharing Feature
Filtering Announcements Feature