[&] ROLLCAKE * LIVESENSE

#livesense ATARIMAE/STUDY
■エンジニアとデザイナがいかにサービスデザインに取り組むか？

エンジニアとデザイなが揃ってさえいれば良いサービスが作れる？

Rollcake 伊野氏 UI/UX Designer
Livesense 島田氏 Lead Engineer
Livesense 植村氏 Frontend Engineer

ユーザー体験設計を軸にするめるサービスデザイン

デザイナーとエンジニアでどうやっていくのか？
この二三年でサービスデザインをやってきて、失敗しながら、
いい方向をみつけながら改善しながらやっています。
実際にやっているサービスも含めてお話しができれば。

レターというサービスをリリースしました。
このレターというサービスは、ロールケーキ株式会社で
初めて出したサービスです。cookpad の中の 3人が独立して作った会社で。
iPhoneアプリのサービスで、
自分の子供の写真を毎月１枚選んで、両親へ iPhone 上で贈る、
リアルなカレンダーがついたものが親やおじいちゃんおばあちゃんにおくれるサービス。
続けられる親孝行というサービスです。
一通250円。ダウンロードは７万、レターの数は４万通です。

このレターをやるまえにどういくことをやってきたかというと、
cookpad 本社で iOSアプリをフルスクラッチでリニューアル担当しました。
Voyage グループで、声のメッセンジャー、プロ野球観戦のサービス、
サービスを作る時に、ビジュアルから作るのではなく、
使う人がどういう体験するかを設計して、UIに落とし込む。
Voyage グループのとき、数十万のサービスを作っていて、
これをもっと多くの人が使うサービスを作りたいと野望をうけて、
cookpad に行きました。数百万ダウンロードがあって、
数字的にも KPI的にもいい数字がでて、
次は自分がやりたいサービスでもいけるのか？と、今にいたる。

その方法か、やり方を一言で話すのですが、
「地図（道順）をすてて、コンパスを使う」
サービスを作ろうというところから、リリースするところまで、
決まっている、道順どうり作っていく。
地図の方法では失敗します。試行錯誤していって、
今は、コンパスのイメージで作っています。

地図は、あの建物を右にまがって、と書いてあるが、
コンパスは今自分の居る場所と行きたいと思っている場所だけ。
地図はどうやって歩いていけばいいのか分かっている状態。
そのとおりに歩いていけば多分付くだろう。
安心できる。使い方も凄い簡単。
そんなに難しいことじゃない。

コンパスは、どう歩いていけばいいかわからない。
コンパスはその都度現状を確認しなければいけない。
遠回りになるかもしれない。
自分がどこにいるのかしかわからない、この後どうなるのか分からない。
使うのもちょっと難しい。

どう考えても地図のほうが良さそうにおもえるが、
どうしてコンパス？

サービスデザインは答えのない霧の中を歩いていくようなもの。
答えさえもわからない。どうやっていったらいいのか？
霧の中の状態なので、1メートル先しか見えない。
なんとなく見えた感じしかしない。
行きたい場所しか分からない。コンパスの方が有効。

建物の位置がわからないと、地図は使えない。
晴れ渡った状態しか地図は使えない。
霧の状態なら、コンパスの方が、先が見えなくても、行きたい方向を確認し、
時間はかかるけど、結局はコンパスの方が速いと思っている。

ロールケーキ社で使っていたコンパスは、

●ユーザーゴール
●行動
●動機

この３つを見るようにしている。

●ユーザーゴール
サービスを通してユーザーが達成すること
無意識で、言語化されていないが、ゴールを達成することによって良いサービス体験する。
長期的なゴールと中期的なゴール、短期的なゴール、
10個ぐらいのゴール。

親孝行している自分がゴール。

●ユーザーが行動する理由
ユーザーゴールは無意識的なので、それを伝えなくてはいけない。

