次の食事を計画し、料理をストレスフリーで楽しい体験にする
プロジェクト概要
役割
UIデザイン, UXデザイン
プロジェクトの範囲
ユーザーインタビュー, ペルソナ, ユーザーストーリー, 最小限の実用製品 (MVP), ユーザーフロー, ワイヤーフレーム, スタイルガイド, ユーザビリティテスト
ツール
Adobe XD, Adobe Photoshop, Adobe Illustrator
課題
忙しいスケジュールを管理しながら健康的な食事を維持することはしばしば困難で、ストレスの原因になることがあります。 特にやるべきことが多い時には、さまざまなレシピを調べて何を料理するかを決めるのはかなり大変で度々圧倒的に感じます。 そのため、忙しい日常生活の中で、栄養バランスの取れた食事は最初におろそかにされることが多いです。
解決策
ユーザーの手数を最小限に抑えて貴重な時間を節約するために、ユーザーは多くの時間を費やして様々なレシピを調べることより、 迅速に食事計画を決定することが重要です。 そのため、アプリがユーザーに好みに合わせたレシピを提案することで、ユーザーの手間を減らすことができます。 さらに、食事プランナーから直接買い物リストに材料を追加できるオプションを提供することで、潜在的なストレスの原因を軽減し、 料理を楽しくて報われる体験に変えることができます。
ウェブアプリの構造計画
ユーザーは誰ですか？
アプリのデザインに取り掛かる前に、基本的にどのようなユーザーにデザインするかを理解することを目指しました。 ユーザーの目標は何ですか？彼らはどのような困難や不満を経験していますか？ユーザーはどのタイミングで製品を利用するでしょうか？ アプリの対象者をより明確に定義できるためにまずは５WH質問に回答することから始めました。
誰？
スケジュールが忙しくて、時間を節約したいが、栄養豊富で健康的な食事にも気にする人。
何？
事前に食事と食料品の買い物を計画し、栄養分を管理し、自分のニーズに合わせてフィルターオプションを調整し、レシピに従って食事を調理する。
どこ？
主に家やキッチンで使用する。デスクトップだけでなく、モバイルデバイスでも使用する。
いつ？
食事の予定を決めるときや料理をしているとき。
なぜ？
食事計画と買い物リストの作成にかかる時間を節約するために。
どうやって？
ユーザーは、個人のニーズに応じてフィルタを設定し、レシピを検索する。 レシピを「カレンダー」に入れて事前に食事計画を決定し、これらのレシピに基づいて購入する必要がある材料を整理し、買い物リストに追加する。
ユーザーリサーチ
プロジェクトについてより深い洞察を得るために、次にユーザーインタビューを行うことにしました。 前に回答した５WH質問により、対象者をより明確に把握できたため、ユーザーインタビューに適した参加者を特定することができました。 インタビューは、ユーザーの不満や目標を明らかにし、プロジェクトのアイデアと方向性をさらに形作るのに役立ちました。
痛点
- 新しくて革新的なレシピを見つけるのが困難
- 家族全員の食事ニーズや好みに合うものを満たすことが困難
目標
- よりバランスの取れた食事
- 家族全員の食事ニーズを満たす
- 忙しいライフスタイルと食事のより良い両立
- 1週間前に食事を計画する
ユーザーペルソナ
ユーザーインタビュー中に得た情報をもとに、次に3つの異なるユーザーペルソナを作成しました。 これらのペルソナは、対象者をより明確に定義し、ユーザーのニーズや痛点を理解するのに役立ちました。 作成したペルソナを常に念頭に置くことで、私は意識的なデザイン決定を行い、 ユーザーのニーズに共鳴する製品を開発することができました。
最小限の実用製品 (MVP)
ペルソナを作成した後、ユーザーが誰であるかは理解しましたが、どの機能が効果的にユーザーの問題を解決し、 彼らのニーズや目標と一致するのでしょうか？その課題に対処するためには、 私がペルソナに基づいてユーザーストーリーを形成し始めました。 これにより、対象者のニーズとレシピのWebアプリに求めるものをより深く理解しようとしました。
機能やその範囲を繰り返し考え、機能のアイデアを思い付いた後、 私はそれぞれを「持っていても良い機能」と「重要な機能」に分類し始めました。 その後、これらの情報をすべてMVPドキュメントにまとめ、製品デザインの初期の方向性を明確にしました。
MVPの目的:
- 健康的な食事を実現するために、忙しい人々の手数を減らし、栄養情報の概要を提供する。
- 忙しい人々が労力をかけずに、自分のニーズや好みに合わせて食事を計画する方法を提供する。
仮説
健康的で栄養価の高い食事と忙しいスケジュールの両立は常に簡単ではありません。 健康的な食事を準備する際には、レシピの決定、事前に食事の予定を決めること、食料品の買い物の計画など様々な困難があります。 そのため、多くの人は迅速だが不健康な選択肢を選びがちです。 したがって、このWebアプリは忙しい人々の食事計画と健康的な食生活に対応することを目指しています。
成功指標
- ユーザープロファイルの数
- 新たに作成されたユーザープロファイルの数
- 作成された食事プランの数
- SEOランキン
- ユーザーからのレビュー
研究結果をビジュアルデザインに変える
ユーザーフロー
MVPに続いて、ユーザーストーリーに基づいてユーザーフローの概要を描き始めました。このユーザーフローは、ユーザーがそれぞれの画面をナビゲートするためにたどるパスを示し、アプリ内での進行に影響を与える決定点を強調し、ユーザーが遭遇する特定の画面を描写します。
低忠実度ワイヤーフレーム
ユーザーフローの作成で、デザインする必要がある画面と機能を明確に理解したので、 次はアプリの実際の画面と画面の間のナビゲーションの具体的な設計を検討し始めました。 複数回のブレインストーミングとクレイジー8を経て、最終的に低忠実度ワイヤーフレームを作成しました。 これは画面レイアウトの基本的な基盤となりました。
ユーザビリティテスト
ワイヤーフレームはレシピアプリの基本的な構造を提供しましたが、誰かがグレースケールだけのアプリを使いたくなるのは考えにくいです。 そのため、焦点をアプリの外観とスタイルを洗練することに移しました。アプリのポジティブで明るい雰囲気に調和するために、 主要色をオレンジにして丸みを帯びたタイポグラフィを選び、ユーザーがアプリを起動するたびに歓迎されていると感じるようにしました。 さらに、視覚的魅力を高めるためにアイコンとロゴも作成しました。
スタイルガイド
ワイヤーフレームはレシピアプリの基本的な構造を提供しましたが、誰かがグレースケールだけのアプリを使いたくなるのは考えにくいです。そのため、焦点をアプリの外観とスタイルを洗練することに移しました。アプリのポジティブで明るい雰囲気に調和するために、メインカラーをオレンジにして丸っぽいタイポグラフィを選び、ユーザーがアプリを起動するたびに歓迎されていると感じるようにしました。さらに、視覚的魅力を高めるためにアイコンとロゴも作成しました。
画面と機能
スタイルガイドでビジュアルスタイルを定義した後、そのスタイルをワイヤーフレームに取り入れて、高忠実度のワイヤーフレームを作成しました。 しかし、ビジュアルスタイルは成功した製品を作るための一面に過ぎないので、以前に定義した機能をどのように実装したか、UXとUIデザインをどのように調和させたかを以下に説明します。
学んだこと
最初からすべてのアイデアや可能な機能を実装しない
ブレインストーミング中に多くのアイデアや解決策を思い付くことは素晴らしいことですが、最初からすべてのアイデアなどを実装することは貴重なリソースと時間を消費します。完成品を目指すのではなく、まずは製品の機能的なバージョン（MVP）を作成し、初期のローンチ後に追加機能に取り組むことがより有益です。このアプローチは、早期の利益を生み出し、それをさらなる開発に再投資するのに役立つだけでなく、ユーザーからの貴重なフィードバックや洞察を収集することもできます。
一人でデザインはしない
デザインプロセスにユーザーを巻き込むことが重要である一方で、同僚、デザイナー仲間、開発者、業界の専門家など、他のステークホルダーとの協力も同様に重要です。これらの個々の人々は、自分の作業を強化するための貴重な洞察と提案を提供することができます。別のデザイナーは新鮮な視点とデザイン改善のための貴重なアドバイスを提供するかもしれませんし、開発者だと自身のアイデアの技術的な実現可能性を評価することができます。批評を受け入れることは、よく設計された最終製品を達成するために不可欠であり、決して見過ごされるべきではありません。