Opt Technologies Magazine

オプトテクノロジーズ 公式Webマガジン

モニタリング系プロダクトのリニューアルでやったこと(デザイン編)

alt

あいさつ

こんにちは。Opt Technologies の片岡です。 主に広告運用関連のプロダクト開発でプロジェクトマネジメントをしたり、UIUXデザインを横断的にやっています。

前回のダッシュボード系プロダクト「Adteras」のリニューアルに続き、社内において広告運用の実績関連指標の傾向を把握するためのモニタリング系プロダクト「Adreras Monitor」のリニューアルについてご紹介します。

【戦略】モニタリングに特化

今回リニューアルしたプロダクトは、広告運用に関わる社内のユーザー数が多く、また利用頻度が高いため、運用のキモとなるプロダクトです。

初期段階から要件過多、リリース後の機能追加や拡張を繰り返した結果、構造的な課題を抱えていました。 これらの課題解決を含め、シンプルでスピーディな表示を保ちつつ、拡張性あるプロダクトを意識していました。

今回のリニューアルにあたり、改めてユーザーの使われ方をヒアリングする中で見えてきたのが「モニタリング」というワードでした。 改めて「モニタリング」という目的を実現するために最適なUIデザインを再設計しました。

【要件】モニタリング系プロダクトの統合

歴史的な事情により、モニタリング系プロダクトは、特定の指標に限定したものと、複数指標が一度に見られるものの2つに分かれており、担当する案件によってはユーザーが双方を行き来する必要があるため使いにくさが指摘されていました。

今回のリニューアルでは、これらを統合することによる課題解決が大きな要件でした。

【構造】モニタリングプロダクトとして

初期設計の段階で、将来の拡張性を見据えながら「全体感を掴むサマリービュー」と「特定階層の詳細ビュー」の2ペインで画面を構成し、各ペインで「階層の展開表示」と「階層の切り替え表示」をうまく組み合わせながら、連続的なドリルダウンとピンポイントなクローズアップを実現できる構造を、実際にプロトタイプを作りながら試して、磨き上げていきました。

プロトタイプを作り、実際に利用するユーザーにレビューしたところ、今までより使いやすくなる期待感を感じることができました。

一方で、利用歴が長いユーザーの中には、変化そのものへの抵抗感や事前の説明不足もあり、リニューアルへの反発もありましたが、改めて「構造上のシンプル化」と「全体感の表示の素早さ」や「スピーディーな切り替え表示」によって得られるメリットを理解してもらい、既存のプロダクトから新しいプロダクトへの移行が進められるようになました。

更に、ヘビーユーザーからは、複数指標が一度に見られるもののリニューアル要望がくるなど、当初の想定通りリニューアルするにあたって2つのプロダクトを統合していく方針の後押しになりました。

【骨格】UIデザインの課題

以前のUIは、過去に使っていたExcelによる管理票をベースにしていたため、複雑な画面構成になっていました。 ただでさえ複雑な画面構成に対し、階層表示を拡張してしまったため、当初は想定していなかった表示件数に達した際に著しく表示が遅くなる課題を抱えていました。

そこで、リニューアルするにあたって、今までのExcelベースの表示を刷新する方向に舵を切りつつ、より「モニタリング」を意識した前述した2ペインによる画面構成を採用しました。

メインとなる画面を実際に使うユーザーへのレビューの際に、実装時に使うレベルのコンポーネントを使ったハイファイのプロトタイプでレビューしたところ、具体的なイメージが持てたようで、今までのUIと構成の違いはあれど、実際に使う場合にも特に問題ないというフィードバックを得られました。 (実はこの時に準備したプロトタイプがAdterasのプロトタイプの原型になっています)

【表層】シンプルでモダンなUIへ

表層のデザインとしては、MaterialDesignベースのUIフレームワークを採用し、シンプルかつモダンでありながら全体的な統一感を出しつつ、既存のシンプルなコンポーネントを活かす形で情報にフォーカスさせる画面構成を意識し、機能追加しやすいよう最小限のナビゲーションや、シンプルなレイアウトに整え、簡単な操作で情報を見やすくできたと思っています。

まとめ

「AdterasMonitor」は、既存プロダクトのリプレイスがメインだったので、主となる機能的な要件としては削る部分はあれど大きく変わらず、今回のコンセプトである「モニタリング」の性質を強めることにフォーカスして進めることができました。

戦略としてモニタリングプロダクトとして再定義した上で、要件として既知の課題の解決と2つのプロダクトを統合し、構造として新しい階層表現の導入、骨格として2つのビューを展開と切り替えで組み合わせることよりスムーズに見たい情報へアクセスできる構成へ持っていき、表層としてシンプルで統一感あるデザインを実現することができました。

今では、ユーザーから細かな要望も出てくるほど導入が進んでおり、必要とされている感触が得られて、とても励みになります。 今後の導入拡大の中で、より高い価値を提供するための機能追加や、ユーザーからのフィードバックをベースにした改善対応の両輪を回していきたいです。

Opt Technologies ではエンジニアを募集中です。カジュアル面談も可能ですので、下記リンク先よりお気軽にご応募ください。