My Role

Designed end to end experience that included defining product needs, target users, top user scenarios, flows, interaction detail and final visual design. 

 

Goals

Design a new in-flight entertainment system for United Airlines that helps children (5yr-10yr) easily find content to watch, play games, and discover other fun activities.

Process

Screen Shot 2019-04-02 at 8.08.25 PM.png

It is not a linear process, at any giving point if I realized there is anything missed, I went back to previous step and reiterate on my approaches or search for other solutions.


Discovery & Research

Primary audience (5-10 years old children)

  • Ages of discovering the world and asserting their identity.

  • Move into a stage of intellectual growth. At school they will be learning to read and write.

  • Start developing their own opinion, have their preference. For example: kids this age will often have a favorite TV show or movie. They tend not to keep this a secret

  • Account for age ranges. A content which is great for a 5-year-old may not be very good for a 7-year-old and is almost certainly going to be a total miss for someone who’s 10 or older 


Secondary audience (Parents)

  • Julie, the primary decision maker to choose what her son watches 

    “I try to limit his time on screen, I usually bring books, activity books or drawing books. Domestic flight doesn’t have free entertainment, so I use amazon fire if he wants to read or watch. For international flight, when they have more free shows, I do let him watch.”

    “The remote control is too complex for kids, especially the touch screen is far to reach for kids, they are relying on the remote control to select the options”

  • Wei, gives kids full control but oversees what they watch

    “We usually bring tablet, some toys. Mostly, they will just watch the inflight entertainment. They will choose the content they like in the kids section”

    “They use screen control mostly. The device usually is not that responsive, it needs to click few times to navigate through content. It would be good to leverage more modern touch screen control, because we are very used it”


Understand the IFE (In-flight Entertainment)

  • Seat-back Screen (the platform I designed for)
    Touch screen sensitive, allowing interaction between each seat in the aircraft and the flight attendants. 

  • Second-screen Platform
    Enables passengers to select, control and enhance their multi-media experience. It provides contextual remote control capabilities for the monitor and can be used as an independent handheld screen for many applications, enabling multi-tasking.

  • Personal Device
    No hardware obsolescence. Contents are streamed directly on passengers’ devices: smartphones, tablets, or laptops. The experience can expand on ground, before and after the flight.


Conceptual design

Keyword exercise

I like to put down some random keywords to help me construct my thoughts. It also helps me to capture my understand. For example: on boarding experience, content categories, parenting control, physical control vs touch screen etc. From those keywords, I can start building use cases. 

IMG_4928.jpg

Top use cases

  • On boarding

    • Boarding information, kid passengers

    • Personalized experience, tailored for kids entertainment system

    • Airline mascot

    • Welcome message

    • Switch viewer experience



  • Explore and Discover

    • Navigate by tapping, scrolling etc.

    • Physical controller vs. touch screen

    • By content categories, themes or characters, ex: Peppa pig

    • Age recommendation

    • Content detail and information for parents and children

  • Viewing Experience

    • Duration

    • Control panel (pause, play, volume, brightness, game interaction

    • Access to other global settings

    • Break time after certain time

    • Other recommendations

Product STRUCTURE

Screen+Shot+2019-04-02+at+8.34.47+PM.jpg

Explorations

Main screens

Screen Shot 2019-04-02 at 8.37.38 PM.png

Controller

Screen Shot 2019-04-02 at 8.37.56 PM.png

Detailed Design

Design Principle

Goal-centered 

  • Prevent unintended actions 

  • Use visual aids to improve recognition and recall

Simplicity 

  • Remove unnecessary complexity

  • Keep it clear and consistent

  • Show only relevant information

Visual Reference

Screen Shot 2019-04-02 at 8.50.31 PM.png

Visual Guideline

In general, I tried to keep components minimal and simple so the younger age users can memorize and adapt it easily. 

The primary colors are from United Airline brand guideline and it tends to be more on the mature and sophisticated side, I added secondary color as highlight to create more fun and energetic feeling. 


Final Visual

On Boarding Experience

The visual design strategy is to create a fun and engaging look and feel. By using those characters, I created a vacation mood to excite the users. I also leverage the mascot to give more personality to the system. Teddy is here as an assistant to make the joinery more fun. By using conversational content, I tried to encourage users going through the preference setting flow. 

The idea of using this interactive module is to capture users preference, so the system is able to provide better and more appropriate content.  It is also a good chance to introduce the UI component and interaction to help users get familiar with it.  

Discovery & Viewing Experience

In general, I placed global setting on the top right because young age users most likely won’t interact with it much. However, they can access it from controller when it’s needed. They mainly focus on browsing and discovering the content. I created an age badge that can help users quickly scan through the content fits their age. Another design approach is to use more visual aids over text and only provide content when it’s needed.

In additional, set up a mandatory 30 seconds break time. It can be trigger at the end of a movie, or after spending more than 60 mins on the screen.  

Discovery & Viewing Experience

Another main design challenge is to simplify the remote. The key controller includes power for turning the system on and off. Setting button can be contextual based on which screen you are at. For example: during viewing experience, setting can trigger subtitle and audio preference. Meanwhile, users should have direct access to control screen brightness and volume. 

However, majority of tasks can be achieved by up, down, right or left buttons. Therefore, it takes half space of the controller.


Conclusion

As designers, we may all know that feeling once we start working on a project, we would expect to have a comprehensive design outcome. For this particular project, I am curios about how long it would need, so I decided to time the project and see how much time I spend on each process. We all understand that design is an iterated process and it can never ends. If I have more time, I will spend on polishing the visual design, and do a quick user testing to validate my design approach.

Screen Shot 2019-04-02 at 9.06.21 PM.png

Reference

Audience

  • http://www.passage.lu/rites-of-passage/children-5-10-years/

  • https://lifehacker.com/an-age-by-age-guide-to-entertaining-children-1790403536

  • https://schoolofgamedesign.com/project/design-games-for-kids/

  • https://gamedevlibrary.com/gamedev-thoughts-how-to-design-games-for-kids-and-younger-audiences-1e6e96fd416a

  • https://medium.com/@karinai/design-principles-for-kids-886bb781358f

  • https://medium.com/@Appseecom/how-to-create-the-best-mobile-app-for-kids-af3ae8dd79dc

Design

  • https://www.behance.net/gallery/54072987/Level-Inflight-Entertainment-System-and-Web-Portal

  • https://www.behance.net/gallery/53784055/Qantas-Inflight-Entertainment-System

  • https://www.pinterest.com/pin/549157748290902851/

  • https://www.behance.net/gallery/18334649/Air-New-Zealand-In-Flight-Entertainment-GUI

  • https://www.behance.net/gallery/46700631/Game-console-UIUX

  • http://unitedprivatescreening.com

  • https://imagikcorp.com/remember-designing-flight-entertainment-systems/

  • https://apex.aero/2017/11/17/how-to-design-modern-in-flight-entertainment-graphical-user-interface

  • https://www.usatoday.com/story/travel/flights/todayinthesky/2018/08/09/united-airlines-new-colors-brand-update-include-runway-gray/948207002/

  • https://liveandletsfly.boardingarea.com/2018/08/10/united-airlines-brand-image/

  • https://uxplanet.org/the-power-of-mascots-in-branding-and-ui-design-5973d12be955

Other source

  • https://thenounproject.com

  • https://www.freepik.com/free-vector/cute-summer-penguin-characters_1150061.htm