直感的で使いやすいサブスクリプション体験を通じて、ユーザーの信頼とブランドの独自性を築く

直感的で使いやすいサブスクリプション体験を通じて、ユーザーの信頼とブランドの独自性を築く

Wa! Organic(和!オーガニック)は、日本発・海外向けの月額制オーガニック定期便サービスです。ユーザーは、最初に簡単なパーソナルクイズに答えることで、自分に最適なボックスの提案を受けられます。体験全体はシンプルでスムーズに設計されており、地元農家のストーリーを通じて信頼感を育みながら、日本のオーガニック製品の価値をより多くの人々に届けることを目指しています。

Wa! Organic(和!オーガニック)は、日本発・海外向けの月額制オーガニック定期便サービスです。ユーザーは、最初に簡単なパーソナルクイズに答えることで、自分に最適なボックスの提案を受けられます。体験全体はシンプルでスムーズに設計されており、地元農家のストーリーを通じて信頼感を育みながら、日本のオーガニック製品の価値をより多くの人々に届けることを目指しています。

担当

担当

リサーチャー、UI/UXデザイナー

リサーチャー、UI/UXデザイナー

プロダクト

プロダクト

モバイルウェブサイト

モバイルウェブサイト

期間

期間

6 週間

6 週間

Goals

Goals

  1. ブランドの差別化

  2. 商品のストーリーテリング

  3. シームレスなショッピング体験

  1. ブランドの差別化

  2. 商品のストーリーテリング

  3. シームレスなショッピング体験

Research

Problem

  1. 市場での差別化不足
    既に多くの「日本」をテーマにしたサブスクリプションボックスが存在する中で、ブランドのポジショニングと独自の価値を明確に打ち出すことが大きな課題となっている。


  1. ブランド価値を「信頼」に変えるには
    生産者のストーリーをどのように伝えれば、ユーザーの信頼を築き、行動を促すことができるのか?


  1. 判断疲れを軽減し、行動を導くには
    ユーザーが自分のペースで探索できる自由さを保ちつつ、スムーズに購買完了まで導くための最適なナビゲーションとは?

  1. 市場での差別化不足
    既に多くの「日本」をテーマにしたサブスクリプションボックスが存在する中で、ブランドのポジショニングと独自の価値を明確に打ち出すことが大きな課題となっている。


  1. ブランド価値を「信頼」に変えるには
    生産者のストーリーをどのように伝えれば、ユーザーの信頼を築き、行動を促すことができるのか?


  1. 判断疲れを軽減し、行動を導くには
    ユーザーが自分のペースで探索できる自由さを保ちつつ、スムーズに購買完了まで導くための最適なナビゲーションとは?

Solution

  1. パーソナライズクイズ
    競合分析を通じて、改善機会を発見


  1. ストーリーテリング:
    A/Bテストにより、最適な伝え方を検証


  1. シームレスな体験:
    アフィニティダイアグラムでユーザー行動の傾向と流れを可視化

  1. パーソナライズクイズ
    競合分析を通じて、改善機会を発見


  1. ストーリーテリング:
    A/Bテストにより、最適な伝え方を検証


  1. シームレスな体験:
    アフィニティダイアグラムでユーザー行動の傾向と流れを可視化

Research

Research

Solution 1

カスタマイズクイズ

カスタマイズクイズ

競合分析を通じて、改善機会を発見

競合分析を通じて、改善機会を発見

・競合分析

・競合分析

日本の主要なサブスクリプションボックスブランド3社を比較した結果、パーソナライズされたインタラクションが体験の中に組み込まれていないことに気付きました。


そこで、ユーザーがより主体的に関われるように、Webサイトの導入部分にパーソナライズクイズを導入しました。これにより、ユーザーのエンゲージメントを高めるとともに、ブランドとしての独自性を演出する体験を設計しています。

日本の主要なサブスクリプションボックスブランド3社を比較した結果、パーソナライズされたインタラクションが体験の中に組み込まれていないことに気付きました。


そこで、ユーザーがより主体的に関われるように、Webサイトの導入部分にパーソナライズクイズを導入しました。これにより、ユーザーのエンゲージメントを高めるとともに、ブランドとしての独自性を演出する体験を設計しています。

第1ラウンドのユーザーテスト結果

第1ラウンドのユーザーテスト結果

選択したら、「次へ」を押さなくてもそのまま次のページに進めるといいな。

選択したら、「次へ」を押さなくてもそのまま次のページに進めるといいな。

中身がわからないとちょっと不安なので、選ぶ前に内容が見られると安心です。

中身がわからないとちょっと不安なので、選ぶ前に内容が見られると安心です。

クリック数を減らし、より直感的に:
ユーザーの声をもとにしたデザイン改善

Less Clicking, More Clarity: Design Improvements Based on User Input

クリック数を減らし、より直感的に:ユーザーの声をもとにしたデザイン改善

Solution #1

Solution #1

