情報設計から始めるシナリオ入稿業務の効率化【Algoage × Goodpatch Anywhere】
株式会社Algoage（以下、Algoage）が提供するDMMチャットブーストCVは、医療・人材・美容・金融・不動産領域をはじめとした様々な業界において、LP離脱の際にユーザーに価値ある情報をポップアップで提供し、LINEへと誘導。一人ひとりに合わせて悩みや不安などの通常では回収することの難しい情報を引き出しながら、最適な情報を提供し、意思決定までのサポートを行うLINEマーケティングツールです。顧客ごとに適したマーケティングやカスタマーサクセスを行うための自由度の高いカスタマイズ性を持ち、顧客管理機能や分析機能によって、ビジネスを加速させます。
フルリモートデザインチームのGoodpatch Anywhere（以下、Anywhere）は、2023年12月から2024年3月末まで、DMMチャットブーストCVの運用配信システムの改善に並走しました。機能整理やヒアリングに始まり、オブジェクト整理やER図の作成、Lo-Fiモデルを用いたユーザーテストまで、多様な手法で体験を検証し、最適なUIを提供しました。
サービス提供の速度に課題があった
——Anywhereにお声がけいただいた経緯を教えてください
Algoage 若菜実農さま（以下、若菜さま）
DMMチャットブーストCVは、LINEの公式アカウントを自動化するツールです。このサービスを契約しているクライアントのWebサイトからユーザーがLINEで友達登録をすると、自動化されたプログラムによってチャットが起動し、ユーザーの悩みに寄り添い、意欲を上げるサービス促進が始まります。今回、改修する対象となったのは、サービスを提供するための管理・作成画面です。つまり、裏側の部分ですね。
先ほど「サービス促進」と言いましたが、公式LINE上でどのようなコミュニケーションを行いたいかは、クライアントのニーズや業態によって異なります。一件一件、LINEのシナリオを作成するプランナーという職種のメンバー（以下、プランナー）がヒアリングを行い、実現したい体験に合わせてシナリオを作成する必要があります。これまでは、プランナーがシナリオ設計の作業をオンラインデザインツールであるFigma上で行い、それをエンジニアがテスト環境に反映するという作業フローでした。シナリオを書いてから体験を検証するまでにタイムラグがあるんです。この部分で発生する工数を、管理・作成画面をGUI化することで削減したいと考えました。
Algoage 稲田舞子さま（以下、稲田さま）
DMMチャットブーストCVは、シナリオの内容については良い評価をいただくことが多いのですが、サービス提供の速度については課題がありました。最速でリリースするためには、入稿工数を削減し、リードタイムを短くしていく必要があったんです。こうした課題意識のもと、まずは若菜さんが個人でプロダクトの試作を開始し、それがプロジェクトに成長しました。本格的に管理・作成画面の改善をするにあたり、UIデザインについては専門家の知見が必要と考え、Anywhereにお声がけしたという流れです。
実現したい体験を軸に、情報を整理していく
Algoage 若菜さま
DMMチャットブーストCVでプランナーが作成するシナリオには、本当にさまざまな種類のメッセージがあるんです。画像付きのものや、ボタン付きのもの、テキストメッセージなど。こうした膨大なパターンをUI上で直感的に操作し、シナリオに落とし込んでいけるようにしたいと考えていました。でも、無限にパターンがあるので、どうしていいかわからない。だからまずは、シナリオのパターンを構造化してもらうところからお願いしました。
Goodpatch Anywhere UIデザイナー 佐々木（以下、佐々木）
本当にたくさんのパターンがありましたから、仕様の理解には少し時間がかかりましたね。際限なくカテゴライズするのではなく、実現したい体験を軸に、情報を整理していきました。
Goodpatch Anywhere UIデザイナー 竹田（以下、竹田）
仕様が複雑なので、抽象的なレベルで整理をしても、なかなか理解が進まないという感じがありました。同じ言葉で違うものをさしている、という事態がよく発生していた。でも、オブジェクト整理をしたら、だいぶ整理された感じがあって。
Goodpatch Anywhere クオリティマネージャー 小谷（以下、小谷）
オブジェクト整理など、最初は情報設計をすることに注力しました。そして、それを足がかりに現場の声を吸い上げていきました。シナリオを設計しているプランナーの方々に3回ほどヒアリングをして、具体的に使いづらい部分などを知ることができました。モックアップを見てもらって、仮説が合っているかを検証したりもしました。
慣れている人も慣れていない人も迷わず操作できるように
Anywhere 小谷
わからないことがあるとすぐに聞ける環境だったのもありがたかったですね。仕様については若菜さんが詳しかったので助かりました。現場でどういう作業がされているか、という業務内容については稲田さんが詳しくて、色々と聞かせていただきました。
Algoage 稲田さま
プロジェクト開始時点ではスコープも切れないような状態だったのですが、話し合いながら進めていきましたね。MVP （実用最小限の製品、 Minimum Viable Product）としてどこまでを実装すべきだろうか、それをするとどんな効果があるだろうか、一緒に考えていきました。
——UI制作で特に工夫したポイントはなんですか？
Anywhere 佐々木
シナリオ作成に慣れている方、慣れていない方、どちらの人が見てもすぐになにをすべきか理解でき、迷わず操作できる点を意識しました。それから、工数の削減はもちろんですが、この改修によってインシデントが減って、クオリティが向上していくためにも、より「シナリオを作りやすいUI」であることにも気を配りました。
シームレスに編集や保存ができる操作性や、プロダクトとしてエラーを出すタイミングやガイドの表示方法などを模索しました。また、インシデントに直結するエラーを見逃さないようにしながらも、作業の邪魔はしないような情報提示の手法も探りました。
こうした条件を満たすUIを実現するためにも、さまざまな熟練度のテスターにユーザーテストを何度かしてもらい、どのレベルの人でも迷わず操作できるか、学習しやすい内容であるかをチェックしました。
——実は、Algoageさんとは、「管理・作成画面の改修」とパラレルで、「事前調査の自動化」プロジェクトも進めていたんですよね
Anywhere 竹田
そうなんです。Algoageさんは、業務のなかにChatGPTを使った調査を取り入れていました。でも、手間や不便さを感じる部分が多い状態だったんです。ここを自動化するにはどうすればいいかを考え、UIを制作しました。
もともとAlgoageさんはChatGPTを使った20種類ほどのユーザーインサイト調査を実施していました。この調査の際にはプロンプト（生成AIへの命令文）のテンプレートが用意されていました。ただ、調べたいものに合わせて手作業で書き換える必要があったり、複数のタブでChatGPTを開いているため最新のデータを見失ったりしていたんです。
そこで、変数部分を入力するだけでプロンプトが実行されたり、10個以上の調査が一度に実行されるようにしたりといった、時間とコストを削減するためのUIを提供しました。
生成AIによってできるようになったこと、便利になったことはたくさんありますが、業務の効率化という視点からは、まだまだ課題が残されている状態です。こうした「AI利用に伴った業務の煩雑さ」問題に対して、UIで改善できることは未知数だと感じています。
領域を越えて意見を出し合うことで、プロダクトの質が向上していく
——一緒にプロジェクトを進めていった感想を聞かせてください
Algoage 若菜さま
Anywhereの皆さんは、初動の整理力が印象的でした。「全部ぶち込んだら整理してもらえた」という感じです。UI案を出してもらったときも、直感的に使いやすくなった実感がありました。
Algoage 稲田さま
アウトプットベースでコミュニケーションできたのがよかったです。毎回、デザインがあると目線合わせが容易でした。プロジェクトの初期はスケジュールが押したこともありましたが、密なコミュニケーションをとることで改善していけました。チームとして一緒にやっているという感じがありました。
Anywhere 小谷
Goodpatchは「偉大なプロダクトは偉大なチームから生まれる」という言葉を大切にしているのですが、ワンチームで同じ方向を見ることができるように意識しました。それから、AlgoageさんのカルチャーとAnywhereのカルチャーとを組み合わせて、より良いコミュニケーションやプロダクト改善の方法を一緒に模索できたことが、嬉しかったです。
Anywhere 竹田
「管理・作成画面の改修」と「事前調査の自動化」という二つのプロジェクトがパラレルで進行していたのですが、うまく協働できる部分があったのでよかったです。たとえば、初期の課題整理などは一緒にできましたし、少しでも疑問や不安に思ったことは積極的にチームで共有し合えたと思います。
Anywhere 佐々木
ニッチなプロダクトだったので、情報整理や認識あわせに時間をかけました。また、2社での共同作業の機会も多く持つように意識しました。その場で作りながら整理していく、ということを繰り返す。デイリーミーティングで聞いたことや議論したことを元に、スピーディーにアウトプットをする。アウトプットの速度を落とさないためには、小さなコミュニケーションが不可欠です。短時間のミーティングや非同期でのコミュニケーションをたくさんして、連携の密度を上げていきました。それが結果として、質の向上にも繋がったと思います。プロダクトとしていいものを作るためには、UXUIやエンジニア、元プランナーなどが、それぞれの領域を越えて意見を出し合うことが大切ですから。
レスポンシブ対応のUIで学びを加速させる
——改修した管理・作成画面について、今後の展望をお聞かせください
Algoage 若菜さま
管理・作成画面のUIについては、少しずつ社内の声も聞こえてきています。コンポーネントがよくできていているから画面が作りやすいとか、これらを活用して議論ができる環境を整えている、とか。UIのコンポーネントがレスポンシブになっていることはあまりないようですが、対応されていることに感心していました。みんなで触りながら学んでいるところです。
今回改修した管理・作成画面は、プランナーの人が迷わず操作できることを第一目標にしていましたが、今後は営業の方にも活用してもらいたいなと思います。デモンストレーションとして簡単なシナリオを用意してクライアントに見せることで、具体的なイメージもわきやすくなるはずです。
Algoage 稲田さま
これまで、Algoageのプランナーが作るシナリオは精度が高く、十分に競争力のあるものでした。
これからは、プロダクトの機能拡張とそれに伴うオペレーションフローの改善を通して、これまでボトルネックだった入稿までのリードタイムが短縮され、PDCAを最速で回す環境が構築されます。プロダクトの力で、ボトルネックにアプローチしていけることが、大きな実りだと感じています。
AnywhereではUI改修のお手伝いを、今後も積極的に行ってまいります。専門的な領域の画面を改修したい、生成AIをより効率的に業務に取り込みたい、という方は、いつでもご相談ください。
Anywhereへのお問い合わせはこちらからどうぞ！