ダッシュボード系プロダクトのリニューアルでやったこと（デザイン編）

あいさつ

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

ダッシュボード系プロダクトをリリース

昨年秋頃に株式会社オプトとしてダッシュボード系プロダクト『Adteras（アドテラス）』をリリースしましたので、このプロダクトについて、主にデザイン観点からリニューアルまでの軌跡をご紹介します。

新規プロダクトから既存プロダクトのリニューアルへ

もともと開発を進めていたダッシュボード系プロダクトが既にありました。 そのプロダクトは、スピード重視でMVPを構築し、顧客への導入も含めたPoCを経て一定以上の成果を出していました。

ただ、今後、顧客導入の拡大をしていくには、ある程度の機能単位でリプレイスする必要がある課題がありました。大きくは「社内共通のマスタデータ／データソースを使っていないこと」や「MVPとして構築したUIのため機能追加が中々難しいこと」です。 また、UIデザインも、旧来的な印象が拭えない状態だったため、今後展開していくプロダクトとしてモダンなデザインに持っていくことも課題の一つでした。

今回ご紹介しているダッシュボード系プロダクト『Adteras』のプロジェクト発足当初は、新規プロダクトとして開発する方針だったため、UIも新規でデザインを進めていましたが、紆余曲折を経て、「提供までのスピード感」と「データの整合性担保」の観点から、先に説明した既存のダッシュボード系プロダクトのリニューアルで対応する方針に転換しました。

UIリプレイスまでの軌跡

新規プロダクトとしてつくる前提でUIデザインを進めていて、各セクションとの認識合わせや、ユーザーヒアリングを行いながらブラッシュアップまでできていたこともあり、そのまま「新しいUIデザイン」を採用することとなりました。 そして、UI部分は既存プロダクトのUIをフルリプレイスする形で進めることになりました。

ただ、UIだけでなく、フロントエンド／バックエンドでも部分的にリプレイスする箇所があり、中々UIまで開発の手が回らない状況が続き、UIに着手するタイミングを見計らっていました。

そんな中、既存のUIに関して調べていると、もともと使っていたUIフレームワークのアップデートが滞っていたことが発覚し、それが要因で旧来的な印象のデザインになっていたことがわかりました。 デザイン的な課題感はもともとあったため、UIフレームワークのアップデートを進めてもらい、どうにか他の社内プロダクトでも採用しているMaterialDesignベースに寄せる方向に持っていきました。

実際にUIの開発を進めるにあたり、既存のUIとは別に「β版の新UI」として扱い、レイアウトを整えつつ、部分的な機能追加に合わせてコンポーネント単位のデザインを整えていく手法をとり、手間のかかる構造レベルでの変更を極力なくし、具体的なスタイルのコードサンプルなども事前に準備して、開発側には負担にならないようライトな形で進めていました。

また、滞っていたUIフレームワークをアップデートできる目処が立ち、MaterialDesignのテーマを利用できるようになったため、テーマの切り替えあたり慎重に検証を行い全体的な調整を施しながら、一気にUIのデザインベースを変更することができました。

UIプロトタイプも進化

実際のUIイメージを伝える手段として静的なUIプロトタイプを準備していて、はじめはデザイナーではないビジネス側も使える「draw.io」でイメージングをしていましたが、ある程度UIのイメージができると、実際に動きのイメージをつけたいという要望があり、別件で使っていた「Adobe XD」で部分的にUIを再現していました。

ただ、PC向けのプロダクト（Webアプリケーション）なので、構成要素や表示内容が複雑で再現に手こずり、最低限の動きのイメージは伝えられていたもののフェーズ的にもより具体化が求められたため、最終的には他のプロダクトのUIモックで利用してた「Vue.js＋UIフレームワーク」で構築し、実際の動きや色合い・レイアウトのバランスなどディテールまで伝えられる状態に持っていきました。

この最終的なプロトタイプで開発側でも実装イメージが具体化され、実際のUIのデザイン調整が一気に加速しました。

UIデザインとしてやったこと

デザインベースをモダンなMaterialDesignベースに変更することで統一感のあるシンプルな構成に持っていき、コンポーネントを活かす形で情報にフォーカスさせる画面構成に変更し、機能追加しやすいようナビゲーションやレイアウトを整え、簡単な切り替えで情報を見やすくできたと思っています。

UXデザインの導入

プロジェクトとしては、最初は「広告運用のダッシュボード」ということ以外は何も決まっていない状況だったため、戦略の検討から進める必要がありました。

そのため当初から「UXの5段階モデル」をUXデザインのプロセスとして導入し、「戦略［UX］→要件［UX］→構造［UI］→骨格［UI］→表層［UI］」の各プロセスで成果物を出していき、ビジネス視点の上段から実際のUI構成・ディテールのデザインまで一貫してつなげていくアプローチを試すことができました。

まとめ

プロダクトとしてはリニューアルという形を取りましたが、UIとしてはフルリプレイスする形で新規プロダクト並に想定していたデザインを実現できたことと、今後も機能追加しやすい構成にアップデートできたこと、シンプルで簡単な操作で切り替えられる使いやすさも一定以上実現できたことが良い点かと思います。

社内では開発・ビジネス・カスタマーサポートを含めたAdterasチームでMVT賞（Most Valuable Team賞）をいただいたり、他のプロダクトとの連携が前提とはなりますが実績を出して認められるようになったことは嬉しい限りです。

また、現場の声としても「圧倒的に使いやすくなった」との評価も得られており、顧客への導入も進んでいるので、より価値を提供すべくやっていくことと、ユーザーからフィードバックで改善すべきところの両輪を回していきたいです。

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