こんにちは、Strap チームで主にフロントエンド周りの実装を担当しているUXエンジニアのトゥイスクです。
今回は、Strapの開発プロセスをご紹介できればと思い、先日リリースしたばかりのチュートリアルの開発について、全体の流れや総括をシェアします！
- 「Strapチームではどんな風にチームメンバーと開発者が連携しているのか？」
- 「アイディアレベルから実装までのプロセスがどうなっているのか？」
といった部分が少しでも伝われば嬉しいです！
ちなみに、本記事は全体のプロセスの概要について紹介しますが、Strap1周年記念イベントの発表ではこのプロセスでどうStrapを使ったかも紹介しましたので、興味があればぜひ見てみてください！
※ 実装のコードについてはこの記事では触れていません。そちらはまた別途共有予定です。
チュートリアル開発の目的と内容
まず、今回実装したチュートリアルを紹介します。 が、その前に前提として、このチュートリアルは、Strapのオンボーディング強化のうちのひとつの機能なので、Strapのオンボーディングの目的についても紹介します。
なぜやるのか
Strapを使ったことがない人が、
- Strapでできることを素早く認識して、価値の判断ができるようになる
- Strapの世界観に触れて、このプロダクトがどんなパーソナリティなのかを理解する
ということがメインの目的です。
Strapチームでは、リリース以降この辺をCSチームがマンパワーでカバーしていたのですが、少数のチームでやっていると限界があるので、プロダクト側でも充実させられないかという話になりました。 チュートリアルはそのうちの一部の機能です。
何をやるのか
一言で説明すると、「Strapの操作を知らないユーザーに、操作を体験してもらうフロー」です。
【BREAKING NEWS🥳】
— Strap (@strap_app) 2021年11月10日
たったいま！チュートリアル機能を公開しました🎉
初めてログインする方はサービス内でStrapの基本機能をBotといっしょに楽しく学べます🤖✏️
すでにご利用中の方はボード右上の「？」アイコンからお試しいただけます✨
新メンバー招待時にもぜひご活用ください🙌 pic.twitter.com/XZopZGxJkE
こんな形で、ただの紙芝居ではなくユーザーの直接操作をガイドしていくようなものを作りました。
着想から実装までの流れ
全体の流れとしては、以下のように進めました。
それぞれのステップをこれから細かく紹介していきます。
ちなみに、それぞれのステップでどんなことをやっているかをギャレットのUX5段階モデルのどの段階かも含めて解説しています。
前提：今回の登場人物
詳しくは後述しますので、ざっくりと。
- エンジニア：機能を実装する人。コードを書くだけではなく、体験設計、仕様の検討なども行う。
- デザイナー：デザインをする人。体験のデザインとUIのデザイン両方を行う。
- プロダクトマネージャー（以下PdM）：戦略に基づいて、プロダクトを成長に導くべく開発の管理をする人。実装の優先度を検討したり、仕様などのチェックをしたりする。
- CS（カスタマーサクセス）チーム：プロダクトを使うことによって、クライアントの目指すゴールを達成することを支援する人。お問い合わせしてくださった方にとって最初にコミュニケーションをとり、導入や社内での活用を支援する存在。
それでは、以下からそれぞれのフェーズで何をしたか紹介していきます。
1. アイディエーション
メインメンバー：チーム全員
まず、「オンボーディングにあったらいいもの」というざっくりとしたテーマで、チーム全体でアイディアを発散しました。ここでは収束せずに、とにかく思いつくままに出して、後で参考にするようなイメージです。
2. 価値の定義
メインメンバー：エンジニア、デザイナー、PdM
まず、根本的な価値（この実装はなぜするのか？何を提供すべきか？）を定義しました。言い換えると、「何を達成すればこの機能はユーザーに提供できるようになるのか」を定義することで、これは５段階モデルの「戦略」・「要件」部分にあたるイメージです。
- 根本的な価値を決めないと後から大きい手戻りを発生する可能性を防ぐ
- 最低限どんなものを届けることが必要かの認識を揃えられるので、リリースまでのフローが明確になる
という意図で、私たちはこのフェーズをとても大事にしています。 基本的にエンジニアが主導でメインの価値のたたきを作り、デザイナーや他チームメンバーと壁打ちを繰り返して、デザイナーとPdMと収束するという形で進めました。
「リテラシーに関わらずStrapで出来ることがわかる価値」など、根幹となる価値をここで決め、最終的にこの内容をチーム全員にも共有し合意します。
3. 体験のデザイン（内容を大体決める）
メインメンバー：エンジニア、デザイナー、PdM
価値とアイディアが揃ったら、次に具体的な内容を決めに入ります。ここで、５段階モデルの「構造」と「骨格」を決めていくイメージです。チュートリアルは主にゲームなどで効果的に使われていることから、デザイナーとエンジニアでゲームをやりつつ分析なども行いました。
ここでは、どんなレベルがあって、それぞれのレベルの中で何をするか、概要レベルで確定しました。こちらも進め方はほとんど前のフェーズと同じで、エンジニアが主導で動きつつ、デザイナー中心に他メンバーと壁打ちしながら進めて、チームに共有という流れです。
4. 実装方法の検討（スパイク）
メインメンバー：エンジニア
ここまででどんな内容を提供することを決めたので、次に実際にどう実装するかを検討しました。 利用するツールの選定、そのツールを使ってどんなフローでアプリケーションが動くかの検討、Strap側のボット埋め込み（CPUユーザーが一緒にワークをしているようなものを作る）の検討を行いました。図は、チュートリアルのアプリケーションフローの抜粋です。こちらについては、メインのエンジニアが主導で検討を進めて、他のエンジニアが内容をレビューするという形で進めました。
ここでは機能の効果計測についても検討しました。Strapの価値が伝わることのひとつとして、トライアルからの契約を増やすことも期待している効果なので、その観点でも検討しています。CSチームとも、どんなデータがあれば良さそうかなどすり合わせて決定しました。
5. コア部分の実装
メインメンバー：エンジニア
内容と実装方法はこれで決まったので、ビジュアルデザイン以外の実装を行いました。ビジュアルデザインを確定する前に実装した理由としては、リソースの関係で、開発側の方が先に着手できそうだったからです。
スパイクの段階でほぼほぼ実装の内容は見えていたので、ここではそれを黙々と実装していきます。途中、設計をした人と実装する人を別にしてペアプロで実装を行うなどの取り組みもしました。
6. ビジュアルデザインとその反映
メインメンバー：デザイナー、エンジニア、PdM
最後に、ビジュアルデザインとその実装を行いました。内容は決まっていたので、UIだけを最後の仕上げとしてやりました。これは5段階モデルでいう「表層」部分にあたります。
「どうしたら興味を持ってやってもらえるか」ということを考えて、デザイナー主導でエンジニアとPdMと相談しつつ進めたのですが、しっくりくるものになるまで何パターンも作りました（デザイナーさんありがとう）。。。
この前の段階までは「フロー１（はじめてのStrap）」→「フロー２（ロボットに挨拶）」→「フロー３（みんなでアイデア出し）」を必ず順番にやっていく形だったのを、写真のように１つのメニューで全フローが並ぶようにして、どのフローからでも始められるように変更をしました。Strapのチュートリアルの特徴としては、ボットと一緒にコラボレーションを体験することなので、最初からどんな内容のメニューがあるか全てを見せることで、より興味を持ってもらうのが狙いです。
リリース 🎉
最後に、チーム全員に開発環境をシェアして、内容を見てもらいリリースしました！
リリース後のアップデート
リリース後もチュートリアルは随時アップデートをしています。 前述した計測の結果やユーザーのフィードバックを元に、対応方針をエンジニアとデザイナー、PdM中心に話し合い、実際の変更はエンジニア側で対応しています。 考えて作ったつもりでも、意外と出してみて気づくこともたくさんあるんですよね。。。
このプロセスについての所感
よさみ
- 先に価値の決定、大まかな内容の確定をすることで内容の検討はスムーズに進み、後で大きな変更が起こらなかった
- エンジニアとデザイナー、CSチーム、マネージャーなど、他のメンバーも巻き込んでいくことで、より広い観点で議論が出来、アウトプットも良くなった
- チームで議論・共有をすることで、最終的にチーム全体が納得できる機能になった
改善できそうなところ
- ビジュアルデザインのフェーズで、３つのメニューをまとめる際に一つ前のコア部分実装の手戻りが起こってしまった。開発が先に着手出来そうだったので、リソースのタイミングの問題でこのようにしたのですが、ビジュアルデザイン確定前に実装すればよりスムーズだったかもしれない、、、
- チームで進めていく中で、合意形成に時間がかかってしまうことがあるので、会議だけではなく、slackなどの非同期コミュニケーションなどで細かく共有していくとよかったと感じた（途中からこの方向に切り替えてうまく進んでいた）
まとめ
以上、今回はチュートリアルを例にして、機能実装のプロセスを紹介しました！
Strapチームの開発の特徴としては、より良い体験を提供するためにエンジニアとデザイナー、PdM、CSなどチームのメンバーが色々なフェーズで協力しながら開発していることだと思います。 いわゆるウォーターフォールのような開発ではないので、エンジニアも自分で機能について深く考え、検証していく必要があって、個人的にはそれがStrapチームでの開発の楽しさだなと感じています。 根本には「偉大なプロダクトは偉大なチームから生まれる」と言う考えがあるからだと思います。
このプロセスで完璧や！と思っているわけではなく、私たちも色々な経験から学び、より良いプロセス、チームを目指して日々色々なトライをしている最中です。「他のチームはどう開発しているのか？」と気になっている方に少しでも参考になったら嬉しいです！
最後に
Strapチームではチームメンバーと職種を超えてコラボレーションしながら開発していただける仲間を募集しています。 今回紹介したようなプロセスでの開発に少しでも興味をお持ちの方は、カジュアル面談からでもぜひお話しましょう！
