Redesign study:食べチョク
UX UIデザイン

内容:自主制作

担当:リサーチ/要件定義/UI作成

期間:1週間

 

1.概要

 

1-1.食べチョクについて

食べチョクは、生産者と消費者がお互いの繋がりを感じながら、新鮮で安心安全な商品を直接 販売・購入できる魅力的な産直ECです。 Webサイトとアプリが両方ありますが、本制作物はiOSアプリに着目しています。

 

1-2.リデザインの背景

私の母(50代)がスマホでよく買い物するのですが、iOSアプリの食べチョクの操作で所々つまづいていました。その様子を見て「素敵な体験を提供するサービスなので、より快適に使えるUIにリデザインできたら、私の母含めた幅広い世代の主婦層に使ってもらえるだろうな」と思ったのがキッカケです。
(私も実際に野菜と果物を購入し、美味しさに感動しました)

 

○補足
2022年1月時点の制作物です。

 

1-3.制作物

制作フローは後述に続きますが、まず完成品はこちらです。

 

※先に作業全体をチェックされたい方はこちらからご覧ください

 

Figma全体をみる

 

 

プロトタイプをさわる

 

ダブルダイヤモンドモデル (発散&収束の繰り返し) に沿う形で改善アイデアを検証しました。最後まで読んでいただけたら幸いです。

 

2.事業リサーチ

 

2-1.達成したいビジョン

解決すべき課題は、サービスが目指しているゴールと現状デザインに潜んでいるミスマッチからヒントが得られると考え、まず食べチョクが達成したいビジョンを確認しました。

「生産者ファースト」を掲げ、高齢の農家さん向けに生産者側の機能改善も重点的に取り組まれているようです。今回は私の母を起点としているため、消費者側の課題解決を目的とします。

 

2-2.KPIとグロース戦略

サービスをバージョンアップする際、限られた工数の中で優先順位が高い課題から着手すると思います。
本制作物でも企業視点で課題〜解決案を生み出せるよう、KPIとグロース戦略を確認しました。

KPIは生産者ファーストを掲げられている食べチョクらしさを感じます。
グロース戦略は、以下に注力されているようです。
・需給のバランスを調整するため、企画やキャンペーン展開
・生産者と消費者のマッチングを深めるため、コンシェルジュやフルーツセレクトのサービス展開

 

やみくもにKPI達成を目指すのではなく、あたたかみのあるサービスブランドを軸にしてリデザインの導線を考えます。

 

2-3.ユーザー層・ペルソナ

ユーザーの行動フローを考えるため、AppStoreやサービス紹介記事からユーザー層を確認します。

 

コアユーザーの視点を取り入れるため、食べチョクのマーケティング分析記事や母の意見を元にライトペルソナを考えます。

食べチョクが掲げるコンセプト「食材を農家漁師から直接買う生活を当たり前にする」に沿って、「スーパーで食材購入するのが当たり前だった主婦が、食べチョクが提供する体験に満足して利用定着していく」ストーリーから課題を考えます。

 

3.課題定義

3-1.ユーザーの行動フローと感情仮説

実際にアプリの操作と買い物をしながら「認知→興味→利用→継続」に対して「操作フロー/画面(UI)/ユーザーにしてほしい行動/UIで工夫されてるポイント/ユーザーの感情」を洗い出します。

詳細をみる

 

分析目的は2点です。
・各機能の役割を理解すること
ユーザーにしてほしい行動とユーザーの感情の不一致から課題のヒントを得ること

極力ペルソナの感情に憑依し、つまづきポイントの仮説を立てました。

  1. 検索画面は文字が多く、直感的に条件が理解しづらい
  2. 検索結果で絞り込み機能がないので、商品選びが手間に感じて購買意欲が下がる
  3. 投稿機能-フォロー機能画面で、情報が少なく「この生産者をフォローしたい」と感じづらい。ブランドコンセプトの「生産者と消費者が直接やりとりできる」をよりプッシュできる余地がある

 

3-2.ユーザビリティテスト

仮説検証のため、ペルソナに近い2名にご協力いただきました。

○方法 :オフライン

○ご協力いただいた方 :40代女性と50代女性の2名(食べチョク初利用)

○主な質問

1.実際に買い物するとして、具体的に欲しいものはありますか?(購入目的の確認)
2.ホーム画面から欲しいものを探し、購入直前まで進めてください。
操作する際に感じたこと、なぜそこをタップしたのか?など、都度言葉に出して教えてください。
※商品が届いた後の操作や感情は、想像で答えていただきました。


○ヒアリング内容を整理
前述の行動フロー図に2名の意見を追加します。ユーザーにしてほしい行動と実際の操作が不一致だった部分(グレーのメモ)が、仮説で出した検索機能と投稿機能に集中しました。

 

○商品を探す初動パターン
私も含めて3名とも購入目的が異なり、それぞれお目当ての商品を探す初動パターンがバラバラでした。

全員一致したのは
・「絞り込み検索」の利用
・「結果一覧で並び替え機能が欲しい」という意見
です。

 