●実際のユーザーの行動。
この行動によってゴールを達成できる。
体験が変わると必ず行動が変化するので、
その数値をもとに現在地を確認して、
ゴールや動機付けにフィードバックする。

行動については、AARRR の指標。
僕らも実際に使っていて、特有の KPIを設定して、
それを評価することによって、評価しています。

動機：ゴールを感じられるものを伝える = MVPランディングを含む
動機が行動を後押しする
獲得→　登録→　購入→　紹介→　リテンション

ゴール、動機、行動をいつでも確認、軌道修正できるサイクルがコンパス

このコンパスを使って、レターをどうやって作ってきたのか。
2013/10に設立して、最初の申請が 12月、二ヶ月でこぎつけました。
それまでに 4回コンパスを出して確認しました。

ゴールの設計をして、そこからコア体験ができるミニマムなプロダクトを作って、
市場規模を調べていたので、その属性があう、一般の人に、
ランディングページだけを見せて、そこからアプリをダウンロードしてもらう
テストをしました。

1週目：
体験（ゴール）設計を元に要件をしぼる
= MVP（機能もランディングも必要最小限に）
ゴールに関わらないものは徹底的に排除。
60個あがったなかで15個しか採用しなかった。
いるかも？はいらない

コンパスではなく、地図を使っていたら、60 個載せてしまっていたかもしれない。
そういうのは僕らにとって敵だな〜と思って。
あとで必要になったらコンパスを使えばいい。
機能を切る方に舵をきって、気楽に機能を切っていきました。

この時は2通350円でやりました。
結果、購入ゼロ。
相当やばいんじゃないかなーと。
獲得 20%, 登録10% 購入 0% 紹介0%
これが 2週間で分かったのは良かった。結構明るくやっていた。

ダウンロードと登録、この数値をもとにインタビューをかけました。
アンケートは信じていなくて、知りたい時はインタビューしています。
アンケートは YES/NO しかとれないが、
インタビューは、なんでですか？と派生の質問ができて、
本当はどう考えているのか分かるので、重要視しています。

この時のインタビューで分かったことは、
レターを使ってやれることは分かるのだが、どうなるのだかわからない。
写真をつけて、送ることができるのは分かった。
実際に、それを通して、モノが届いて、両親が喜んで両親が飾れて、
貯まっていって、数年後にはどうなるのか全然わからなかった。

2週目：
サービスを通した体験を伝える。
調査のケッkあ「動機付け」のコミュニケーションに問題があることがわかたt.

サービスを通した体験をランディングページでアプリのウォークスルーを。
動画で作る手もあったのですが、
手っ取り早く写真でやりました。
写真の子供は自分の子供、手は妻。

獲得 53%, 登録 25%, 購入5%
サービスとしてはまだまだダメで、
購入にたいするヒアリング、価格などを聞いていった。

受ける体験と、価格にギャップがあるとなったので、
数百人に、PSN 分析があって、実際にヒアリングをして
聞いて、価格を再設定しました。
ウォークスルーの全体の流れ画面を、
てっとり速くわかってもらうためにお試し１通無料にしてみました。

金額調査再設定 1枚250円。お試し1通　無料に。
1通でやりたいことを無料でやってみて？とコミュニケーションを変えました。

獲得53%, 登録30% , 購入は12％、紹介が5%
これぐらいの数字じゃないとリリースできないという数字を持っていましたが、
結構ギャップがありました。
チームの雰囲気が暗くなっきて、
「撤退？」という空気も流れた時期でした。

もういっかい購入についてインタビューして分かってきたことは、
全体はできるのですが、いいものを送っている感じがしない。
本物なの？実はデジタルサービスなんじゃないの？という疑問。
待ち受け画像のこと？
全然伝わっていないんだな〜というのがわかって。

4週目：
実物のイメージを伝える
デジタルコンテンツではないことを伝えました。
最初の MVPで作っていたのはなんかペラペラ。
リアルでないでしょ。と。
だったら、実際のモノに近づけて、質感も近づけようと、UIも変えてきました。
パースもつけて、光も調整して、作っている感じを出していきました。

