この記事は Figma Advent Calendar 2022 23日目の投稿です。
はじめまして！株式会社ジパンクでデザイナーをしている関根です👋
ジパンクはQudenという業務コラボレーションに動画を活用するプラットフォームを提供しているシード期のスタートアップです。
チーム体制はファウンダー2名とフルタイム数名という少人数でプロダクト開発を進めていて、私はデザイナーとしてQudenのUI/UXデザイン全般(ヒアリング/要件定義/デザイン/プロトタイプ作成/ユーザービリティテストなど)をコア業務に、マーケティング用クリエイティブの作成などグラフィックデザインまで広く担当しています。
この記事では、デザイナーをはじめとした日々プロダクト開発に関わっている方を対象にデザイン周りのコミュニケーション非同期化のtipsについて、オフィスなし・オールリモートでフルフレックス体制の弊社での実践例を交えてご紹介します🙌
はじめに
突然ですが、みなさんはプロダクトの新機能を開発する上でエンジニアやビジネスサイド、他のデザイナーとどのようにコミュニケーションをとっていますか？
オフィス勤務の方はステークホルダー全員で集まって仕様の検討を進めたり、進捗報告などをするのが一般的でしょうか。デザインエンジニアの方などはひとりで仕様検討からフロントの実装まで担当していらっしゃるかもしれません。どのようにコミュニケーションをとっていたとしても、組織の状況に合わせた手段をとれることが一番ですよね。
QudenはジャンルとしてはB2B SaaSですが、「まず試して購入する」というtoCで一般的な購買体験で価値をデリバリーするためにProduct-Led Growth(PLG)という事業モデルを採用しています。そのためQudenでは一般的なB2B SaaSに比べてプロダクトの利用体験が価値に直結するので、デザイナー、エンジニア、プロダクト、マーケなどチーム横断でプロダクト改善に向けたコラボレーションを推進することが重要です。
加えて弊社の働き方の特徴として、オールリモート(オフィスを持たず全員がリモートで働く)、かつ勤務時間がフレキシブルな業務委託メンバーが多いため、全員が集まる機会を設けようとすると、次回のmtgまで作業が進まず開発効率が落ちてしまいます。
そこで弊社ではデザイン業務を進める上でのコミュニケーションを動画を活用して非同期化し、開発効率を落とさない工夫をしています。
非同期コミュニケーションとは
チャットのように発信と受信にタイムラグがある手法を指します。
反対にリアルタイムのコミュニケーションを同期的コミュニケーションと言います。
以下では具体的な実践例としてデザインプロセスの各ポイントを取り上げ、どのように異職種のメンバーと非同期でコミュニケーションをとっているかご紹介します🙌
デザインプロセスごとの非同期コミュニケーション実践例
🗣️ ユーザーの要求をFigJamで整理
弊社での新機能開発は、まずはじめに日々さまざまなチャネルから集まるユーザーの声を整理し要件を定義していくことから始まります。
FigJamを使ってチームメンバーがユーザーの声を参照しやすいように集約・整理して議論の土台を作り、ユーザー価値と事業価値を踏まえて機能開発の優先順位をチームで議論します。
ここでは現在開発中の機能の仕様を議論した際のFigJamをちらっとお見せします。
1.その機能にまつわるユーザーの要求を整理する
このようにユーザーへのヒアリングやチャットボットからのお問合せなどで寄せられるユーザーの声を、開発の前段階でFigJamを使って整理します。
2.機能単位でのMVP(Minimum Viable Product)設計
次はユーザーの声からインサイトを抽出しソリューション(新機能)の方針を立てます。
さっそくUI作成！といきたいですが、まずはユーザーの要求を満たす最小限の機能に絞り込み、スピーディーにユーザーに価値を届けることを意識しています。
”どの要求を最優先事項とすべきか”について認識のずれがあると全く別の方向に向かって開発を進めてしまうため、この段階ではそういった事態を避けるために同期的なmtgを設けることが多いです。
同期的なmtgを行う際にも、事前にそのmtgで明確にしたいポイントについて動画を作成し、非同期的に視聴できる状況にしておくとスムーズに議論に入ることができます。
🦴 ナビゲーション整理・ワイヤフレーム作成
解決する課題とその範囲が決まったら、具体的な画面を作る前に非同期的にナビゲーションを整理しチームに共有します。
後になっての手戻りをできる限り減らすため、他職種のメンバーから技術的な制約がないかなどのフィードバックを早めにもらえるよう意識しています。このような抽象的な段階では、ニュアンスが伝わりにくいテキストでの共有は難しいため、ここでも動画を活用します。
動画を活用すると撮る側としては自分の考えを整理してから話すことができ、見る側も2倍速で見て時間を節約したり、一時停止してじっくり考えて意見を伝えることができるので、双方にとってメリットがあります。
🙏 フィードバックのお願い
ナビゲーションについて認識がとれた後はプロトタイプ作成を進め、ある程度形になってきた段階で他のメンバーに向けてフィードバック依頼の動画を作成して共有します。
これは進捗報告や他の方の目を通してデザインをブラッシュアップすることと、より具体的になった状態で異職種の方にも見てもらうことで初期の議論では出てこなかった意見をもらうことを目的としています。
例えば、この動画ではビジネスサイドからプロダクトのグロース観点から盛り込みたい施策案をいただいています。
💙 Figmaで完結するプロダクト検証
メンバーからのフィードバックを踏まえてデザインを修正して新機能デザイン完成！早速エンジニアに渡そう！といきたいところですが、ユーザー体験を大きく変える機能を開発する際はエンジニアに実装をお願いする前にユーザービリティテストを実施します。
これまでプロダクトのデザイン作成をFigmaで行ってきたことによって、ユーザビリティテスト用に少し手を加えるだけで本番環境にそっくりなプロトタイプを用いてユーザビリティテストを行うことができます。
(Figmaで作成したプロトタイプ↓)
実装前にユーザーテストを行うことで、使いにくい部分がないか、そもそもユーザーのニーズと合っているかなどをエンジニアのリソースを割かずに検証ができるので、改善サイクルを回すコストを下げることができます。
また、ユーザーテストの様子はQudenにアップロードし、簡単なメモと合わせてNotionページに埋め込むことで同席していなかったメンバーもユーザーのリアルな反応を見ることができるようになり、チーム全体のユーザーへの解像度が上がります。
🤝 開発チームへのデザインファイル共有
ユーザービリティテストを経てユーザーのフィードバックを踏まえた修正を加えたら、開発チームへデザインファイルを共有します。
この際もデザインファイルやプロトタイプだけを共有するのではなく、詳細なインタラクションについての補足や最終的な仕様や別のタイミングで取り組むと決めたことなどを動画でまとめて話します。
そして最後にこれまでの議論に使用してきた動画、ドキュメント、FigmaのデザインファイルをGitHubのひとつのisssueページにまとめて開発サイドに共有します。
こうして共有されたコンテンツは、特にデザイン作成から実装までラグがある際に実装前に仕様検討の議論を振り返ったり、新しくジョインしたメンバーが実装を担当する際にキャッチアップしたりするために参照されます。
↑エンジニアの声
まとめ：コミュニケーションを非同期化するメリット
このようにデザインプロセスに非同期コラボレーションを取り入れることで、ステークホルダー全員が無理に時間を合わせることなく効率的にプロダクト開発を進めることができています。
またコミュニケーションに「動画を撮って共有する」という方法を使うことで、テキストだと説明しづらい抽象的なコンセプトや上流工程の説明コストが下がり、メンバーからの早期のフィードバックをもらいやすくなります。この点もプロダクト開発のスピードを高められているポイントです。
弊社での一連のデザインプロセスを見ていただきましたが、抽象的な段階での説明からプロトタイプを用いたユーザービリティテストまで、デザイン業務は一貫してFigmaを中心に行っています。
今回は、それを共有する方法としてQudenの非同期×動画という手段をご紹介させていただきました。
宣伝っぽくなってしまいましたが、ここまで読んでいただきありがとうございました！
何かしらお役に立てれば幸いです。