3-3.課題確定

現状からゴールまでの道筋に潜む課題が2つ見えてきました。

優先的に取り組むべき課題はどちらか?
達成したいビジョンとKPI(生産者一人あたりの売上)を基準に、検索機能をリデザインすることに決めました。

ユーザーが快適に商品購入できるよう、検索画面の絞り込み条件の改善 検索結果に並び替え機能追加を解決案として進めます。

 

4.UIデザイン

4-1.参考ECアプリをリサーチ

ヒアリングのつまづきポイントを中心に参考ECアプリをリサーチしました。

視野を広げるため、参考要素をチェックしつつ、食べチョクが達成したいビジョンに向かうUIを考えていきます。

 

4-2.ペーパープロトタイプ

プロトタイプを組む前に、まずは考えられるパターンを描き出します。

 

4-3.パターン出し

ペーパープロトタイプを元にパターンを出し、母にヒアリングしながら最善案を考えます。

 

5.UI確定と仮設検証

 

以下、冒頭と同じプロトタイプです。

プロトタイプをさわる

 

「3-2.ユーザビリティテスト」で協力いただいた2名に改めてオフラインでテストを依頼しました。
以下はリデザイン内容とテスト結果です。
※Webサイト版で先行リリースされてる機能もあったため、Webサイトのキャプチャも記載します。

 

検索フォーム配置

○リデザイン
利用頻度の高い検索機能を見つけやすくするため、検索フォームを配置

 

○テスト結果
2/2名が迷いなく検索フォームをタップ

 

検索画面-絞り込み条件の変更

○リデザイン

#全体
・ユーザー層の可読性を考慮し、フォントサイズを大きくした
・直感的に理解しやすいよう条件をグルーピングしてラベル行を追加。今後の条件追加を考慮し、汎用性高く「その他の条件」など広義に分けた
・メインの検索条件が目立つようにボーダーの色を薄くした

 

#各所
①ヒアリングでも要望があった「価格」「送料無料」を追加(アプリにはないが、Webサイトはリリース済)
②直感的に理解しやすいよう「未設定」から「指定なし」に文言変更
「>」矢印の色も条件未選択であればグレーに変更
③売り切れ商品はデフォルトで省いて閲覧負荷を下げるため、「売り切れを除く」から「売り切れを含む」に変更
④検索結果画面の判断・操作負荷を下げるため、表示件数を追加
⑤各検索条件の下層ページが「決定」ボタンなので、役割を分けるため「検索」ボタンに文言変更

 

○テスト結果
2/2名が迷いなく「価格」をタップ
※表示件数に関するコメントがあったので、後に再検討します。

 

価格選択

○リデザイン
Webサイトはバルーン型ポップアップだが、上限と下限を認知しやすいよう同時に選択できるドラムロールを採用

 

○ヒアリング
2/2名が「リデザインの方がわかりやすい」とコメント
「同時に考えられるのと”以上”と”以下”の文言があるから理解しやすい」とのこと

 

絞り込み条件の選定

食べチョクのコンセプトと一致する項目のみ反映しました。

 

検索結果画面に並び替え機能を追加

○リデザイン

商品マッチング率の向上、商品選びに負担を感じることによる離脱防止のため、並び替え機能を追加
・おすすめ順
・新着順
・価格が安い順
・価格が高い順
・SOS順

 

○テスト結果

1/2名が迷いなく「おすすめ順(並び替えボタン)」をタップ

 

並び替え項目の選定

 

テスト結果まとめ

2/2名から
「全体的に検索機能が便利になった」
「並び替えでSOS順があると、より生産者さんを応援したくなる」
とコメントをいただきました。

 

貴重な指摘をいただいたので、次項で再検討します。

 

6.テスト結果からUI再検討

 

指摘1:検索画面の表示件数

「商品/生産者」は記載せず、純粋に合計件数を検索ボタンに表記するパターンを考えました。(検索条件が豊富なので、利便性を考えリセットボタンは排除しない方向で考えました。)
ただし、このUIだと件数を認知する前にボタンをタップされる可能性も考えられます。実務であれば より多くの方に意見を伺い、検討したいと考えます。

 

指摘2:並び替え機能の配置

指摘してくださった方から「右案は絞り込み条件が見つけやすくなった」と意見をいただきました。
もう1名と私の母は「左案の方が見つけやすい」とのことだったので、こちらもより多くの意見を伺いたいと感じました。

 

7.まとめ

○学び
ヒアリングの要望や、競合サービスの機能をただ盛り込むのではなく、事業の方向性に沿ったデザインを提供することで、サービスのボイス&トーンに信頼性・魅力が増し、共感してくれるユーザーが増えるのではないか?と感じました。
今後もサービスコンセプトに沿って「誰に何を届けるためのデザインなのか?」を考え、事業貢献できるデザイナーを目指します。

 

○お礼
素敵な体験を届けてくださる食べチョクの運営の方々、生産者の方々、ヒアリングに協力いただいた方に感謝いたします!
最後まで読んでいただき、ありがとうございました。