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