『こういうのを試してみたい。』を実現させていった時の話
こんにちは、クックパッドのデザイナーの上野です。入社して1年4ヶ月経ちました。
クックパッドの料理を楽しみにするモノのつくり手と料理のつくり手が集うプラットフォーム「Komerco（コメルコ）」でデザイナーとして、事業をつくっています。
今回は、Komercoチームでの改善施策の時の話しを少ししたいと思います。
目次
1.『こういうのを試してみたいんだよね。』 施策、爆誕。それは突然に。
2.ひとりで思考を整理。UIパターンができたら開発工数を鑑みて、「最終UIを決定するぞー。」
3.実現性を考える。「UIは単純だがロジック設計が難しいんです。」
4.ユーザビリティテストを他部署のメンバーに頼む。「ご協力をお願いします🙏」
5.社内ユーザビリティテストの結果から「UIと実装をチューニングする。」
6.リリース。そして検証結果。
最後に
『こういうのを試してみたいんだよね。』施策、爆誕。それは突然に。
デジタルプロダクトの改善をしている人たちなら一度は経験があるとは思います。事業責任者（ここは上長でもいい）から「これ試してみたいんだよね」オファーがやってくる経験。
試したい👇：
画像メインのKomerco(コメルコ)の世界観を伝えるHomeにしたい。
しかもかなり具体的なワイヤーとセットで説明されたこと、どうでしょう？そんな時は、ワイヤーがあるからあとはキレイに清書するだけとはいきません。実はここからが本番だったりします。
デジタルプロダクトである以上、そこにはエンジニアリングと掛け合わせてリリースまで実現させる為に、デザイナーはやらなくてはいけないことがあります。今回の進め方を例に、仮説検証の結果までを書いていこうと思います。
ひとりで思考を整理。UIパターンができたら開発工数を鑑みて、「最終UIを決定するぞー。」
デザイナー（たぶんエンジニアも）は、準備7割実行3割。まず私は、リサーチや自分の頭の中を一度咀嚼して、可視化していくという作業から入ります。あとはそもそも今回の改善から達成したいことを見失わないように近くにメモを残しておきます。githubのissueに書くものいいですが、とにかく気づくと目に入る場所がオススメです。私はFigmeをノート代わりに使います。
議論の為のタタキ（ワイヤー）を準備する時、いつもだいたい下記のパターンになります。
1.ユーザーにとって良さそうと思う案（理想案）
2.ユーザーにとって良さそうと思う案（理想案）の工数負荷が重すぎた場合の予備案
3.キックオフで話していた案
リリースまでの時間は、仮説検証をより早く試すために、より短くできることに越したことはありません。
最適で、最高なのは、ユーザーにとって良さそうと思う案（理想案）で且つ実装工数が掛からない（軽い）仕様に落とし込める事。
今回はユーザー体験の毀損を重要視し、工数の増減が許容範囲だったため、ユーザーにとって良さそうと思う案（理想案）で行うことになりました。この判断はエンジニアの協力と理解納得が無いと絶対にできません。ヤマトさん、深く感謝です（ディープありがとう）。
今回のように、「試したい改善」の場合、どの数字をみるのか？が後で決まりますが、基本数字目標は上期下期で決めたチーム数字目標に従うので問題なしです。
見る数字：
・Homeからの第二階層への回遊率（興味を惹きつけられるか）
・24時間以内カート率（興味が欲しいという気持ちに変わったか）
・24時間以内購入率（買いたいまで気持ちが育ったか）
ターゲット：
・新Home UIと旧HomeでA/Bテスト（50%/50%）
・新規/既存
期間：
検証期間はリリース後の一ヶ月間。検証ができる数字が集まらない場合は期間延長してデータを収集する。振り返る。
以降はエンジニアとデザイナーだけで進めることになります。小さな新規事業のチームなので、エンジニアとデザイナーでUIと仕様を決めていき、「こうやろうと思います」という報告というカタチで進行していきます。
実現性を考える。
「UIはロジックとセットではじめて成立するんです。」
ここからは、エンジニアとの協業なくしてできません。もちろんデザイナーも実際のデータを組み込んだときに起こり得る、『可能性』を予測しながらUIを考えていきます。
・商品画像のサイズはコントロールできない。縦長や正方形が交じる。
・縦長の商品画像が選ばれた場合どうなるか？
・縦長の商品画像が選ばれた場合に、どうやって長さを合わせるか。
・表示速度は問題なさそうか。
・その上で、ランダムに見せたい。
・そのほうがワクワクする。楽しいよね。
・出会えた感、どう出そうか？？なかなか難しそう。
・でもいい感じにしたいよね。ですね。
エンジニアと相談しながら、表示ロジックと更新性のロジックも相談して決めつつ、やりたいことと、できそうなことの距離を埋める作業をしていきます。ホワイトボードの前に立ち書いていきながら決めていきます。
ユーザビリティテストを他部署のメンバーに頼む。
「ご協力をお願いします🙏」
社内メンバーで行う理由は、やはりリクルーティングのコストとマッチングミスを防ぎやすいから。そして早い！協力してくれてたCookpad社内メンバーの方々、ありがとうございました。快くOKしてくださり感謝です。
ユーザビリティテストの設計とインタビューは上野が行いました。テストをしながら軽いインタビューも一緒にします。
インタビューの流れを書き出して、施策メンバー間の認識を合せるためインタビューの段取りとゴールを定めます。
・テストの目的
・準備含めて1名30分
・今回のテストでやらない事を決める
・仮説を立てる
・Komercoを使ってくれている人と使っていない人を混ぜる
・テスト手順と項目
・質問したいことがあったらSlackで飛ばし聞く
・チームメンバーは裏でポストイットを書いていく
・すぐに振り返る。仕様やUIをチューニングする
私は時間配分とインタビューの内容は、メモ書き程度で状況に応じて上下させて行います。あとはプロトタイプを作成し実施です。
インタビューを学んだときの先生だった奥泉さん。この本が、わかりやすくて試しやすいです。新しいものが出たのでこちらを。
社内ユーザビリティテストの結果から
「UIと実装をチューニングする。」
テスト結果
ラベルやアイコンが付いている商品には目が行く。
逆にラベルやアイコン付いていないとスルーしがち
新商品は気になる。
再入荷はお墨付きのような信頼感がある。
値段が付いていなくても商品だろうと思った、その先は詳細情報なのだとなんとなく予想できる。
スクロールのタブメニューには気づくし、操作も分かる。ただし滞在時間はHome画面
テスト後に調整した項目
ラベルやアイコンをすべてに付ける。
表示する情報の割合を変える。
WebのUIは旧UIなので使い比べて見るのも楽しいと思います。
本番データを入れたときにも、プロトタイプとの差ができなように画像選定も本番に起きそうな状況と条件で画像を選定してました。リリース後「あれ？」というガッカリ感が起きないように気をつけていたので、特に問題なしでした。
リリース後にパンカテゴリーも追加になり、結果とても楽しいHomeになりました。画像が大きくなりHomeに出てくる商品数の情報量は減りましたが、情緒価値を高めてる情報は増えて、新商品が追加された時のワクワク感、再入荷があったとき高まる期待感、意外な商品との出会えている感は多くなったと感じています。またデータを見ていても継続率も高くなってきている手応えもあります。
リリース。そして検証結果。
数字はエンジニアのヤマトさんが出してくれました。
1）Homeからの第二階層への回遊率 旧Home UI🎉※
2）24時間以内購入率 引き分け
3）24時間以内カート率 新Home UI 2倍 🎉
※ただし、スクロールメニューも含めると、ほぼ変化なく引き分けでした。
新規顧客のデータしか取れていません。既存顧客の数字は引き続き見ていくことにしました。
最後に
ユーザビリティテストの際に同時にしたインタビューででてきたあるキーワード。全インビュイーから出てきたそのキーワードはチームメンバー全員どうにか変えなくてはいけないと思っていてできていない課題。
その課題を打破することになるかもしれない施策を企画して実施まで行ったときのことも書こうかなと思います。
そんなKomercoでは事業をつくっていくことが好きなデザイナーを大募集しています！
それでは〜👋
この記事が気に入ったらサポートをしてみませんか？