Toyota Supra

Vehicle Infotainment

Project Overview

In 2016, Toyota, together with BMW, would bring the FT-1 concept to production as the Toyota Supra. The Supra would share the upcoming BMW G-29 (Z8) platform for its halo sports car. The Toyota Supra would be codenamed J29.

toyota-ft-1-1

TOYOTA FT-1 CONCEPT

As Creative Director on the project, I led the Designworks team in Los Angeles on the development of the Supra's infotainment system that consisted of a new instrument cluster, the center display and a heads-up display. The role also included managing budgets, resources and project timeline while coordinating the engineering and development team in Munich, Germany and Shanghai, China. We challenged ourselves to deliver a unique, premium product for Toyota that they would be proud of and for their customers love to use.

GOALS

We needed to give Toyota a great clean sheet infotainment design solution for their halo sports car product that was functionally modern and gave Supra fans a unique design that reflected the FT-1 concept.

CHALLENGES

One of the largest challenges with this project was to differentiate the Toyota and BMW infotainment systems despite the platform being BMW's iDrive. We were also limited to the screen size due to this platform sharing strategy.

Discover

A large part of our discovery process was centered around the Toyota brand and internal benchmarking. We needed to learn about Toyota and specifically Supra's fans. We also needed Toyota to guide us in understanding their digital experience strategy given their history of concept cars and innovations they had shown over the decades. Additional research provided insight into how Toyota implemented infotainment across their model line. What we found was surprising and provided our team the north star in creating a system that effectively was a one-off.

TECHNOLOGY TIMELINE

toyota-supra-research-_0011_screen1

THEMES

toyota-research11
toyota-research12

Toyota's infotainment design is unique to each model line and every market the car is sold in.

toyota-research7
toyota-research10
toyota-research9
toyota-research8
toyota-research4
toyota-research6
toyota-research5
toyota-research3
toyota-research2
toyota-research14
toyota-q1
toyota-q2
toyota-q4
toyota-q3

Define

After extensive stakeholder engagment and user needs, we were ready to clearly define parameters that would serve as a guide in designing a solution for Toyota and their customers. We needed to design the vehicle instrument cluster and the infotainment system display screens. The center display screen used two touch screens based on vehicle trim.  We also knew that due to the platform sharing, we would have use of the physical rotary controller. In this case, an optional heads-up display would serve as an auxiliary driver information display. But first, we needed to examine some of our low fidelity mental models and how they may work with different input methods by the user.

INTERACTION METHODS UNDER iDRIVE

1, Hardware controller

2. Touch

3. Voice command

4. Gesture

toyota-input-methods-3

BMW

ROAMING HIGHLIGHT

bmw-roaming-highlight
image64

MINI

LARGE PREVIEW

mini-large-preview
image63

ROLLS-ROYCE

FIXED CAROUSEL

rolls-royce-fixed-highlight
image65

Design Concepts

We explored several initial mental models that spanned being structured on one end of the spectrum, and freeform at the other. Each mental model had very specific qualities that made it a good choice to pursue for Kia. Upon reviewing our work, we felt very strongly about 'Persistent Ribbon' as a mental model and content delivery architecture. It offered the right balance between being dynamic, fun while allowing a range of minmalism and feature rich with built in intelligence for the user. Next steps would be to expand on the core model and begin integrating real world needs and embarking on visual design.

hubspoke4
river4
ribbon4

EXPANDING ON PERSISTENT RIBBON MODEL

PERSISTENT-RIBBONS-ORIGINAL
PERSISTENT-RIBBBONS-P1
PERSISTENT-RIBBON-DRIVER-MODEL
PERSISTENT-RIBBON-PASSENGER-MODEL
kia_semplice3

BUILDING IN FLEXIBILITY

extended-info-idea2

FLEXIBLE WDGETS

To maximize the utility of the screen while delivering the most amount of information to the occupants, we created smart containers that would expand and contract based on interaction by the user in addition to the priority of the information needing to be shown.

