Project overview
The goal:
ゴール
プロジェクト概要
NPO法人京都食の未来推進機構（通称食の未来ラボ）は、食品の持続可能性に焦点を当てた京都を拠点とする組織であり、地域社会が食品廃棄物を削減するためのツールを設計したいと考えています。主なターゲットユーザーは、食品廃棄物に懸念を抱き、それを最小限に抑える方法を求める主婦と大学生です。今回NPO法人京都食の未来推進機構では、これを実現するために、実用的なアプリの開発を行いました。市場評価を網羅的に行い、ユーザーアンケートや、オンラインでのミニユーザビリティスタディを実行しています。
デザインには反復改善を行い、アクセシビリティを確保するために一貫性と色のコントラストに焦点を当てた包括的なQA監査を実施しました。
食品廃棄物に関するユーザー教育を強化し、食品消費、食品廃棄の管理支援するアプリを設計します。賞味期限内に食品を適切に管理・消費できるアプリを開発することで、食品廃棄物に対する認識を高めることを目指します。
Design an app that enhances user education on food waste and assists them in managing their own food consumption. By developing an app that enables individuals to properly manage and consume food within its expiration date, we aim to increase awareness of food waste.
Kyoto Future Food Promotion Organization, KFFPO is a Kyoto-based organization that focuses on food sustainability and aims to design a tool to aid local communities in reducing food waste. Its primary target users are college students and housewives who are concerned about food waste and seek effective ways to minimize it through the use of a user-friendly app.
Throughout thus project, I conducted a comprehensive market evaluation, deployed a swift user survey on Twitter, and executed a mini online usability study. Additionally, I developed a set of low-fidelity UI designs and, in the final review phase, conducted an extensive QA audit that focused on consistency and color contrast to ensure accessibility. This holistic approach helped create an effective and user-friendly experience for the Pantry app.
日本全体の食品ロス量は一年間におよそ522万トン、一方で、国連WFPによる世界全体の食糧援助量は約420万トンであり、日本の食品ロスは世界全体の食糧援助量をはるかに超える量となっています。（農林水産省 令和4年6月9日公表 令和2年度推計値より）
この日本の食品ロス量の内、47％にあたる247万トンが家庭からでた食品ロスです。食品ロスというと事業者から排出されるものを考えがちですが、家庭からの食品ロスは全体の半分に近い数値となっており飲食店での食べ残しなども考えると、食品ロスの問題は決して事業者だけの問題ではないことが伺えます。
食品廃棄物に関する一般的な知識不足や、家庭や個人の活動が食品ロスに与える影響への理解度の低さが、持続的な食品廃棄物の問題に大きく寄与している要因であると特定しました。
The problem:
問題点
Japan's annual food loss amounts to approximately 5.22 million tons, while the United Nations World Food Programme's global food aid totals around 4.2 million tons. This means that Japan's food loss significantly exceeds the total amount of food aid provided worldwide.
Of this food loss in Japan, 47%, or 2.47 million tons, comes from households. While food waste is often associated with businesses, nearly half of the total amount comes from households, which indicates that it is not just an issue for businesses when considering leftovers from restaurants and other food establishments.
Pantry's strategy team has identified that a lack of general knowledge about food waste and a limited understanding of personal impact are significant factors contributing to ongoing food waste.
私の役割 :
UXUIデザイナー
サービスデザイン・アプリの構想から実現までのリード
My Role : UXdesigner,UI designer I am responsible for leading the app and responsive website design from inception to delivery.
UXリサーチ、インタビュー、紙およびデジタルワイヤーフレームの作成、低・高忠実度プロトタイプの開発、ユーザージャーニーマップ、ユーザビリティ調査実行、アクセシビリティの確保、デザインの反復改善、情報アーキテクチャの決定、UIデザイン
Responsibilities: Conducting user interviews, developing user journey maps, creating both paper and digital wireframes, designing low and high-fidelity prototypes, executing usability studies, ensuring accessibility, refining design iterations, defining information architecture, and implementing responsive design solutions.
User research: summary
ユーザーリサーチ概要
京都食の未来推進機構によるの食品廃棄物に関する事前調査のデータを使用して質問を作成、それをもとにユーザーインタビューを行いました。
インタビューされたほとんどの人が食品廃棄について
罪悪感を感じていましたが、家族の健康のために
食品廃棄がしばしば必要となると感じていました。
調査を通じて得られたフィードバックにおいては、
使いやすいツールが利用可能であれば、ユーザーが無駄な食品廃棄物の
削減に前向きであることを明確に示しました。
Interview questions were developed using the pantry's data on food waste, which were then used to conduct user interviews. Most interviewees indicated that they felt bad about food waste, but often felt compelled to discard it for the health of their families. The feedback obtained through the survey clearly showed that users are open-minded to eliminating wasteful food waste if easy-to-use tools are available.
Conpetitive analysis
競合分析
Too Good To Go、OLIO、NoWasteは、それぞれ食品廃棄問題に対するユニークなソリューションを提供しています。競合分析では、それぞれのアプリの強み、弱み、改善の機会を特定し、Pantryアプリでより効果的で使いやすい体験を提供することを目指しました。
Too Good To Go：割引された余剰食品へのアクセスや飲食店やスーパーマーケットとの提携が強みです。弱みは、参加している事業所とその場所に限定されています。改善点としては、参加事業所の範囲を拡大し、アプリのユーザーインターフェースを向上させることが挙げられます。
OLIO：地域主導のアプローチと幅広いアイテムを共有できる点が強みです。弱みは、ユーザーの参加に依存しており、共有食品アイテムに関する安全性の懸念があります。改善点として、共有アイテムに対する安全対策を実施し、ユーザーのエンゲージメントを促進することが考えられます。
NoWaste：在庫管理、賞味期限の通知、レシピや買い物リストなどの追加機能が強みです。弱みは、アプリの複雑さや在庫入力に時間がかかる可能性があります。改善点として、在庫管理を効率化し、ユーザーの消費傾向に基づいたパーソナライズされたレシピや使い方のアイデアを提供することができます。
Pantryアプリでは、これらの弱みに対処し、各アプリの強みを活かして、食品廃棄物の削減に対するより効果的で使いやすい体験を提供することを目指しました。
Too Good To Go, OLIO, and NoWaste each offer unique solutions for addressing food waste. In our analysis, we identified strengths, weaknesses, and opportunities for improvement for each app, aiming to create a more effective and user-friendly experience with the Pantry app.
Too Good To Go: Strengths include discounted surplus food access and partnerships with restaurants and supermarkets. Weaknesses are limited to participating businesses and their locations. Improvement opportunities could be expanding the range of participating businesses and enhancing the app's user interface.
OLIO: Strengths are the platform's community-driven approach and the ability to share a wide range of items. Weaknesses include reliance on user participation and potential safety concerns with shared items. Opportunities for improvement include implementing safety measures for shared items and promoting user engagement.
NoWaste: Strengths are inventory management, expiration notifications, and additional features like recipes and shopping lists. Weaknesses include possible complexity and time-consuming inventory input. Improvement opportunities could be streamlining inventory management and incorporating AI-powered recommendations.
With the Pantry app, we aim to address these weaknesses and build on the strengths of each app to create a more effective and user-friendly experience for reducing food waste.
User Survey
オンラインにて
１０の質問調査を行いました
対象者 17人
日本在住 女性
年齢22-81歳
オンラインビデオ通話
-
期限切れや未使用の食品を捨てることがどのくらいの頻度でありますか？
-
食品を捨てる主な理由は何ですか？
-
現在、食品の在庫管理や賞味期限をどのように追跡していますか？
-
食品在庫管理や食品廃棄の削減を助けるアプリに興味がありますか？
-
食品管理アプリで最も役立つと思われる機能は何ですか？
-
食品在庫に基づいたパーソナライズされたレシピ提案があることがどれほど重要ですか？
-
どのくらいの頻度で事前に食事の計画や買い物リストを作成していますか？
-
食品廃棄を減らすために、アプリに食品在庫を入力する時間を費やすことに抵抗はありますか？
-
期限切れになる前に使い切るのが難しい特定の種類の食品はありますか？
-
1-10のスケールで、食品廃棄の削減があなたにとってどれくらい重要ですか？
User Survey Questions
-
How often do you find yourself throwing away expired or unused food?
-
What are the main reasons you throw away food?
-
How do you currently track your food inventory and expiration dates?
-
Would you be interested in an app that helps manage your food inventory and reduce waste?
-
What features do you think would be most helpful in a food management app?
-
How important is it for you to have personalized recipe suggestions based on your food inventory?
-
How often do you plan your meals or create a shopping list in advance?
-
Would you be willing to spend time inputting your food inventory into an app if it helped reduce waste?
-
Are there any specific types of food you struggle to use before they expire?
-
On a scale of 1-10, how important is reducing food waste to you?
ユーザーインタビュー
User Survey Results
ユーザーインタビュー結果
-
期限切れや未使用の食品を捨てる頻度は、回答者の約半数が月に数回と回答。
-
食品を捨てる主な理由は、賞味期限の切れた食品や調理後の食べ残しが多いことが判明。
-
現在、食品の在庫管理や賞味期限を追跡する方法は、主にメモやスマホのアプリ。
-
食品在庫管理や食品廃棄の削減を助けるアプリに対して、回答者のほとんどが興味を示した。
-
アプリで最も役立つ機能として、賞味期限の通知や在庫管理、レシピ提案が多く挙げられた。
-
食品在庫に基づいたパーソナライズされたレシピ提案は、全体的に高い評価を受けた。
-
事前に食事の計画や買い物リストを作成する頻度は、回答者の約3分の2が週に1回以上。
-
アプリに食品在庫を入力するため時間を費やすことには、回答者の半数が抵抗感があると回答。
-
期限切れになる前に使い切るのが難しい食品として、野菜や果物、調味料などが挙げられた。
-
食品廃棄の削減の重要性について、回答者の平均評価は7.5で、食品廃棄への問題意識が高い。
-
About half of the respondents reported throwing away expired or unused food items a few times per month.
-
The main reasons for discarding food were found to be expired products and leftovers after cooking.
-
Currently, most respondents manage their food inventory and track expiration dates using notes or smartphone apps.
-
The majority of respondents showed interest in an app that would help with food inventory management and waste reduction.
-
The most useful features in a food management app were identified as expiration date notifications, inventory management, and recipe suggestions.
-
The importance of personalized recipe recommendations based on food inventory received high overall ratings.
-
About two-thirds of respondents reported creating meal plans and shopping lists at least once a week.
-
Half of the respondents expressed resistance to spending time inputting food inventory into an app to reduce food waste.
-
Vegetables, fruits, and condiments were mentioned as items that are difficult to use up before expiration.
-
The average rating for the importance of reducing food waste was 7.5, indicating a high level of awareness about the issue among respondents.
Initial research shows...
これらのユーザーインタビュー・初期調査をもとに戦略を立て、京都食の未来推進機構では、アプリの開発（名称 Pantry）を行い、食品の在庫管理、賞味期限の通知、レシピ提案などの機能を強化し、ユーザーが食品廃棄を効果的に減らすことができるようサポートする必要があると考えました。
また、食品在庫の入力に対する抵抗感を減らすために、簡単で効率的な在庫追跡方法を実装することが重要です。ユーザーは食品廃棄の問題意識が高いため、アプリが食品廃棄削減をサポートする方法を明確に伝えることで、興味と利用意欲を高めることを目指しました。
Based on this initial user survey, the Pantry app should focus on enhancing features such as food inventory management, expiration notifications, and recipe suggestions to effectively support users in reducing food waste. Additionally, it is crucial to implement easy and efficient inventory tracking methods to alleviate resistance to inputting food inventory. Since users have a high awareness of the food waste issue, clearly communicating how the app supports food waste reduction can be expected to increase interest and willingness to use the app.
Ideation
リサーチデータを検討した後、すべての情報をもとにブレインストーミングを行い、ペルソナ、ユーザージャーニーマップを作成し、アイデアを精査しました。
多数のワイヤーフレームを紙にスケッチ後、デジタルなローファイワイヤーフレーム作成に取り組みました。
またオブジェクト指向UIデザインのメソッドによる情報設計をおこない、直感的に使いやすいアプリのデザインに取り組みました。
After reviewing the research data, we conducted brainstorming sessions based on all the information, created user journey maps, and carefully considered various ideas. Then, we sketched multiple wireframes on paper to establish the foundation of the design. After that, we proceeded with creating digital low-fidelity wireframes and other design elements.
Persona 1
Persona 2
Flow Diagram
OOUIのオブジェクトを起点に、ユーザーが実行できる主要なタスクのフロー図を作成しました。以下はそのうちの1つのフローです。（ログイン等失敗した場合のフローも作成しましたが、スペースの制約のためにここでは省きました。）
To outline all the necessary functionality, I created a simple flow diagram of the main tasks that the user can perform. One of the flows is shown below, although fail state flows were also created, they are not included due to space constraints
Low-fidelity prototype
ユーザビリティテストの準備として、賞味期限が迫っているアイテムを追加するためのユーザーフローを示すために、ローファイのプロトタイプを数通り作成しました。これらのプロトタイプは、情報アーキテクチャとユーザーフローの改善のため、詳細にこだわらずに機能の骨格のみ表現するように設計しました。
In preparation for usability testing, I developed a low-fidelity prototype that demonstrates the user flow for adding an item that is about to expire. The prototype was designed with simplicity in mind, using basic sketches or wireframes to illustrate the core functionality of the feature without getting bogged down in details.
Hi-Fidelity UI Design
合計38種類の高忠実度デザインを作成しました。これには、後のデザイン段階でA/Bテストに適用できる2つの異なるナビゲーションパターン（タブバーとハンバーガーメニュー）が含まれています。
さらに、メイン画面ではシンプルな白い背景を試しました。また、商品ページではグラスモーフィズムを採用し、廃棄物に関連するネガティブなイメージを払拭するため、商品を美味しそうでお洒落な外観に見せるバージョンも開発しました。
A total of 38 high-fidelity designs were created, incorporating two distinct navigation patterns (a tab bar and a hamburger menu) suitable for A/B testing during subsequent design stages.Additionally, I experimented with simple white backgrounds for the main screens. On product pages, I used glassmorphism to dispel the negative image associated with waste, presenting the products with a delicious and stylish appearance.
High-Fidelity Prototype
Figmaを使用して、高忠実度UIデザインをインタラクティブなプロトタイプに変換し、アプリの初期ユーザーテストを行いました。
I converted my high-fidelity designs into an interactive prototype with Figma, facilitating initial user testing for the app among a select group.
Usability Testing
Prototype validation
プロトタイプ検証
ユーザビリティ調査
プロトタイプの検証を8人のユーザーと実施し、それぞれにカテゴリー、商品、商品詳細ビューに関連するプロトタイプの各セクションを提供しました。目的は、ユーザーがカテゴリ表示のホーム画面から各アイテムの詳細画面までスムーズに理解できることを確認することでした。
テストはZoomコールで行い、その間にアプリをユーザーに紹介し、理解度を評価するために質問を行いました。
I conducted prototype validation with eight users, providing each with a section of the prototype related to category, product, and product detail views. The goal was to ensure that users could smoothly understand the transition from the category display on the home screen to each item's detail screen.
The testing was carried out over a Zoom call, during which I introduced the app to the users and asked them questions to assess their understanding.
Study Results
検証結果
カテゴリーページでは、62.5％のユーザーが次のステップについて不確かでした。またアイテムの詳細ページからホームページに戻る方法が理解されず、その結果、タスクの成功率はわずか25％でした。
On the category page, 62.5% of users were uncertain about the next steps. Additionally, they struggled to understand how to navigate back to the home page from the item detail page. As a result, the task success rate was a mere 25%.
Prototype update cancept
検証結果
時間の制約により、更新されたプロトタイプでの二度目のユーザビリティ調査を実施できませんでした。ただし、詳細ページの下部にナビゲーションバーを配置し、操作性を向上させることでプロトタイプを更新しました。
Due to time constraints, I was unable to conduct a second usability study on the updated prototype. However, I improved the prototype by placing a navigation bar at the bottom of the detail page, enhancing its user-friendliness.
The app has been evaluated for contrast to meet the AA standards of WCAG. In some cases, I found that the contrast could be improved.One specific example I would like to share is the primary action button. My initial idea was to differentiate that button from all of the other CTAs, but the choice of color proved to not be fully accessible. In the final version, the background color was modified.
WCAGのAA基準に適合するようにコントラスト評価を行いました。その結果、アプリ内のいくつかのケースで、コントラストの改善が必要になりました。具体的な例として、主要なアクションボタンについて、当初の考えでは、このボタンを他のすべてのCTAから区別することを目指していましたが、選択された色が完全にアクセシブルでないことが判明しました。最終的なバージョンでは、背景色を修正しました。
アクセシビリティチェック
Accessibility check
What I learned
PantlyアプリのUXデザインプロセスを通じて得た学び：
-
時間管理の重要性：UXデザインの各段階で予想よりも時間がかかり、スケジュール管理が難しい状況でした。今後は余裕を持った計画を立て直すことが重要です。
-
共感力の向上：ユーザーインタビュー、ペルソナ作成、ユーザージャーニーマップ作成などを通じて、ターゲットユーザーに共感し、ニーズに合わせたデザインを行うことの重要性と難しさを再認識しました。
-
明快さとシンプルさの追求：PantlyアプリのUXデザインでは、情報やアクションを明確でわかりやすい方法で提示することを重視しましたが、ユーザー調査で複雑だとの意見も得られました。今後はさらなる改善を目指していきたいです。
-
一貫性の確保：視覚デザイン、インタラクション、全体のフローの一貫性を保つことで、統一感のあるエクスペリエンスを実現しようとしましたが、インタビューに基づくデザインの改善を進める中でバランスをとることが難しかったです。ある程度想定していたものの、タイポグラフィ、色、デザインパターン、コンポーネントなど、初期段階からより多くの変更の可能性を想定してデザインデータを構成する必要がありました。
-
テスト、反復、改善の実践：最初のテストとユーザーフィードバック収集によって、改善が必要な部分を特定し、デザインを反復しました。しかし、予定していた2回目のテストは時間的制約のため実施できませんでした。
-
アクセシビリティの確保：障害を持つユーザーも含め、幅広いユーザー層がアプリを利用できるようにすることがUXデザインの重要な側面です。明確なラベルの使用や画像の代替テキストの提供、スクリーンリーダーとの互換性を確保するなど、アクセシビリティのベストプラクティスを取り入れることが求められます。
Learnings from the UX design process of the Pranty app:
-
Importance of time management: Each stage of the UX design process took longer than anticipated, making schedule management challenging. It's crucial to reconsider planning with more flexibility moving forward.
-
Enhancing empathy: Through user interviews, persona creation, and user journey mapping, we re-recognized the importance and difficulty of empathizing with target users and designing according to their needs.
-
Pursuing clarity and simplicity: We prioritized presenting information and actions in a clear and straightforward manner in the Pranty app's UX design. However, some user research feedback indicated complexity. We aim to improve this aspect in the future.
-
Ensuring consistency: We attempted to create a cohesive experience by maintaining consistency in visual design, interactions, and overall flow. However, balancing these aspects proved difficult while implementing design improvements based on interviews. Considering changes in typography, colors, design patterns, and components from the initial stage was necessary.
-
Practicing testing, iteration, and improvement: The first test and user feedback collection allowed us to identify areas for improvement and iterate the design. However, we could not conduct the planned second test due to time constraints.
-
Ensuring accessibility: Making the app usable for a wide range of users, including those with disabilities, is an essential aspect of UX design. Incorporating accessibility best practices, such as using clear labels, providing alternative text for images, and ensuring compatibility with screen readers, is required.