積み重ねもあるのですが、
購入 40%, 紹介12%, リテンション 70%
月に一回なので、リテンションをくわしく見れない。
毎回違うテスターなのですが、これぐらいの数値がでた感じ。

ようやくここでくらい雰囲気から抜けて、これならいけるかも？
今現在にいたる。
ちゃんとしたリリース版、60あった要件が今でも20くらいしか載っていないで、
今リリースして、リテンションを強く意識して、
コンパスを出しながらやっている状態です。

地図を作るのではなく、無いときに作ってしまうのではなく、
小さく進んで 1メートル進んではコンパスで確認しつつ、
使っている人にマッチするかを調べてプロダクトを作っています。

唯一解とは思っていなくて、
あっているかどうか分かっている人も居て。ジョブズとか。
エンジニアとやる時にも、このコンパス自体を共有していて、
うまくいかない時は、エンジニアが勝手な思いを載せて失敗したりするので
コンパスに巻き込んで、皆で考えながらブレストして、
みんなで、行動の評価で、ゴールを変えることは無かった。
ゴールを作る時に、ずれを見つけることは無かった。
動機付け、コミュニケーションのずれが見つかった例。

最後に：
これが唯一の解ではないと思っていて、
どっちかというとこの方法はスタートアップにあっていて、
会社の文化とか、サービスの性質よってもあっているものがあって、
これじゃないといけなという解は無くって、
自分たちにあっているものを探していければいいんじゃないかなと。
方法を改善しながら、プロダクトも改善していってます。

参考：
About Face 3
リーンスタートアップ
リーン指向によるユザーエクスペリエンス
ユーザビリティエンジニアリング

これらを合わせてやっています。


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
■開発スタイルの変遷　リブセンス　島田氏

サッカーが好きな島田です。
僕の方からは、開発全体の話しを、転職会議というサービスを通してご紹介します。
小さい SIer を経てリブセンス、2013年転職会議のリーダーにアサインされています。

はじめに
転職会議の変遷

転職会議を利用したことがあるひと？ 2〜3人
企業の口コミがサービスです。
どういったコンセプトのものこのサービスをやっているのかというと、
企業と求職者の情報の非対称性を解決。
口コミを集めることで、ミスマッチを無くしたいということを考えています。

月刊 UU 4,000,000
転職会議というユーザー体験を求めてユーザーがやってきて、
口コミが集まると、人材会社がやってきて、スカウトしたりと、
また口コミが集まることで、ユニークなコンテンツとなることで SEO となる。

●開発の変遷について
フェーズ１
ディレクター 1人、デザイナー１人、エンジニア１人
ディレクターの企画をデザインし、エンジニアが実装するという
ウォータフォール的な
「来た球を打つ、ボール球でも打つ」
最初はアウトソーシングされたもので、内製化しようといくことで、
リニューアルしようという方向になりました。
そのプロジェクトの優先順位、

1. デザインとロゴの刷新
2. 各機能追加
3. 非公開クチコミ
4. コンテンツ充実
5. 会員機能

非公開口コミ機能。およそ半年間まってくださいというお願いをしていたのですが、
いろんなユーザーの声をちょうだいし、
ユーザーの意見を反映して、二週間あまりで会員機能をリリース

沢山の機能を増やしていったのですが、
タスクの全部が優先度「高」
何が重要かわからない、ゴールが不明。
手戻りが発生してきた。
そこで考えた解決策がミーティング。
定位のミーティングをしてませんでした。スピード重視。
それぞれの立場でどう考えていてビジョンを共有する。

●フェーズ２
順調にサービスも成長していって、ユーザー数も増えていきました。
その時のメンバーがディレクター２人、デザイナー１人、エンジニア２人
サービスのワークフローを最適化、
それぞれの役割の中で、それぞれの貢献をしてもらおうと。

