Chatworkプロダクトデザイン部マネージャーの仁科です。 Chatworkは32万社以上(2021年6月末日時点)の中小企業の方にご利用いただいている国内最大のビジネスチャットで、Chatwork上では投稿されたメッセージに対して返信やリアクションをおこなうことができます。2021年5月26日に特定のメッセージにブックマークをつけられる機能が追加されました。今回は、ブックマーク機能追加のプロセスを紹介しつつ、Chatworkのプロダクト開発についてまとめていきたいと思います。

今回リリースした「ブックマーク」機能は、あとで特定のメッセージを読み返したり、返信などのアクションをおこないたいと考えるユーザーのために開発されました。背景にあるのは、事前に実施したユーザーインタビューの際に得られた以下の課題でした。

  • Chatworkはブラウザ版やデスクトップ版アプリ、iOS版アプリとAndroid版アプリなどさまざまなデバイス対応でサービスを提供しているため、例えば移動中にモバイル版アプリでメッセージを閲覧し、後でオフィスから返信しようとするが、そのメッセージが見当たらない
  • 過去に投稿された重要なメッセージを探しにいくが、見つけられない

どのチャットルームにメッセージが書いてあるのかがわからなくなったり、あとで見ようと思っていても流れてしまったりといった「チャット」ならではの課題に直面しているユーザーが多くいました。この課題を解決すべく立ち上がったのが、ブックマーク開発プロジェクトです。

Chatwork にはプロダクトマネージャー(以下:PdM)が10名在籍しています。プロジェクトが発足すると、PdMはプロジェクト開始前にPRD(Product Requirements Document:プロダクト要求仕様書)を作成します。PRDのフォーマットは決められおり、主に以下の項目について触れられています:

  • ターゲットユーザーは誰か
  • 解決したい課題は何か
  • 解決することよってユーザーが得られる価値は何か
  • 開発のスコープ
  • 改善が期待できる KPI

PRDはプロジェクトが進むにつれてユーザーインタビューを通じてアップデートされることもあります。PRDは、PdMやエンジニア、デザイナー間の共通理解としてプロジェクトを通して語られます。

今回はそこに視覚的に伝わるようなストーリーボードをデザイナーが作成し、チームの意識統一を促しました。

今回のプロジェクトでは、Chatworkが提供するすべてのクライアントが対象となったため、非常に多くのチームメンバーが関わっていました。デザインに関しても、体験設計・UIデザインそれぞれに専門性が求められたため、デザイナーの中でも役割を2つに分けました。

UXデザイナーとして体験設計を担うのが坂田、ブラウザ版とモバイル版アプリのChatworkのUI設計を担うのが金子と大竹、という形で、役割と担当を明文化しました。

ユーザーリサーチはUXデザイナーが主導しておこない、検証結果をもとにUIデザイナーがUIをアップデートし、後にPdMと会話した上でデザインの意思決定をしていきます。

先述のユーザーインタビューから得られた発見として、「あとで返信しようと思ったメッセージが見つからない」という課題と、「過去に投稿された重要なメッセージが見つけられない」というニーズどちらもありました。UIを作成するにあたって、「どちらのニーズも満たそうとすると機能の目的がブレてしまい、使いづらくなってしまうのではないか」という仮説があり、体験としてどちらかを優先すべきかという議論が起こっていたのですが、プロトタイプを作って実際にテストをしたところ、おおむね反応が良く、機能としてもUIとしても十分だということがわかりました。

その反応をもとにPdMがUIの方向性を意思決定し、プロジェクト定例の場でメンバー全員に周知され、そのあとはデザイナー・エンジニアを中心に詳細を詰めていきました。

実装後、リリースの前にも検証テストをおこない、ライティングの伝わりづらさや不具合などを潰したのちにリリースします。またリリース後もメンバーで効果測定をおこないます。ユーザーからいただくご意見・ご要望にも目を通し、改善策を練ってその後もリリースを繰り返していきました。

リリース後、多かったご意見としては、メッセージ対するアクション群に「ブックマーク」を追加したことにより、デフォルトで表示していた「リンク」のアクションを「…」のなかに格納したのですが、「利用頻度が多かった操作が変わると困る」というご意見が想定していた以上に多く、チューニングをおこないました。

前述したとおり、「ブックマーク」機能の狙いは、あとで見ようと思っても流れていってしまうメッセージを探す手間をなくし、返信やリアクションといったアクションをスムーズにおこなうことで必要なビジネスコミュニケーションを忘れずに継続させることです。

リリース後は計測したい項目を一覧で見ることができるダッシュボードを用意し、いつでも見られるようにしました。「ブックマーク」機能の場合、ブックマークに追加した数や外した数などを計測しました。結果、6月上旬時点でブックマークへの追加と外す動作をしているユーザーが一定数観測できるようになってきました。それはブックマークの利用が習慣化してきていることの表れだと思っています。メッセージの送信数の向上も効果として見え始め、日々のビジネスコミュニケーションの改善にお役立ていただいていることを実感しています。

今回の記事では、Chatworkの新機能「ブックマーク」機能開発におけるデザインプロセスをご紹介しました。

Chawtorkでは、ユーザー課題を可視化し、解決する課題を明らかにしてからUIデザインに入ることがとても重要だと考えています。 なぜなら、この部分がぼやけたまま解決策の模索に走ってしまうと、課題のフォーカスがぶれてしまいあとから要件がどんどん増えてしまったり、開発が進んでから巻き戻りが発生してしまうリスクが高いからです。

途中の要件変更やスコープの調整は起こることなので柔軟に対応していきますが、あまりにも要件がコロコロ変わったり、大きな無駄が出てしまうと、チームの士気が下がってしまうので、ちょっとした工夫で避けられるのであれば避けたいところです。

次回の記事では、このブックマーク機能追加時のUI設計とチームコミュニケーションのプロセスをご紹介していきます。お楽しみに!

このデザイン組織をもっと知る