DoiTでUXデザイナーをしているJack Greenです。今回は、既存機能の一つである「Ramp plans」のリニューアルで行ったデザイン上の変更と、その背景にある意思決定についてお話しします。
Ramp plansは、AWSまたはGoogle Cloudの支出コミットメントに対する顧客の進捗を可視化し、支出のトラッキングや必要な調整の把握を支援する機能です。
この機能のポテンシャルを最大限に引き出すため、プロダクトチームはいくつかの改善を行うことを決めました。まず私が既存機能のデザイン監査を実施し、ユーザビリティとビジュアルデザインの両面から課題を洗い出しました。
リサーチフェーズで使用したFigjamのスクリーンショット
Figjamのノート機能（上図）を使い、議論が必要な箇所や改善のポイントとなる領域に注釈を加えていきました。これをたたき台として、プロダクトマネージャーとリード開発者と議論を重ね、彼らの経験や顧客からのフィードバックを踏まえた意見を取り入れていきました。
このセッションを通じて、注力すべき領域を次のように定めました。
- 重要情報の視認性を高める
- バックエンドを刷新し、データの信頼性を高める
ユーザーリサーチや顧客と接するステークホルダーからの情報により、ユーザーにとって何が最も重要な情報かは把握できています。これを踏まえ、その情報を明確で理解しやすい形で提示することを目指しました。
バックエンドの刷新はUXの仕事ではありませんが、Ramp plans機能のユーザー体験に大きく影響します。データの信頼性が高まれば、ユーザーの信頼につながり、機能の価値を即座に実感してもらえるからです。
最初に取り上げたい改善ポイントは、Ramp plansページのリスト表示です。以前はテーブル形式のレイアウトでした。
デザイン変更前のRamp plans概要ページ
このページにテーブル形式が適さない理由は、次のとおりです。
- このページに表示されるのは1〜2件のramp planに限られ、リストが増えていかない
- コンテンツに階層がなく、詳細が読み取りにくい
- 本来必要な情報の一部がテーブルから抜け落ちている
- 状況を正確に把握するには、ramp planをクリックして詳細画面を開く必要がある
そこで、テーブルレイアウトからカードレイアウトへ刷新しました。
デザイン変更後のRamp plans
カードレイアウトの採用によって、次のようなメリットが生まれました。
- 重要情報が一目で読み取れる
- 主要な情報を確認するためにramp planを開く必要がない
- 視覚的に魅力があり、バランスの取れた階層構造になる
この情報提示のスタイルは、ramp planの詳細ビューにも展開しました。
ページ上部に主要な情報をまとめたカードを配置することで、これまで表示されていなかった、あるいは大量のデータの中から読み解くのが難しかった関連情報を、ユーザー向けに分類・整理し、わかりやすく強調できるようになりました。
刷新されたramp plansの詳細ビュー
新たに追加した機能の一つが、合計支出の内訳ダイアログです。これにより、ユーザーはDoiT Consoleの他の画面に移って作業を中断することなく、コンパクトなダイアログの中で支出の内訳をさらに深く確認できます。この機能は、日々顧客対応を行うアカウントマネージャーからの要望をもとに実装したもので、顧客に対して詳細な情報とインサイトを提供できるようになります。
合計支出の内訳ダイアログ
いつものことですが、リリース後もユーザーの行動やパターンを継続的にモニタリングし、課題や改善点の発見に努めています。