HyperCommute Infotainment System

HyperCommute is building next-generation transportation systems with a focus on high-speed, luxury commuter railways. The infotainment system will give the passenger the ability to control the system from their mobile device. The experience will support the ability to adjust their cabin experience (e.g., lighting, temperature), request service items (e.g., beverages, pillows, headphones), and stay informed about their journey.

My challenge is to design a personal infotainment experience, which passengers can control from their mobile device.

Define Objectives & Identify Problems

The ultimate goal is to create a premium infotainment experience with mobile connectivity that caters to its upscale clientele. To more effectively achieve this goal, I broke this objective down into more manageable goals:

1. Fit all the user’s needs and wants into the system

2. Make it fast and easy to use for everyone

3. Give it a premium, high-end look and feel

Existing infotainment systems lack many features and options that passengers have come to expect or be provided. The problem is compounded for passengers who pay a luxurious premium to get a best-in-class experience.

Research

To start, I conducted in-person interviews where I asked a set of questions to get a clearer perspective of what passengers want and don’t want out of their infotainment system. Because it’s extremely rare to find anybody who’ve ridden on a high-speed luxury commuter railway, I opted to survey ten of my friends, family, and colleagues who have flown first-class or own luxury cars with infotainment systems. Although not one-to-one, these systems seem to be the closest comparison.

1. What do you use the infotainment system for?

2. Of the infotainment systems you’ve used, what did you like about them?

3. Of the infotainment systems you’ve used, what didn’t you like about them?

4. What features and options would you want in a high-end infotainment system?

5. If you can have your phone connected to your infotainment system, what would you want out of it?

2 & 3. “Of the infotainment systems you’ve used, what did you like and didn’t like about them?”

4. “What features and options would you want in a high-end infotainment system?”

5. “If you can have your phone connected to your infotainment system, what would you want out of it?”

Brainstorm & Ideate

With the feedback provided from my survey, I went to the canvas and started laying out preliminary ideas, layouts, and flows for the interface. I wanted to consider all the desired features and options while maximizing the pros and eliminating the cons. I explored multiple options that could fit fit these criteria. Eventually, I opted for a carousel-driven card interface:

• Able to present all the features and options neatly on-screen while still leaving enough space in the main content area for cards to show detailed information

• Every screen can be presented in the same structure

• Allows the passenger to customize and personalize their home screen with the content they want

Wireframes

Style Guide

Before bringing the wireframes to high-fidelity, my next step was to create a style guide. This would give me a good idea of the overall aesthetic and to help me create high-fidelity designs more efficiently using styles, components, and symbols. To start, I created a mood board containing other real-world infotainment interfaces. My thinking was to make this luxury commuter railway infotainment system look and feel like the other interface systems its potential high-end clients also use, creating visual association and an emotional connection.

I created a style guide taking inspiration from my mood board. I opted for a dark theme that many of the high-end infotainment systems also use. Also for usability purposes, this would cause the screen to emit less light to be less bothersome to neighboring passengers. However, the passenger can go into the settings and switch to a light theme if they so choose for better readability of digital reading materials in-system (books, magazines, etc.) or for direct sunlight conditions. I also chose blue as the primary color as it works for both the aforementioned dark and light themes, and is easy on the eyes for long-term usage.

Final Designs

With the style guide in place, it was a matter of using my wireframes as a reference while I finalized my designs applying the styles and components established.