- Project -
コロナ渦以降、オンラインでの購入が一般的に増加し、74％の人が「家で過ごす時間が増え、デザートを食べる頻度が増えた」という調査結果¹があったため、需要の高いデザート用のオンラインアプリを作成することにしました。
ユーザビリティーテストを繰り返しフィードバックをもらい、一からアプリをデザインしています。
Role
UX リサーチャー
UX/UI デザイナー
Timeframe
7週間
Skills
Figma, Maze
Methods
ユーザーインタビュー、ユーザーリサーチ、ユーザーフロー、ワイヤーフレーム、モックアップ、ムードボード、ユーザビリティーテスト、プロトタイプ、アニメーション
- Crazy 8 Sketch Exercise -
可能なUIと機能を洗い出すために、クラスメイトと一緒にスケッチをしました。
みんなで作成したスケッチから、以下二つの機能を最終的なコンセプトでとしています。
-
アカウントを作成して注文を追跡できるようにする
-
魅力的なデザートの画像をホーム画面に表示することでユーザーの注目を得る
- Mid-Fidelity Wireframe -
ユーザーフローと忠実度が中程度ワイヤーフレームは、最初のスケッチに基づいて作成しました。
ユーザーフローを作業している際に、多くの人にアプリを使ってもらうために、ユーザーが会員登録せずにアプリを使えるようにすることで、ユーザーの負担が軽減できると考えました。
Tool: Figma
Userflow
Wireframes
アプリ登録／ログイン
注文
口コミ
- Usability Testing 1 -
ユーザビリティーテストは対面とリモートの両方で行いました。
Missions
-
初めにテストの参加者にアプリを触ってもらいながら何ができるかを説明してもらい、こちらの誘導なしでアプリの使い方をどのくらい理解できたかを確認しました。
-
アプリの使いやすさ、フォントサイズとボタン間のスペースが適切かどうかを確認しました。
Analysis
ユーザービリティテストの参加者７名に「SWEETsHOME」を使ってもらうと、
フォントサイズとボタンのサイズは適切で、アイコンが何を示しているかを直感的に理解できるという結果となりました。 一方で、ユーザーの意見を元にいくつかの改善点も発見できました。
-
デザートやショップを検索する際に、「金額設定」、「距離」、「デザートの種類」、「原料」の選択肢をフィルターに含め、ユーザーが求める情報にスムーズにたどり着けるように改善しました。
-
最終支払いページ (確認ページ) に「編集」ボタンを配置していましたが、テスト後は注文の直前に顧客の購買意欲を失わせないように、最終支払いページの「編集」ボタンを削除しました。
-
デザートをカートに追加（[+]ボタンをクリック）するたびにショッピングカートの画面に移動すると、買い物を続けたいと思っているユーザーが不便に思う可能性があるため、ポップアップを入れました。
- High-Fidelity Wireframe -
前回の改善案を元に修正したデザインに加えて、アクセシビリティのテストを行うために、色弱のユーザーも含めてA / Bテストを行いました。A / Bテストでは色の違う2つのデザインを比較し、 最終的に、ユーザーのアクセシビリティと視認性のコントラストが優れた黄色ベースのデザインが選ばれました。
Tool: Figma
A/B Test
The Chosen Design by A/B Test
A ✓
B
- Usability Testing 2 -
このユーザビリティテストは、Maze¹を使用して対面およびリモートで行いました。
Missions
ヒートマップを使用して、情報アーキテクチャー・機能性・デザイン・色およびフォントサイズが適切であったかどうかを確認しました。
Analysis
全体的に結果は良好で、情報アーキテクチャー・デザイン・フォントのサイズに問題はありませんでした。
-
一部のテスト参加者が「現在背景に使われている黄色は古臭く見えるため、違う背景の色を選んだほうが良い」という指摘があった反面、「黄色の背景はこのアプリのコンセプトに合っていて素敵」という全く異なる意見がありました。両方の意見を尊重するために『黄色』をキープしつつ、ワクワク感や楽しさを演出するため、より明るい黄色を選びました。
-
デザートを追加した際に、「『キャンセル』ボタンの代わりに『OK』または『確認』ボタンが表示された方が便利」という指摘がありました。実際アプリを使っているテスト参加者を観察していると、何度もクリックをする作業によって手を煩わせていると感じたため、カートにアイテムを追加した後のポップアップは、数秒後に自動的に消えるように変更しました。
-
閉じるボタン「✕」をテスト参加者が何度もクリックをしていた為、サイズが小さすぎると感じ、全ての「✕」ボタンを大きくしました。
-
縦幅を取ることでスクロール量が増えユーザーに負担がかかっていたため、タグやアイコン等のUIを調整し、ヘッダー部分を最小限に抑えました。
¹メイズとはユーザビリティテストの際に使われるツールの一つ。Figmaと連携して作成したプロトタイプを読み込むことができ、テスターの遷移フローの確認や、ヒートマップ機能など幅広いテストができる。
- Final Website -
Lesson Learned
このプロジェクトに取り組んでいる間、テスターから様々な意見をもらい、どちらの意見を優先すべきかを決めるのは困難でした。 今回テストを受けたのは7名のみだったため、より多くのユーザーをテストすることで、どの部分に変更が必要かより明確になり、アプリがさらに改善された可能性があります。
このプロジェクト終了後も、ユーザビリティーテストの結果を元に、たくさん修正を入れたので、今のデザインに満足せず、これからも更に進化を遂げられるよう日々努力を重ねていくつもりです。
