MGブランド車向けに 拡張可能な HMIフレームワーク を共同開発

クライアント

SAIC OIMT

 
ウェブサイト

mgcars.com

実践

オートモーティブ &モビリティ

 
サービス

デジタルデザイン

背景

エンターテインメントから、ナビゲーション、車両診断、コネクティビティまで、自動車のHMI(ヒューマンマシンインターフェイス)は、今や驚くほど広範な機能や操作をカバーするようになっています。SAICもMGブランド車のHMIの概念を拡張し、より多くの機能に対応することで、ミレニアル世代向けの市場シェア拡大を目指しています。

同社とStarによる前回のMG iSmart用HMIの共同開発は成功を収め、著名な賞も受けました。SAICは、その基盤をもとに、さらに強力なソリューションをグローバルに展開するべく、再びStarに協力を依頼しました。

Saic-HMI-2nd

✓ 2022年UXデザインアワードにノミネート

✓ iSmart 2.0用HMIのデザインフレームワークを構築

✓ SAICブランドのホワイトラベルに対応する最終デザインコンセプトを提供

✓ アクセシビリティ、包摂性、使いやすさを向上

✓ 音声操作を主要な機能として搭載

✓ 新機能の開発と車両の進化を念頭に置いたアプローチを実践

✓ コア機能への素早いアクセスに対応できるよう情報アーキテクチャを改良

✓ SAICのデザイナーが一貫したデジタル体験を構築できるようなフレームワークを作成

アイデア

SAICはまず、前回のコラボレーションで得られた知見やフィードバックを収集。そして、より安全で直感的な自動車体験の実現に向けた新しいデザイン言語を作成するために、Starに協力を依頼しました。その際に指針となったのは以下のポイントです。

  • – モジュール性
  • アクセシビリティ
  • リーチャビリティ(到達性)
  • 使いやすさ
  • 一貫性 

前回はインドとタイの消費者が対象でしたが、今回の新コンセプトは、SAICのグローバルな販売ライン全体に展開されます。

SAIC
SAIC

プロジェクト

BMW、アウディ、メルセデス、テスラといった業界をリードする競合企業の分析を通じて、効果的なHMI導入に向けたインサイトをまとめるところから、プロジェクトはスタートしました。

そこにSAICが前回のコラボレーションから収集したデータを組み合わせることで、ユーザーに響くソリューションを構築するための基礎が固まりました。

そのうえで、車載UX全般に関するユーザーニーズも考慮して、プロジェクトを以下の4つのフェーズに分けました。

  • エクスペリエンス:ビジュアルの調査と、体験の詳細化に焦点を当てるフェーズ。SAICチームとともにアイデア創出ワークショップを実施し、HMIデザインの仮説についてチームの認識を共有する。
  • インタラクション:インターフェイスがどのように機能し、人々がどのようにインタラクションを行うのかについて、エクスペリエンスをモデリングして全体像を把握する。
  • ビジュアルデザイン:詳細化とコンセプトの磨き上げ、UIライブラリの作成、エンドツーエンドのデザインによるHMI体験の確定、テーマ別フレームワークによるデザインサポート。
  • アニメーション:UIの変形、リアクション、物理特性、動的フィードバックに関するクリエイティブな動作のアイデア創出。

iSmart 2.0のHMIは、さまざまな新機能を盛り込みながらも、親しみやすさと使いやすさを意識したインターフェイスデザインを実現しました。他の大手ブランドとは一線を画す、タブレットをイメージしたナビゲーションの導入により、直感的な操作で、主要なアプリに素早くアクセスできる仕組みになっています。

また、国や地域に即した言語・文化に対応するため、言語間テストを実施。LokaliseとFont Replacerのプラグインを活用してテストを自動化し、翻訳プロセスをスピードアップさせました。

iSmart 2.0用HMIソリューションのデザイン言語は応用性が高く、SAICのグローバルブランドすべてに対応する各種画面レイアウトをサポートしています。

今回のコラボレーションでは、包摂性、柔軟性、持続可能性の確保を必須条件としてHMI開発を進めました。また、ユーザーが運転に集中できる音声操作などの機能は、使いやすさとアクセシビリティの向上に貢献しています。

SAICにとって、このiSmart 2.0の最大の利点は、全市場の全車両シリーズに展開できることです。モジュール式のため更新も簡単で、車両の長寿命化や、ブランドアイデンティティ、エンドユーザーとMGブランドの結びつきも促進するシステムになっています。

プロジェクトスコープ

  • デザインリサーチ
  • インタラクションデザイン
  • ビジュアルデザイン
  • モーションデザイン

Loading...
plus iconminus iconarrow icon pointing rightarrow icon pointing rightarrow icon pointing downarrow icon pointing leftarrow icon pointing toparrow icon pointing top rightPlay iconPause iconarrow pointing right in a circleDownload iconResume iconCross iconActive Badge iconActive Badge iconInactive Badge iconInactive Badge iconFocused Badge iconDropdown Arrow iconQuestion Mark iconFacebook logoTikTok logoLinkedin logoLinkedIn logoFacebook logoTwitter logoInstagram logoClose IconEvo Arrowarrow icon pointing right without lineburgersearch