Merrie's Portfolio
coverIFE.png

Altitude

Altitude is a project created by Maria Hristoforova - product designer and graphic and media design student @ual. Altitude is one of the final major projects for my bachelor’s degree and was created in 2019. It’s a modern vision of what inflight entertainment could be in today’s technology driven world. The screens developed are all designed for an iPad, but their concepts could easily be tweaked for other platforms and devices.

Altitude (Self Initiated Project)

iOS (iPad & iPhone), November 2018 - May 2019, GMD Year 3 Final Major Project, Individual

Brief

Create a universal in-flight entertainment system, which can be used by every airlines, across all devices and screen sizes.

If you want to see the full design process, check out the Figma file

coverIFELongg.png

Living abroad and having a soft spot for cheap travel means that I find myself on a plane quite often (about 30 times in 2018). Most of the flights I've been on are operated by the so called 'low budget' airline, meaning that there is probably no flight entertainment at all. The other ones where there was one, I've always thought that the interface and experience could be so much more efficient and better-looking.

The Challenge

Back when I first started flying, in-flight entertainment was better than anything you could bring onto a plane and it was also considered a huge luxury to have onboard. Now, those systems are often outdated, hard to upgrade and very expensive to support. Not to mention that they're prone to error and not as sensitive to touch as modern touchscreens are and should be.  Oh, and they don't support accessibility. Great.

Technology

 

User Research

To start the process, I conducted a poll with my friends and followers across social media, related to flying and in-flight entertainment. I managed to get a good variety of people to participate, however the majority are younger, 18-30, so it would be harder designing for older passengers.

You can find the full results here

 
 

Deductions from the above user survey:

  1. 18-25 y/o fly with cheap airlines with no IFE and they would prefer to use their own device.

  2. A lot of people struggle physically and/or mentally during a flight.

  3. The main feature passengers use the system for streaming Movies and Music.

  4. 30+ y/o still prefer the integrated tablet

What current IFE Systems lack

Apart from plain UI issues, IFEs turned out to have a lot of gaps and holes to fill.

Amongst the people I interviewed, a big percentage shared that they have physical and mental struggles during a flight / related to flying - something that current systems don’t have. Despite them focusing on ‘entertainment’, the wellbeing of passengers should be something airlines are thinking about. On the same note, none of the existing IFEs offer any settings towards accessibility - practically making it completely useless for a significant amount of passengers.

 

Here’s what I added to the IFE system and why

  • Assist page (mentioned above): Offers stretches and cabin exercises, as well as meditations/casts/animations etc. to ease anxiety/claustrophobia/fear of flying etc.

  • Accessibility features: As part of the app settings, provides options for colour themes, voice control, colour filters, dynamic type etc.

  • Connected Experience: Different passengers have different expectations. There is no need to completely omit integrated hardware. Devices can work collaboratively - connecting them will allow them to excel at what they do best, but also have a fallback for passengers who don’t have a phone. By introducing a ‘connect’ feature, the user has the ultimate freedom to decide how they’re using the system - on a provided device, on a personal device or on both.

  • Personalised Home Screen Recommendations: Home screens are usually very random - there’s little to no hierarchy and no particular reason you’re seeing what you’re seeing. Adding recommendations based on different properties would utilise the page and make it more valuable to the users.

    • Time Based Recommendations: Day/Night (ex: Good Morning! Raise the blinds? Morning News. Coffee Playlist?)

    • Flight Pattern Based Recommendations: 40min to meal. See menu? Order drinks?

    • Flight Time Based Recommendations: You have 3hours. Watch this. Or that.

    • Geographical: You’re flying over Greenland. Learn facts about Greenland. Watch a movie.

  • Branded Themes: The idea of a ‘universal’ IFE system probably wouldn’t appeal to airlines, as it will strip it from the brand identity. Having the option to apply brand customisation to a monochromatic UI will create a consistent system in terms of flows and use, while still keeping the airline’s brand in tact. It’s the best of both worlds.

 

App Map/Flow

UI Solutions

Global Navigation

One of the biggest issues with existing IFEs is the confusing, multi-layer navigation. Whether it’s a sidebar with 3 layers of nesting or a top and bottom tab bar or a dish mash of all of the mentioned, they put the user in complete discomfort - since the global nav is mainly used to navigate to your content or adjust the experience in a momentary need.

The first few rounds of iterations did look clean, but still used some type of nesting, which ended up taking way too much space on the screen. Another problem I encountered was that there were too many levels of alignment, which made the interface feel busy.

 
V1 Iteration

V1 Iteration

V2 Iteration

V2 Iteration

After a few more rounds of iteration and adding in content, I realised I don’t fully like any version, but I prefer the one that has bigger icons and a slimmer overall look. I put it against another screen I was simultaneously working on, to get a feel of what the design would look in context. I ended up going for a smaller horizontal secondary navigation, which not only took way less space, but also was less intrusive to the other part of UI and had a visual consistency to the primary nav.

 
Development against the Movies gallery screen.

Development against the Movies gallery screen.

Final Version

Final Version

 

Mini Player