extended-content

VISUAL THEMES & MOODBOARDS

kia-_0000_moodboard1
kia-_0002_moodboard1
kia-_0001_moodboard1
kia-_0003_moodboard1

Interaction Design

Kia was amidst launching their new brand and visual language. The discovery phase of our project helped us create a framework for the design strategy. Our next efforts shifted to visual and interaction design phase. We loved the new Kia wordmark and decided it should serve as the inspiration going forward for creating concepts for the digital cockpit.

kia-logo-shape2

We created modular shapes inspired by Kia's dynamic logo.  These modular shapes enabled us to change size, shape, and scale. Our interaction design used 3D space and helped establish visual hierarchy with light and shadow.

interaction-design1
interaction-design2

Visual Design

We created three user journeys that illustrated our concept of dualities of 'me' / 'we' spaces and 'moods' /  'modes'. These three narrative chapters included various occupant configurations:

1. Morning (Driver)

2. Evening, around town (Driver + Passenger)

3. Weekend (All Occupants)

CHAPTER 1 - MORNING

In this chapter, our user (driver) story involves a typical daily commute early in day by the driver.  We created a FOCUS MODE that eased the driver into their infotainment experience by using a simplified visual language and widget appearance until important information needs to be conveyed. The widgets' corners are oriented towards the user.

chapter1-hud1
chapter1-cid1
FOCUS MODE  - Greeting
FOCUS-home-widgets
FOCUS-Efficiency
FOCUS-navigation
FOCUS-driving-efficiency
FOCUS-environment

CHAPTER 2 - EVENING

In  Chapter 2, We join our driver later in the day as they head home in RELAX MODE after a long day. In this journey, we show how the system can address concurrent single to multiple user profiles. We also show how profile preferences and data integrates into the infotainment.

As before, the widget sizes are fluid and corners 'face' the driver or passenger, and the color shift works to aid that communcation.

chatper2-hud2
CHAPTER2-navigation
CHAPTER-2-greeting
CHAPTER-2-home-widgets
CHAPTER2-pickupsarah
CHAPTER2-passenger-greeting
CHAPTER2-playlist-integrate
CHAPTER2-jukebox
CHAPTER2-restaurant
CHAPTER2-arriving-home
CHAPTER2-welcomehome

CHAPTER 3 - WEEKEND

The final chapter of a journey encompasses a fun roadtrip in EXPLORE MODE. In this scenario, we illustrate secondary functionality, interfacing with third party accessories and last mile integration in the app. For example, we have smart roof racks and smart suggestions in the navigation system.

In another example, we use vehicle as delivery address and social media content creation and integration.

chapter3-hud
CHAPTER3-inspiration-prompt2
CHAPTER3-greething
CHAPTEr3-service
CHAPTER3-navigation
CHAPTER3-inspiration-prompt
CHAPTER3-hike
CHAPTER3-amazondelivery
CHAPTER3-select-inpiration-route
CHAPTER3-POI-inspiration
CHAPTER3-photo
phonemocks

Delivery

Our extensive discover, develop and design phases culminated in the creation of a vision video piece and an interactive walkthrough of the HMI integrated into a seating buck. These pieces were presented to the chairman of Hyundai/Kia Group to great success.  We not only accomplished creating a future HMI vision that answered to the renewed Kia brand, but also inventing a flexible, adaptable proposal that illustrated our concept of duality with moods and modes.

A couple of years following our presentation, Kia released the EV3 and EV4 concepts to the world that incorporated our Persistent Ribbon model as the foundation for their new HMI. As Kia brings their vehicle concepts to production, we are excited to follow along their journey in reinventing their brand.

EV3-1
EV3-2
EV3-3
EV3-4
EV4-5
EV4-3
EV4-1

© 2023 jyoteen + respective holders

Connect with me on these other services:

Back to top Arrow
View