Kia

Advanced HMI UX / UI

Overview

With a mission to build the most sustainable vehicle in the world, Fisker, a new EV startup, delivered it\'s first SUV in 2023. Just two years prior, we would begin a clean sheet design of its infotainment system, a slim and simple instrument cluster and the mobile app. The Ocean had many firsts, one of them being the center display that rotated from its portrait orientation while driving to landscape, offering the vehicle occupants the ability to stream content and use the system when charging.

ROLE

My role at Fisker as the UX Design Director was to lead innovation through design of Fisker’s in-car digital experience.

RESPONSIBILITIES

My responsibilities was to build and lead a diverse team of designers to create the in-vehicle experience that was dead simple to use and understand while launching the HMI in 2 short years. 

Discover

Through exhaustive research and discovery phases, we were able to define and distill important brand attributes. These attributes servee as the foundation for creating a cohesive product experience for Kia. Our mission was to remove traditional beliefs, provoke existing paradigms and remove inhibitions yielding progressive, unapologetic and influential ideas.

DESIGN PRINCIPLES

1. Bold - Tailored to the early adaptors, revolutionizing new ideas for the masses 

2. Movement - Giving users the opportunity to travel differently from micro-mobility to everyday mobility and virtual mobility 

3. Original - Informative and honest design for individualistic users 

4. Inventive - Creating magic moments 

5. Intuitive - Connecting the digital and the physical while capturing the humanistic nature of conversation 

6. Integrated - Part of the user's daily lifestyle, connectivity is no longer an action but a way of life 

7. Seamless - Intuitive design allows effortless interaction 

8, Simplicity - Easy to use 

9. Inspiring - Creating a space for users to get inspired and do what they're passionate about 

PRODUCT AND EXPERIENCE BRAND PILLARS

‎kia-brand-intersection.‎001

RESEARCH SYNTHESIS

BE UNAPOLOGETIC

CREATE DISTINCTION WITH STORYTELLING

REVEL IN THE TENSION OF OPPOSITES

ELIMINATE THE UNECESSARY

ANTICIPATE NEEDS BY USING DATA

kia-diagram6-explain
kia-cycle6

Define

Our discovery phase provided us with guidance in creating new Kia brand values, visual cues and general direction. Our conclusion could be distilled into a single guiding principle:

‘Kia's mental model framework must speak to the duality and multi-purpose nature of our customers and their experiences.’

kia_brand-att1
kia_brand-att2

DEFINING DUALITY

dualities4

DUALITIES  CONSTRUCT

display-duality

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 WIDGETS

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

Connect with me on these other services:

© 2024 jyoteen + respective holders

View