ユーザーが選択肢を選ぶたびに「次へ」を押す必要がないように設計を見直し、操作のスムーズさと集中力の維持を両立する体験を目指しました。

ユーザーが選択肢を選ぶたびに「次へ」を押す必要がないように設計を見直し、操作のスムーズさと集中力の維持を両立する体験を目指しました。

Solution #2

Solution #2

結果にすぐ共感できるよう、「For those who…(〜な方におすすめ)」という短い一文を追加しました。

また、ボックスやその説明をクリックすると、詳細情報が確認できるようになっています。

結果にすぐ共感できるよう、「For those who…(〜な方におすすめ)」という短い一文を追加しました。


また、ボックスやその説明をクリックすると、詳細情報が確認できるようになっています。

Solution 2

ストーリーテリング

ストーリーテリング

A/Bテストにより、最適な伝え方を検証

A/Bテストにより、最適な伝え方を検証

Approach 1

Approach 1

ボックス一覧ページに生産者のひとことメッセージを表示

ボックス一覧ページに生産者のひとことメッセージを表示

ボックス一覧ページに生産者のひとことメッセージを表示

各商品の背景にある生産者の声を短いメッセージとして掲載することで、商品にパーソナルな魅力を加え、ユーザーが生産者とのつながりを感じやすくなります。

各商品の背景にある生産者の声を短いメッセージとして掲載することで、商品にパーソナルな魅力を加え、ユーザーが生産者とのつながりを感じやすくなります。

ボックスの下にあるブランド紹介があまり目立たないし、スクロールする意味やメリットがよくわかりませんでした。

ボックスの下にあるブランド紹介があまり目立たないし、スクロールする意味やメリットがよくわかりませんでした。

ユーザーからのフィードバックを受けて、商品概要の後に関連セクションを追加しましたが、効果は限定的でした。


そこで、最適なコンテンツを見極めるために2つのバージョンを提案し、A/Bテストによって検証を行いました。

ユーザーからのフィードバックを受けて、商品概要の後に関連セクションを追加しましたが、効果は限定的でした。


そこで、最適なコンテンツを見極めるために2つのバージョンを提案し、A/Bテストによって検証を行いました。

Version A

スクロールしていくと、ずっとボックスのビジュアルばかりで、ちょっと単調に感じました。

スクロールしていくと、ずっとボックスのビジュアルばかりで、ちょっと単調に感じました。

作り手の言葉

作り手の言葉

ビジュアルの繰り返し感

ビジュアルの繰り返し感

Version B

Theme slogans and visual imagery to evoke emotional connection and strengthen brand identity.

テーマスローガンとビジュアル表現で、感情的なつながりを生み出し、ブランドアイデンティティを強化。

テーマスローガンとビジュアル表現で、感情的なつながりを生み出し、ブランドアイデンティティを強化。

Contents-related Visuals

コンテンツに関連したビジュアル

コンテンツに関連したビジュアル

The wording is too vague.

文言が曖昧すぎる

文言が曖昧すぎる

Not much to gain by scrolling further.

スクロールしても得られる情報が少ない

スクロールしても得られる情報が少ない

Version B

テーマスローガンとビジュアル表現で、感情的なつながりを生み出し、ブランドアイデンティティを強化。

コンテンツに関連したビジュアル

文言が曖昧すぎる

スクロールしても得られる情報が少ない

最終バージョン

最終バージョン

作り手の声

作り手の声

信頼構築のため、生産者名・農園名を追加

信頼構築のため、生産者名・農園名を追加

コンテンツに関連したビジュアル

コンテンツに関連したビジュアル

テストバージョンAとBの良い部分を組み合わせたうえで、信頼感を高めるために生産者の名前と農園名のセクションを追加しました。

生産者紹介の記事だけでなく、こうした小さなハイライトが、それぞれの生産者に対するユーザーの記憶を定着させる助けにもなっています

テストバージョンAとBの良い部分を組み合わせたうえで、信頼感を高めるために生産者の名前と農園名のセクションを追加しました。

生産者紹介の記事だけでなく、こうした小さなハイライトが、それぞれの生産者に対するユーザーの記憶を定着させる助けにもなっています

Approach 2

生産者ストーリーセクション

生産者ストーリーセクション

各農園の背景にあるストーリーを、深掘りした記事を通じて紹介します。

各農園の背景にあるストーリーを、深掘りした記事を通じて紹介します。

Approach 2

商品の背景にあるストーリーはインタビュー形式で紹介されており、ユーザーと商品のつながりを強めることを目的としています。


各記事の最後には、該当する生産者のアイテムが含まれたボックスへのリンクボタンを設置し、購入意欲を促進しています。

商品の背景にあるストーリーはインタビュー形式で紹介されており、ユーザーと商品のつながりを強めることを目的としています。


各記事の最後には、該当する生産者のアイテムが含まれたボックスへのリンクボタンを設置し、購入意欲を促進しています。

Solution 3

シームレスな体験

シームレスな体験

