遷移フローをイメージしやすくするには？Adobe XDを活用するRoomClipのプロダクトオーナーの仕事内容を公開

唐突ですが、「RoomClipではアプリディレクターを募集しています。」

ただ、これだけだと仕事内容イメージ湧かないですよね？

「施策の企画〜実行まで一気通貫でできます」

求人票に書かれているこの文言を見て、「仕事内容の大枠はイメージできたけど、RoomClipに落とし込んだ時にどういう施策やってるかわからない。」「これって他でもできる会社あるよね？」って思った方もいると思います。

そこで、少しでも「RoomClipの」アプリディレクターの仕事イメージを明確に持っていただきたく、直近でリリースした新機能「教えてアイテム」に、どのようにディレクターが関わったかを公開したいと思います。

「教えてアイテム」とは？

2018年の5月にリリースした、「投稿された写真に写っている気になる家具や雑貨等のアイテムを、写真上の範囲を指定する事で投稿者に質問する事ができる」という機能です。

「コレいいな・・・！！」と思っても、商品名が分からなくて探せず、諦めてしまう、という経験をしたことはありませんか？こういう時に役立つのが、教えてアイテム機能です。

教えてアイテム機能により、欲しい商品を探す手間が省けるので、よりスムーズに、自分の理想のお部屋・暮らしを実現することが出来るようになりました。

コメント欄でのユーザー間のやりとりが、アイディアのヒントに

この機能を入れようと思った発端は、RoomClipの写真コメント欄で「この商品どこで買ったんですか？」というユーザー間でのやりとり。

そこで、ユーザーインタビューでも話を聞いてみたところ、「写真に写っているアイテムを知りたくても、コメントするのはハードルが高くて聞くことができない」、という声がいくつかあがってきました。そういった悩みを抱えているユーザーさん達に、手軽にアイテム情報を聞くことができる機能をリリースすると、「RoomClipで生活を変える」というよりユーザー体験の実現に繋がるのでは？と考えたのがこのプロジェクトのスタートです。

実際のリリースまでのプロセスを公開！！

施策の企画〜リリースまでの各プロセスの実行までの全ての流れを、ディレクターは一気通貫で担当します。そのため、基本的には下記の流れをディレクターがリードして進めていくことなります。

①ユーザー課題の抽出・解決シナリオの考案
定性面（インタビュー等からのニーズの聞き取り）、定量面（過去にアイテムについて聞いているコメントがどれだけあって、どれくらい使われそうか）の洗い出しからスタート。ニーズをより具体化しつつ、機能の構想を膨らませていきました。

②社内の各チームに施策概要を説明
開発メンバー・デザインチームに概要をを頭出し。今回は、ユーザーさん同士のコミュニケーションに大きな影響を与える話でもあるので、社内で一番ユーザーさんと近い距離にいるコミュニティチームのメンバーにも相談しました。
各チームに事前に話をすることで、共通認識がしっかりできるとともに、その時点では見えていなかった抑えるべきポイントが見えてきて、施策がブラッシュアップされるといったことも多々あります。

③実際の画面遷移まで含めたモックを作成し、エンジニア・デザイナーとディスカッション
関わるメンバー全員が、実際の動きを簡単にイメージできるようにAdobe XDを活用しました。UI/UXとして問題ないか、実装時の挙動で実現できない部分はないかといったことについて議論し、大枠の動きとして合意が取れるところまで持っていきます。

④ デザイン起こし→開発開始
デザイナーの方で正式のデザインを起こし、デザイン仕様に落とした上でエンジニアに共有され、実装がスタートします。

⑤プロトタイプ完成の時点で全社に共有・使ってもらってフィードバック→リリース
実際に動くプロトタイプを使ってもらって、当初の想定と違っている部分がないかを確認してもらいながら、誰しもに納得してもらえる状態に仕上げます。

結果としては、企画時に狙った通り、これまでコメント欄での質問にハードルを感じていたユーザーさんに本機能を使っていただくことができました。社外秘なので具体的な数字まではお伝えできないですが、想定よりも多くのユーザーさんに利用していただくことができました。また質問に回答側のユーザーさんも、ポジティブに答えてくださるユーザーさんが多かったのも印象的でした。

進行のポイントは「ディレクター・デザイナー・エンジニア間での遷移図のすり合わせ」

プロジェクトを進めるにあたり、実際のアプリの遷移の認識がディレクター、デザイナー、エンジニアの3者間で食い違わないように、Adobe XDを利用して遷移図をリアリティのあるものにすることを意識しました。

手書きレベルだと意外とメンバーが遷移フローをイメージしづらく、共通認識を持てないことが多かったため、ディレクターが遷移のモックを実際のアプリの画面に近い形で作り込みました。これまでのプロジェクトで、実装がある程度進んだ段階で、遷移フローについてお互い認識が違うことがわかり、開発途中でまた仕様について議論し直すということが多々あったからです。そこからの学びを活かし、今回は「よりイメージしやすい形にして共有する」ことを大切にしました。

また、アプリにおいては、iOS, AndroidでUIや挙動が多少異なるので、それぞれの場合でどう各画面が遷移するのかもかなり意識しています。この遷移確認をモック作成〜エンジニアとのディスカッションフェーズでやりこまないと、「iOSではうまくいくけど、Androidでは実現しない」、といったことも起こり得るため、意外と重要なプロセスです。

一方で、苦労した点もあります。最初に想定していた機能をすべて実装すると、非常に大変であることが途中で発覚しました。悩ましい決断ではあったものの、フル機能実装してリリース、ではなく、「アイテム情報を質問する機能にニーズがあるのか」を検証するためのミニマム実装に振り切りました。結果、ニーズの検証を早々に行うことができ、ポジティブな結果を得られることができました。

RoomClipならではの定性的な特徴も忘れずに♪

ここまで、プロジェクト進行の概要や気をつけた点に関してお話してきましたが、「RoomClipならでは」の定性的な特徴・配慮ももちろん盛り込んでいます。

「このアイテムを教えてください」→ 「このアイテムを教えてください♪」
親しみのあるトーンへ変更することで、コミュニケーショントーンが堅苦しい「依頼」のようにならず、質問を受けた人もポジティブな印象を持てるよう配慮しました。

写真上の「？」アイコン表示期間 → 質問後7日間のみ。
いつまでも「？」アイコンが写真の上に載っていると、質問を受けた人が煩わしく感じてしまう可能性もあるため、質問後8日目からは、画像上のアイコン表示はなくしてコメント欄からの導線としました。

ユーザーさんが理想の部屋に出会うだけじゃ物足りない。ユーザーさんの「生活を変える」という体験を提供することがゴール

RoomClipには300万枚のお部屋の実例写真が集まっていて、ユーザーさんにその中から「自分の理想の部屋」の写真を見つけてもらうことも、大事なユーザー体験です。ただ、それだけがゴールではありません。

お手本に出会って、自分の「生活を変える」ところまでサポートすることがゴールです。

今回のプロジェクトに関しても、「RoomClipのユーザーさんが生活を変えると経験を得るために、ボトルネックになっていることはないだろうか」と言う問いかけにひたすら向き合ったところからスタートしています。RoomClipのディレクターポジションでは、売上やMAUなど、各種KPIも大事な指標ではありますが、それと同じくらい、定性的な「ユーザー体験の向上」と言う観点も大事にしています。

売上だけではなく、ユーザー課題にとことん向き合えるディレクターを募集しています！