KARTEのアンケートフォーム(β版)公開までの道のり
Posted on
こんにちは。プレイドでエンジニアのkantetsu（@sskt0809）です。
今回は10月から2月まで自分の属しているチームで取り組んだアンケートフォーム(β版)をリリースしたので、そのリリースまでのリアルな道のりを皆さんに共有できたらいいなと思います。
章立て
- 登場人物
- アンケートフォームとは
- アンケートフォームがなぜ必要だったのか
- アンケートフォームの設計と開発
- 社内テストとフィードバックでの改善
- 社内外への告知
- まとめ
登場人物
この記事に出てくる登場人物を紹介します。これを頭に入れてもらえるとこれから読む記事については読みやすいと思いますw
- チーム：自分が所属しているself serveチームのこと。KARTEを使いやすくする、クライアントさんがサポートなしで自走して使えるようにプロダクト開発するのがミッション。
- kazuuさん：self serveチームのデザイナー。フットサルが趣味。アンケートフォームでデザインとフロントコーディングを担当。
- hashiさん：self serveチームのbizメンバー。海外旅行が趣味。アンケートフォームでクライアントからのフィードバック収集、サポートサイト記事の執筆などを担当。
アンケートフォームとは
今までアンケートのアクション（Webサイトやアプリ上に表示するポップアップなどのこと）を配信するには、HTML/CSS/JavaScriptをKARTEの管理画面内のエディタで書く必要がありましたが、それをコードを書かずにGUI上のフォームで質問項目のみを書くことでアンケートのアクションを作成できます。
アンケートフォームがなぜ必要だったのか
KARTEではリアルタイムでユーザーの属性に合わせてアクションを出し分けができます。
そのアクションの種類の中にアンケートタイプのポップアップがあり、Webサイト上またはアプリ上に出し、その回答を集計するのは勿論のこと、アンケートの回答によってセグメントを作成できて、回答結果を配信対象にすることができるというKARTEならではの使い方もできます。（例えば、 〇〇について好きですか？ に はい と答えた人にのみ施策をすぐに打てたりします。）
これらを聞くと非常に便利なのですが、その肝心のアンケートを今までのKARTEで配信するとなるとカスタマイズが必要となって、HTML/CSS/JavaScriptの知識が必要となってきて、技術リテラシーの高いクライアントさんしか使えないものとなっていました😨
確かにカスタマイズの幅広さはKARTEで強みである一方で、それが必須となると初級者の障壁は高いのです。もちろんGUIだけで対応できるものもあるのですが、アンケートについては当時はコードを書けないと配信は難しかったのです...。というのも、アンケートのアクションを編集する想定のエディタではなかったので。
そこで、特にアンケートなどの形式と用途が比較的決まっているものは何でも作れるではなく、誰でも作れる方が今ある課題を大きく解決できるのではないか、またビジネスサイドとしてもそこを強化して欲しいという強い要望も相まって、チームで11月から取り組むことになりました💪
アンケートフォームの設計と開発
アンケートフォーム（β版）ですが、設計から公開までは下記のようなスケジュールで動きました。
当時は2019年末までにはMVPを作ろうという目標のみあり、それ以降についてはその都度、次はこれを実現しようとチーム内で決めていきました。
設計
今までのエディタのUIだと、今回実現したいことを達成するのは難しいということでデザイナーの kazuuさん を筆頭に設計に入りました。彼曰く「当初はフロントエンド・バックエンド側の両方を新規開発する想定でデザイン作業に着手した」ということで今のエディタのUIは気にせずに刷新する方向で設計しました。
しかし、最終的な理想の姿を一気に実現をしようとすると開発も含めて、フォーカス（PLAIDの開発周期のこと）の期限をどうしても過ぎるということでチーム内で話し合った結果、まずは最小でリリースすることになりました。具体的には既存エディタのレイアウトパターンを踏襲しつつ、操作性を向上させるためのUIを考慮して作成しました。（ここらへんのタイミングで自分が開発メンバーに入ることになりました）
そして、どのようなデザインで開発するか決まったはいいものの、実際自分でコードを読んでみて開発をスタートしようとしましたが、今までのアクションエディタへの知識が浅く、正直なところかなり困っていました。プレビュー（アクションを作る時に実際のサイトでどのように配信されるかプレビューとして確認できる箇所）や実配信のところも絡まっていたので、そこを一気に解決しないといけないとアンケートフォームは完成しないのではないかと難しく考えていたのが原因でした...。
そこでエディタに最も詳しいエンジニアに色々と相談した結果、プレビューの描画や配信のロジックは既存のエディタのものを使用することにして、今回のアンケートフォーム用のデータを用意し、それをHTML、CSS、JavaScriptに変換するロジックを実装することになりました。問題を切り分けるというごく当たり前のことが大事だと感じ、その切り分けに詳しいメンバーにちゃんとヒアリングするのは重要だと再認識しました。
設計部分はチームや有識者たちでコストを最もかけるべきであり、ここをちゃんと取り組むか、それとも疎かにするかで後々の開発や改善のスピードが違ってきます。もちろんいつかはそれを変化するという前提で設計に拘り過ぎないのも大事であるのですが。（ここの塩梅がムズかしい！w）
開発
そして、設計が決まってからは何が必要か、kazuuさんと自分で議論しながら、2人でガンガン開発していきました。
設計の箇所に書いたようにプレビューの描画や配信のロジックは既存のエディタのものを使用するので、その既存のシステムが変わっても変更可能な汎用的なデータ設計の部分が難しくもあり、頭を一番使いました。具体的にはアンケートの設問タイプ（チェックボックスやラジオボタン、短文回答など）ごとに考えないといけなかったり、必須回答かどうかのフラグをどう定義すればいいのかです。
MVPを作るということで、とにかくスピード感を最も大事にして、1ヶ月半弱くらいで完成させました。優先順位の付けを週に1回くらい見直して、お互いの仕事が停滞しないように意識しました。
ここで感じたのが、開発に入ると必要なメンバーのみとコミュニケーションするのが大事ということです。不必要に人数を増やさず、やること、やらないことをちゃんと決めること。
それもあって、なんとか目標通り2019年12月初旬に社内ユーザーテストを実施できるレベルまで提供することができました。
社内テストとフィードバックでの改善
手前味噌ですが、最近のプレイドでの機能のリリース方法は整ってきました。
具体的には下記の手順で行っています。括弧書きは実際にかけた時間です。
- 社内bizメンバー向けの機能共有会
- KARTE Friends Meetup
- サポートサイトやForumでの投稿
シナリオテスト
シナリオテストとは主にチームメンバーで行い、目的は機能がちゃんと動くかどうかの動作チェックをします。つまり、バグの洗い出しです。
今回はkazuuさんがエクセルにユーザーが使う場面を考えれるだけ細かく想定して、シナリオケースを書き出しました。
約100個の項目を3人で手分けして、検証環境で黙々と行っていきました。「ここのボタンがこの場合にdisabledにならない」といった細かいがユーザビリティを下げるようなbugは基本的に取り除かれたり、他にも仕様の考慮不足がここである程度は把握できたのでオススメです。
社内ユーザーテスト / ユーザビリティテスト
シナリオテスト後は、社内ユーザーテストを行いました。
ここではアンケートフォームが価値ある機能であるかの価値検証とユーザビリティがどうかという2つの目的で行いました。
社内から広くテストユーザーを募り、結果的に1回あたり4人くらい集めて計5回ほど行ったので、20人くらいに使ってもらいました。
具体的には開発者のkazuuさんと自分も同席して、テストユーザーの社内メンバーに声に出して操作をしてもらいました。また、それだけでなく操作自体を観察して色々と問題をメモしていき、最後にアンケートをとりました。
そして、フィードバックとして早期に解決できるものはその日にデプロイして、次のテストメンバーにはその問題が治った状態で次のメンバーでテストを行うというパワープレーも実現しました（テストの日程のインターバルを空けろよ！wってツッコミ...わかっております）。あえて良い点を言うと、次回のユーザーテストまでにデプロイしないと同じようなフィードバックが返って来ちゃう、やばいよやばいよ...というスピード感を味わえますw
実際に社内テストの最後で行ったアンケートの声（一部抜粋）
- 設問項目についてもラジオボタンとチェックボックスを切り替えたいときもあるので、ものに寄っては選択項目を切り替えられても良さそう。
- 「完了（close）」ボタンと「回答送信」ボタンは迷いました。「完了」ボタンはいらないかも？
- よくある「・・・」にいろいろ隠れているので、それに慣れれば問題なし！
- 下のボタン設定が何を指しているのかすぐにわかりませんでした。・・・部分の削除を押したら、項目が消えて戻せないのではないかと思い、不安になりました。
開発者である自分はすっかり自分たちの仕様に慣れていたのもあったせいか、「まさかそんな使い方する？！」とか「確かにこれは初見ではわからないか...！」といった新しい発見があり、社内テストをやってよかったです。これのおかげで実際にUIとして変更した部分は多かったです。
また、社内での価値検証としても期待できる機能であることは把握できたので、その面でも当初の目的は達成できたと思っています。
クライアントβテスト
シナリオテストと社内ユーザーテストを終えた後は hashiさん にアンケートの配信をヘビーに使用しているクライアントさんに限定公開という形でアンケートを使用してもらうように掛け合ってもらいました。計3社のお客さんに実際に使っていただきました。
やはり実際に今までアンケートのアクションを配信しているので、今まで社内で来たフィードバックと違ったフィードバックが来ました。もちろん良い意見ももらった一方で確かにその改善は必要だというフィードバックも貰い、できるだけその問題を汎用的に解けるかどうかをチームで議論しました。
その後に期間をあけてですが、ブラッシュアップの期間を設けてそこでさらなるアップデートをしました。
下記は実際のアップデート記事です。（デザイナーの kazuuさん と自分がそれぞれ書きました！ ）
- https://support.karte.io/update/5lsIX30Jp8TOrOpCYBFYtI
- https://support.karte.io/update/N3QmGTQ3bIOYb9jpCRB2O
社内外への告知
あらゆるテストを終えて、最低限提供はできる状態となりました。しかし、ただ機能解放するだけではクライアントさんに使ってもらえないので、社内外への告知が必要となります。そこでチームで下記の場を利用することでクライアントさんに告知するようにしました。
- 社内bizメンバー向けの機能共有会
- KARTE Friends Meetup
- サポートサイトやForumでの投稿
社内bizメンバー向けの機能共有会
社内bizメンバー向けの機能共有会は自分たちのチームが1ヶ月に1度、biz向けに行なっていて、自分たちの新規開発や大幅なアップデートを行なったのを共有して、色々と意見をもらう場所です。
対象のオーディエンスはエンジニアではなく、アカウント（営業）やカスタマーサクセス、サポートのメンバーです。実際にクライアントに接しているメンバーが聞いているからこそ、現場でどのように説明すべきかなどリアルな意見がもらえます。また、彼らがアップデートした内容を知ることによって結果的にクライアントさんに自分たちの機能が届くという仕組みになっていて、まさに自分たちのチームとbizメンバーのハブとなっている場所といっても過言ではないでしょう。
KARTE Friends Meetup
PLAIDのCommunityチームでは、KARTEを利用する方々が集まるコミュニティ「KARTE Friends Community」をオフラインで運営していて（たまにオンライン開催あり）、プレイドのお知らせというKARTEの新機能やアップデートを紹介する時間を設けていて、そこで数回発表しました。
宣伝ですが、KARTE Friends Communityについては下記の記事がわかりやすいです。
https://blog.plaid.co.jp/n/n26586f0d7366
サポートサイトやフォーラムでの投稿
もちろんオフラインの共有だけでなく、オンラインでの共有も行なっています。先ほどのクライアントβテストの箇所で貼った記事や、下記に添付してあるフォーラムで周知しています。
個人的には周知すべきアップデートなどはあらゆるチャネルで周知するように心がけています。
まとめ
設計から開発まで、またその先のテストやクライアントさんへの告知やフィードバック収集まで、こんなにガッツリ0から10まで突貫で自分が携わったのは初めてだったので、開発のスピード感を出すには今後どうすれば良いのか、フィードバックをもらうタイミングや体制、効率よく周知する方法など、次回の開発でも使えそうなことを学びました。
自分はロールとしてエンジニアですが、ただの「機能」を開発するのではなく、「使ってもらえる機能」を開発をしないといけないのだと改めて実感しました。
また、使ってもらえるまでに至るまでには考えることもやることもすごく多かったです。
bizメンバーがクライアントさんへの周知やサポートを担ってくれていたのを自分の手で体感することによって、bizメンバーのありがたさを感じました。
ネクストステージは今回業務でやったことをフロー化させて、他のチームや会社に還元できるように努めます。
また、この記事を見て、自分の会社やチームでもやってみようと思っていただけたなら幸いです。
CX（顧客体験）プラットフォーム「KARTE」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。
詳しくは弊社採用ページまたはWantedlyをご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！