アフィニティダイアグラムでユーザー行動の傾向と流れを可視化

アフィニティダイアグラムでユーザー行動の傾向と流れを可視化

Approach 1

ユーザーのニーズ整理を通じて、構造とフローを設計。

ユーザーのニーズ整理を通じて、構造とフローを設計。

アフィニティダイアグラムを用いて、ユーザーが探索や購買を検討する際の主要なニーズを抽出しました。

この分析をもとに情報の優先順位を整理し、サイトマップや導線設計に反映させることで、実際のユーザー行動に沿ったレイアウトを構築することができました。

アフィニティダイアグラムを用いて、ユーザーが探索や購買を検討する際の主要なニーズを抽出しました。

この分析をもとに情報の優先順位を整理し、サイトマップや導線設計に反映させることで、実際のユーザー行動に沿ったレイアウトを構築することができました。

Approach 1

Approach 1

Approach 1

Approach 1

ワンページ決済情報

ワンページ決済情報

シンプルなステップで、ストレスのない体験を実現

シンプルなステップで、ストレスのない体験を実現

Approach 2

Approach 2

チェックアウトをより簡単かつスピーディに完了できるように、支払いオプションは展開式のドロップダウンを用いたワンページ構成で設計しました。

これにより、ユーザーの負担を最小限に抑えつつ、スムーズで分かりやすい購入体験を実現しています。

チェックアウトをより簡単かつスピーディに完了できるように、支払いオプションは展開式のドロップダウンを用いたワンページ構成で設計しました。

これにより、ユーザーの負担を最小限に抑えつつ、スムーズで分かりやすい購入体験を実現しています。

Conclusion

最終ユーザーテストと学び

最終ユーザーテストと学び

Conclusion

User Insight #1

User Insight #1

ユーザビリティテスト結果のまとめ

ユーザビリティテスト結果のまとめ

20名以上のユーザーを対象に実施した調査に基づき、以下のような結果が得られました。

20名以上のユーザーを対象に実施した調査に基づき、以下のような結果が得られました。

これらの結果から、改善後のユーザーフローはタスク完了率を高めただけでなく、ユーザーの自信やブランドへの信頼感の向上にも寄与したことがわかります。

インターフェースの分かりやすさやステップごとのガイドが、摩擦を減らし、他者への推奨意欲を高める上で重要な役割を果たしました。

これらの結果から、改善後のユーザーフローはタスク完了率を高めただけでなく、ユーザーの自信やブランドへの信頼感の向上にも寄与したことがわかります。

インターフェースの分かりやすさやステップごとのガイドが、摩擦を減らし、他者への推奨意欲を高める上で重要な役割を果たしました。

User Insight #2

User Insight #2

ユーザビリティ全体の評価

ユーザビリティ全体の評価

ビジュアルデザインがとても好きです。操作の流れもとてもスムーズでした。

ビジュアルデザインがとても好きです。操作の流れもとてもスムーズでした。

ビジュアルデザインがとても好きです。操作の流れもとてもスムーズでした。

説明がとてもわかりやすかったです。

説明がとてもわかりやすかったです。

説明がとてもわかりやすかったです。

アニメーションがかわいくて、UIもすっきりしていて見やすいです。

アニメーションがかわいくて、UIもすっきりしていて見やすいです。

アニメーションがかわいくて、UIもすっきりしていて見やすいです。

全体の流れがとてもスムーズでした。ビジュアルもシンプルで分かりやすく、デザインを見るのも楽しかったです。

全体の流れがとてもスムーズでした。ビジュアルもシンプルで分かりやすく、デザインを見るのも楽しかったです。

全体の流れがとてもスムーズでした。ビジュアルもシンプルで分かりやすく、デザインを見るのも楽しかったです。

Learning

Learning

競合分析やアフィニティダイアグラムなどのUXリサーチ手法を学ぶ中で、最適化のプロセスを通じて強く実感したのは、より多くのユーザーにプロダクトを理解してもらうためには、抽象的なシナリオや曖昧なブランドメッセージだけでは不十分だということです。ユーザーが本当に求めているのは、明確で具体的、そして信頼できる情報です。こうしたディテールこそが、ユーザーの意思決定に真に影響を与える要素であると気付きました。


競合分析やアフィニティダイアグラムなどのUXリサーチ手法を学ぶ中で、最適化のプロセスを通じて強く実感したのは、より多くのユーザーにプロダクトを理解してもらうためには、抽象的なシナリオや曖昧なブランドメッセージだけでは不十分だということです。ユーザーが本当に求めているのは、明確で具体的、そして信頼できる情報です。こうしたディテールこそが、ユーザーの意思決定に真に影響を与える要素であると気付きました。


Scrroll to Top

Scrroll to Top

Scrroll to Top

© Crafted by I-Chun with Framer
© Crafted by I-Chun with Framer
© Crafted by I-Chun with Framer

Contact me

© Crafted by I-Chun with Framer

Contact me

© Crafted by I-Chun with Framer

Contact me