While designing the music page, I realized that the flight progress bar might open up a problem with having space for a music player. Due to project limitations and time constraints I decided it’s not wise to revisit the entire concept of the tracker, so I experimented with different ways of showcasing a music player. I tested both options that limit the user to listening to music only in that page and ones that are global.

 
v1- player inside the music page

v1- player inside the music page

v2 - mini player concept where the player can be accessed from any page

v2 - mini player concept where the player can be accessed from any page

 

After that initial iteration & a quick ask on an Instagram story, I made the decision to go forward with the mini player concept - something I had initially seen being implemented at Shazam. It’s draggable, so the passenger can put in anywhere on the screen for easy access to the tracks they’re listening to. I did end up with 2 more sizes of a player, which can either let you immediately swipe between songs or choose a particular song from the playlist.

 
Mini Player

Mini Player

Small Player

Small Player

Large Player

Large Player

 

Settings

As I mentioned, nearly all current existing in-flight systems lack any accessibility features. I really wanted to try and do something that help all people use the product, so I started learning about accessibility and ways UI can help different types of visual impairments. I also went through the WCAG guidelines head to toe to examine what needs to change in the design in order to meet them.

I ended up working around a settings page, which offers users more control over the way the interface looks - changing colour themes, light and dark mode, typographic alterations etc. For now I’ve developed 2 main themes - Accent & Monochrome, however they both have a day & night mode, totalling in 4 colour variations available.

 
v1 - Fullscreen with a list

v1 - Fullscreen with a list

v2 - Exploring groupings

v2 - Exploring groupings

v3 - Bottom card with options & swipe through filters

v3 - Bottom card with options & swipe through filters

 

The first iteration did not look great at all and I found one big problem particularly with the first 2 options - a full screen settings overlay does not allow the user to see the changes they’re making, which will be a pain. I liked where the 3rd version was going, but it wasn’t quite right, so I decided to push that forward and see ways I can fix it.

One thing that I needed to pin down was exactly what controls the app should be offering, so I started looking at what other apps use + reading a few case studies and compiled the most popular ones that fit the context of this product.

 
v1 - Bottom Card Exploration

v1 - Bottom Card Exploration

v2 - Side Panel Exploration

v2 - Side Panel Exploration

 

Both version could work and I did personally like both of them, however I did test the 2 designs with a few people and noticed the right panel was generally more well perceived on the tablet. So I decided to move with that version, but keep the bottom card for mobile as a floating right panel won’t really work on a mobile device.

 
Light Monochrome

Light Monochrome

Dark Monochrome

Dark Monochrome

 

Flight Progress Bar

Looking at existing IFE Systems, one UI flaw that reoccured was the way the flight progress/details was accessed. Usually it’s part of the main home screen or is accessible on a separate page, which is often hard to access. Although I have decided to keep this information as part of the home screen as well, I decided to include a global flight progress tracker at the bottom of the screen which could be expanded to display full flight information.

 
a-expanded-1.png
a-expanded-4.png
2.png
 

My reference point for this was the top half of the Home Page I designed. During my research I noted down the main information that airlines usually display for flight progress and worked off that to create the layout. My only problem is how this would work on mobile - definitely not docked to the bottom, at least not the iPhone X/XS/R family, because of the home indicator which will overlap with the bar.

 
 

Notifications

Usually notifications shown on airplanes are to inform you a verbal announcement is in process. I have found there are 2 main issues with that approach - not giving any context to the nature of the announcement can cause anxiety to passengers. Also having the announcement being delivered only through sound makes it difficult, if not impossible to get it across to people with hearing loss.

 
Layout exploration

Layout exploration

Visual style and colour treatment

Visual style and colour treatment

 

I explored a few visual styles and positioning for the notifications, but the one on the bottom of the screen felt the most natural. I also tested a few colour variations, but decided to keep it black and white, unless it’s a high danger situation such as an emergency landing.

 
 

Colour Themes

Part of the “universality” of this concept is thanks to the colour theming that can be applied. When an airlines buys this product, they can apply their own fonts and brand colours to create an accent theme. Both the monochrome and the accent themes have a dark mode. Having so many theming options not only helps the brand make the interface their own, but also helps with legibility and accessibility for passengers with visual impairments.

 
Monochrome Light

Monochrome Light

Monochrome Dark

Monochrome Dark

Accent Light

Accent Light

Accent Dark

Accent Dark

Pages

Connect

Welcome

Welcome.png
Connect.png
 

Home Page

HomePage03.png
HomePage01.png
HomePage02.png
 

Movies

Movies.png
MovieDetail.png
Player.png
 

Music

Player01.png
Player02.png
Player03.png
 

Services

Services01.png
Services02.png
Services03.png
 

Assist

Games

Games.png
Assist.png
 

Mobile Versions

Movies

Home.png

Music

Music.png
 

Games & Assist

Service

Service.png
 

Settings

Home Page

Home.png
 

Interaction Design Examples

Navigation

Settings

Changing between Light and Dark themes, as well as Dark modes

Changing between Light and Dark themes, as well as Dark modes

Expanding secondary navigation

Expanding secondary navigation

Movies

Labels Shortcut

Labels Shortcut

Movie Reveal

Movie Reveal

Music

Small to Medium Player

Small to Medium Player

Medium to Large Player

Medium to Large Player