●フェーズ３
ディレクター２人、デザイナー２人、エンジニア８人
さらにメンバーが増え、やり方をかえていこうと。
複数のプロジェクトを同時進行。
そのためにプロジェクトごとにチームを編成。
優先度でリソースの配分を考えていった。
これはこれでうまくいったチームもあったんですが、
問題が発生し、例えば優先順位が変わった場合、
見えない優先度と他プロジェクト

どのチームに属するのかわからない、守備範囲がわからない状況。
野球のようにポジションを固定しない。
メンバー全体がチームの状況を補完できる、サッカーのように有機的に動けるチーム
こういったモデルが良いのではないか？と。

●そして現在
ビジョンの共有
月次定例、朝会の実施。
ホワイトボードを利用してタスク管理。

バックログミーティング、優先順儀を決めるミーティング
イテレーションミーティング、2週間で分けられる範囲で。施策を振り返る。

会員登録ページのスマートフォン化、
PCしかなかったものをスマートフォン最適化されたページを作るという要件。
タスクを作っていき、優先度やスケジュールを作っていく。
ツールとして Confluence を使っている。
デザインが必要なものはワイヤーフレームやデザイン、実装、随時リリース。
HipChat で、共有。
HipChat で施策な効果や、フィードバックも hipchat で、
ダッシュボードで数値の方も検証している。

●まとめ
1. リズムとルール：
小さな決断と勝利を繰り返し、リズムをつくり、
モチベーションを持続させる。
いくつかの明確なルールを設定。

2. フラットな関係
自分を知ってもらい、相手を知る。褒める分か。
なんでも言えるフラットな関係。

3. デメリット箇所でなく、メリットの追求
上手く行かないと「目に見えないメリット」よりも
「目に見えないデメリット」の方に関心が集中してしまう。

マイナスをゼロではなく、ゼロをプラスに。

●最後に

共通の目的と達成すべきゴールの共有をし、
チームに対してどんな役割と責任を果たすか、共通の認識をもつ事が重要


-------------------------------------------------------------------------------
■エンジニアとデザイナのコラボレーションで変わったプロダクト開発　リブセンス 植村氏

ディレクターのチケットの優先度設定「高」「高」「高」の操作が慣れていたのを覚えています。
スケードボードが趣味で。vans の靴が好きで、出版系の会社がキャリアの始めで、
電子書籍？というところからプログラムを始めて、現在。

連携していてやっていく一部を事例で紹介。
●事例：ユーザーログインと通知機能の紹介
事例背景／実装前／実装からリリースまで／リリース後／まとめ

●背景
求人ページへの誘導をもっとスムースに行えるのではないか？
転職会議に求人ページがあるのをご存知でした？
求人ページは認知されておらず、
ジョブサーチ、スカウトメール、転職コンシェルジェ、
あらゆる求人が検索できる「ジョブサーチ」日々精進しています。

ここをどう盛り上げていくか？
なんとか盛り上げて行きたいという思いから、
この事例をやってみたいとなりました。

ログイン時に未読のスカウトメールがあった場合、モーダル画面が出るのですが、
スカウトの未読メールの通知において一定の効果がみられたので、
スカウトメールと求人情報メールと、二つの通知を表示するということに。

●実装前
大事にしたいところ。
共通の思いで、持っていきたいところは、
まず何をやるのか、何を目指したいのか？誘導を目指したいのか？
懸念事項は、もともとのスカウトメールが減ること。

デザインスタジオ
皆で何を形作るのか？UIは？必要な項目は揃っているのか？
という会議を開き、ここに男が５人居て、
皆が一同にかいして UIに関して
それぞれ意見を出し合う、
UIデザイナーがファシリテーターとなり場をつくる
非デザイナーも率先してアイデアを出す

