DeNAデザイン本部 UIデザイナーの山本です。2023年4月にリリースされた、EV（電気自動車）の実用航続可能距離やバッテリーの性能、EVの導入効果予測を見える化するEV転換シミュレータ「FACTEV（ファクティブ）」のUIデザインを担当しました。
今まで私は「PICKFIVE」や「WITH Fitness」など、C向けサービスのUIデザインを担当することが多くありましたが、FACTEVは一転してB向けのSasSツールです。
B向けサービスにおけるUIデザインの経験や、EV領域に関する知識、主なターゲットとなるオートリース会社での業務理解もあまりなかった状態から、スケジュールも短いなかで、どのようにUIをデザインすべきか迷うことが多くありました。 そのなかで意識していた「ドメイン理解を素早く補う」「UI制作のコストはとことん下げる」という2点についてまとめていきたいと思います。
FACTEVは、法人でのEV普及を促すため、EVの実用航続可能距離やバッテリーの性能、EVの導入効果予測を見える化するEV転換シミュレータです。
現在は主にオートリース会社向けに提供しており、今まではEVを導入してみないと分からなかった実用航続可能距離やバッテリーの性能、EVの導入効果を、独自のアルゴリズムによって予測できるので、安心してEVを導入しやすくなります。
UIをデザインする上では、車両に関する各種データや、走行地域の道路特性や気象情報の分析、用途に合った候補EVの選定、実用性能や導入効果のシミュレーションなど、複雑かつ多様な機能を理解した上で、主な利用者となるオートリース会社の方々にとって扱いやすい体験に落とし込んでいくことが求められました。
私がUIデザイナーとして関わり始めた時点で、既にたたき台となるプロトタイプはできている状態であり、これを元にUIを検討していくことになりました。
既にアルゴリズム開発や実証実験が完了し、試験提供するために動いている段階でした。
ただ、自分自身、今までB向けSaaSツールのUIデザインの経験が多かった訳ではなく、EVに関する知識や、オートリース会社での業務フローなどもあまり知らない状態でした。
また、スケジュールとしても3ヶ月程と短納期であったため、素早く制作を進めることと、ドメイン理解を踏まえたアウトプットを両立していく必要がありました。
そのため、特に以下の2つを意識しながらUIデザインを進めていくことにしました。
ドメイン理解を素早く補う
UI制作のコストはとことん下げる
プロトタイプはあったものの、多岐に渡るデータや機能を直感的に扱えるUIにしていくためには、検討すべきポイントが多くありました。
そのため、まずは現場でのヒアリングを行い、素早くUIを作ってレビューを何度ももらいながら、精度を高めていけるように進めました。
まずはじめに、事前にプロトタイプを用意したうえで、EVを貸す側となるオートリース会社と、借りる側となる企業の車両導入担当者の方にヒアリングを行いました。
当日は、具体的な操作方法やUIの良し悪しではなく、より詳細な業務フローや、FACTEVが使われる場面について想定を深められるように、次のような項目でヒアリングを行いました
EVを貸す方（カーリース商品としてEVを販売する側）・借りる方（車両を使用する側）それぞれの業務フロー
リース商品を販売するための営業時にツールを活用いただけそうか
どのような情報であれば情報の収集や入力ができるか
普段はどのように車両情報を管理しているか
カーリースは3年から5年スパンで契約される場合が多いこと、各地域の営業所で契約を取りまとめて管理する部門があり、リース中の車両に対する要望（ex.もう少し荷物を載せたい）があれば書き留めておき、契約更新の車両入替の際に反映させていくことなど、具体的な業務フローへの理解を深めながら、そこにFACTEVがどう貢献できるかを検討していきました。
また、自身で顧客理解を深めるために、フォッグ行動モデルを参考に現在のプロダクトが解決したい課題や次回以降のフェーズでどのようなアプローチを行うかを整理しました。
また、並行してPdMがFACTEVのアルゴリズムをベースに各機能の要件定義やワイヤーフレーム制作を行っていたため、ヒアリングした内容を参考にしながら、UIをブラッシュアップしていきました。
裏側のアルゴリズムをベースに機能要件や情報設計を可視化しています。
UIデザインを詰めていく段階では、できるだけコストをかけず、素早くデザインを作り進められるように意識しました。
FACTEVはまだ試験提供段階であり、価値検証を素早く行えることが重要でしたし、その価値の源泉は独自のアルゴリズムや、EVの性能や導入効果を正確にシミュレーションできる機能にあります。
そのため、UIにおける世界観やビジュアルのユニークさよりも、複雑な機能をシンプルな体験で扱えたり、業務フローに応じて素早く改善できるようにしておくことが重要だと考えていました。
また、外部の協力会社に実装いただくことになっていたため、実装におけるコミュニケーションコストも抑えたいという意図もありました。
コストを減らしつつスピードを早められるよう、FACTEVでは「MUI」というコンポーネントライブラリを導入してUIデザインを行うことにしました。
具体的には、ボタンやフォームなど基本的なパーツはすべて用意されたものを流用することでコストを下げ、逆に「オートリース会社の方が使いたいデータや、その見え方」「裏側のアルゴリズムとの整合性」「業務フローを踏まえた細かな仕様」など、業務ツールであるFACTEVの特性に合わせた作り込みに時間をかけられるようにしました。
例えば、現行で使用されているガソリン車の情報を入力する際に「車検証」「定期点検情報」「運行管理台帳情報」からシームレスにインポートするための導線や、EVに転換した場合の実用航続可能距離を直観的に伝えるグラフ表示や、営業資料としてすぐに使えるようA4で印刷できるスタイル調整など、細かな調整を重ねていきました。
そのなかで、UIを素早く作れる状態にしておくことで、その場で作ってレビューをもらったり、いくつかのパターンを検討できたりとメリットを感じています。
このような流れでFACTEVのUIデザインを進め、開発期間を挟んだ後、2023年4月から大手オートリース会社に向けたサービスの試験提供を開始することができました。
また、リリースを経て、導入を進めてくださる企業がさらに増えているとのことで、今後もサービスの改善を進めていきたいと考えています。
FACTEVのUIデザインを担当する中では、業務フローに対する深い理解、導入担当者と実利用者など関わるステークホルダーへの理解、複雑な機能を扱いやすくするための情報設計など、今まで携わることの多かったtoC向けのサービスとは少し性質の異なる動き方が求められました。
そのなかで、サービスを利用してくださる方が「いつ」「どこで」「どのように」「なぜ」価値を感じてくださるのか、その裏側ではシステムがどのように動いているのかをしっかりと理解し、必要であれば現場に出てみたり、何度もユーザーに見てもらったり、新しいツールを取り入れてみたりと、動き方を柔軟に変えながらデザインに臨むことが重要だと感じました。
今後もFACTEVだけでなく、DeNAが展開する様々なサービスに携わりながらデザインに取り組んでいきますので、これからにご期待ください。