初めまして、カスタマーエンゲージメントプラットフォーム「Repro」を開発・運営するRepro株式会社のUXデザイナー河西です。

今回UXデザイナーとして「Webメッセージのテンプレート拡充プロジェクト」の推進を行いました。ユーザーやステークホルダーと調整を繰り返しながらプロダクトをつくったプロセスをまとめていきたいと思います。

(実際にリリースした「Webメッセージテンプレート機能と管理画面」)

私たちが運営している「Repro」は顧客データを活用し、 メールやプッシュ通知、Webやアプリ内ポップアップなどのチャネルを横断した付加価値の高いコミュニケーションを実現するマーケティングプラットフォームです。

https://repro.io/

Reproは、Webメッセージ、ポップアップを表示させる機能を持っています。

これまで、ユーザーがサービス内でWebメッセージの表示施策を実行する場合、担当のカスタマーサクセス(CS)に都度、CSSのコードを発注、CSがコードを作成し、ようやく施策が実行できるというプロセスになっていました。

こうしたプロセスにより、以下の課題が発生していました。

・CSが都度手を動かす必要があり、質の担保をするためにも人的コストが想定以上にかかっていた。 ・ユーザーがすぐに施策を実行できなかった。

この課題を解決するため、ユーザー自身が「Repro」を使い施策がすぐさま実行できるよう、Webメッセージのテンプレート拡充プロジェクトを立ち上げました。

(プロジェクトの最初に、課題と理想を整理した図)

プロジェクトとしては「ユーザー自身で用途に応じた施策が実行できるよう、テンプレートを拡充すれば良いのではないか」といった要求から始まったのですが、一気にテンプレートを量産し始めると後から方向修正しても対応できなくなり危険だと思っていたので、まず何を要件にすべきかチームで合意をとるところに時間をかけました。

まず実際にCSを経験したことがあるメンバーにプロジェクトに入ってもらい、ユーザーにどのようなニーズがあるのか、CSはどのような部分で工数がかかっているのかをヒアリングしながら理解を深めていきました。

その調査の結果、テンプレートの拡充だけ行ってもCSがコードを書く必要は結局残ってしまうため課題が解消されないことがわかりました。最初の要求には含まれていなかった「管理画面でユーザーが自分でカスタマイズできる機能」も要件に追加する必要があることに気づき、プロジェクトで取り組むべきところと取り組むべきでないところを改めて整理しました。

(ヒアリングを通して改めて方針を整理し、やらないことを明確にした)

その課題感や方針をメンバーにも合意してもらうために、コミュニケーションを取っていきます。 まず、実際に発生している課題感を伝えつつ、「トレードオフスライダー」を使ってこのプロジェクトにおいて何を重視するのかを一緒に整理して議論の軸をつくりました。

(このプロジェクトで何を重視するのかを整理するために用いたトレードオフスライダー)

その上で、プロジェクト的にもカスタマイズ性の重要度が高いということに合意できたので、次はどういう優先順位でプロジェクトを進めていくのかを整理しました。

どのタイミングで何がリリースされていくかを3つのパターンを出して可視化し、合意を取りました。

(開発の流れをパターン出し、今回何を優先するのか合意を取った)

結果的にカスタマイズ性を重視し、テンプレート追加は比重を下げることになりました。

降りてきた条件でいきなり進めず、ユーザーのニーズと、施策のたびに対応してきたCSの意見を聞きながらうまくチームの合意をつくりながら修正できたことがこのプロジェクトのターニングポイントになりました。

「カスタマイズ性」を高めるという方向性が定まった後は、実際に利用しているユーザーにプロトタイプをぶつけながら検証を進めていきました。

プロトタイプをつくるためにCSのメンバーとコミュニケーションを取っていく時にも、新しい概念である「カスタマイズ性」についてうまく擦り合わせるためにイメージを用意していました。

(メンバーとの認識のすり合わせのために「カスタマイズ性」のイメージを用意)

これらのイメージをもとに、CSがユーザーに対してどのようなサポートをしているかを洗い出してもらい、課題感が深い部分をプロトタイプに落としていきました。

(CSからどういうサポートをしているのか、負担が大きい部分はどこかを回収し、優先度の高いところから取り組んでいった。)

例えば、吹き出し型のポップアップをよく使っているユーザーに「この吹き出しの形は理想的か」「こういう編集項目で問題ないか」ということを実際にプロトタイプに触れもらいながら、本当にカスタマイズの体験が起こるか確認していきました。

(実際の検証時のプロトタイプ)

プロトタイプの検証の中で「カスタマイズ」の位置付けが固まっていき、終盤でようやくテンプレートの拡充に取り組んでいきました。

最初にどのようなテンプレートが現場で何が求められているのかCSにまとめてもらいました。

(テンプレートの種類をスプシに洗い出してもらいました。)

ただ、テキスト情報のまま量産しても実際にどのように利用するのかイメージが擦り合わないため、私がUIに落とし直し、CSやユーザーに確認を入れつつ、過不足の調整をしていきました。

(UIの形で改めて共通認識をすり合わせていきました。)

かなり時間をかけましたが、量産の前にあいまいな部分を可視化し認識を合わせることができました。

このようなプロセスを踏みながら、これらのテンプレートパターンで間違いないと決まった後に、デザイナーを交え量産を始めるという流れで、絶対に手戻りが発生しないよう慎重に進めていきました。

終盤ではさらに具体なGUIでテストを行っていき、無事リリースすることができました。

(実際にリリースした「Webメッセージテンプレート機能と管理画面」)

また、最後に振り返りを行った際に、CSやCSリーダーからも反応をもらいました。

「今まで課題を伝えたりフィードバックを出すという関わり方がメインだったが、今回はプロジェクトの最初から最後まで入れたことが良い経験になった」という声をもらうことができ、ユーザー目線を持ったメンバーをうまく巻き込みながら解像度高く理解しつづけることができました。

(CSやチームメンバーの方から頂いた声)

このプロジェクトはReproにジョインしてから初めての大きな開発で、その中でCSとの密なコミュニケーションによりユーザーが本当に必要としているものを作り上げれたこと、段階的なリリースを続けることでユーザーに価値を素早く提供できたことなどは良い経験でした。

一方、開発レディになってから体験上必要な要求を見直すというのは時間のロスも多いですし、進め方も反省が多かったように思います。そういった反省を今後の開発に活かしつつ、より良いプロダクトを作っていきたいと思います。