今までデザインスタジオを始める前は、
エンジニアは実装を優先し、やっていたのですが、
プロダクトのプロトタイプのようなものから話しをする場所を
設けられたことによって、UIの提案、新しい意見を出してくれるようになった。
ある程度形にまとまり、みんなの意見が一致したことによって、
前段階の作業は終了です。
実装前に必要なことは、認識のぶれを無くしていこう。ということ。
何を達成したいのか？チームのメンバー全員で意思疎通をはかり、
最適なひな形をここで作ります。

それが出来た段階で次の章、

●実装リリース
なにをするのか、何を準備したら良いのかだいたいわかっているので、
今までは、ディレクターが発案して、デザイナーが描いて、
HTMLエンジニアが書いて、デプロイして、やっと完成。
皆やることがわかっているので、作業スピードの圧縮ができました。
密接に、同時進行、実装上の迷いを話すことが多くなったので、
歩いて話しにいかないと駄目だったのに、席を近くにするようになりました。
活発なコミュニケーションが生まれました。

デザイナーとフロントエンドエンジニア
●作る前の会話とか増えた
●口頭で数値変更とか
●デザイナーから padding がどうとかすぐ言い合える
●デザインのリファクタリングがスムーズ
●仕上がりイメージの共有
●与太話

サーバーサイドエンジニアの手があいたら
JavaScript の実装を手伝ってもらえる距離感
●リアルタイムでやっていることがわかる
●詰まったらペアプログラミング
●考え方の共有、コンテキストの理解

いい勉強できるし、考え方の共有ができるし、
CSSの設計の共有、コンテキストの理解が生まれるようになりました。
同時進行で進めることによって

フィードバック共有
使い勝手のよいインタフェースを提供するためのアイデアが生まれ、
再度デザイン、実装の開始
よりよいものへの進化

デザイナー同士でデザインのチェックを同時進行でおこなっている。
フィードバック共有会で生まれた新しい方法は、
アイコンを動かした方が良いのではないか？という指摘で、
ぜひやろうということになり、実装しました。

リリース前までに大事なことは、
同時に一つのものを作ることに集中。
砂場で皆で砂のお城を作っているような状態。

●リリース後
撤退：効果があがらなかったり、撤退基準を満たしていない場合は撤退？
効果測定：求人一覧PV、リリース前を100% とすると、194% 増加しました。ほぼ2倍。
懸念していたスカウトへの誘導も微増。
さらに直帰率にも影響なし！！

このような結果をもたらすことができたので、前進させよう。
リリース後の計測。作りっぱなしで終わらせず、ユーザーのフィードバックをもとに先に進む

●まとめ
●作戦会議は全員参加！認識のぶれをなくす
●同時に一つのものを作る事に集中！！
●リリース後の計測　→作りっぱなしで終わらない

このまま続けていけば.....
このやり方はいいことばかりじゃないんだぜ？

議論に費やす時間が増える
みな同じ場所で同じ意見になるまで話すので。
何を達成したいのか？どういうプロダクトを待っているのか？

課題もたくさんある
サーバーサイドのエンジニアが7人いて、
フロントエンドが1人しかいない。
イテレーションの開始時に1人しかいなくて、
採用を進めているが、なかなか人がまわってこない。
どうにか自分たちでするしかない。
全員のメンバーに対して HTML勉強会、フロントエンドに興味のある人まで、
そういうことで、自分がボトルネックになっていることを解決していこうかと。

無駄はなくなってきている。
実装中のリレー形式ではなく、同時に皆がやるので、
継続することで、やる意味の無いことがなくなってきている。
KPI指標の会議もやっているので、意味があること。

プロダクトへのコミットの意識
請負っぽくなっている時期もあって、
どんどんチームへのコミット、このプロダクト、このUIが
使いやすいものなのか？　を、深く意識するようになった。

●僕らが目指す姿
チーム全体で、一丸となって点を取りにいきたい。
一人でいくのではなく、パスをまわしたり、フェイントかけたりするのだけど.....
目黒の飲み屋で、お酒飲んだりして、振り返りをしています。
次のイテレーションに備えます。そういう風にチームは変わっていこうとしています。