2021 — GARDA PANGAN
Garda Pangan App — UX Case Study
PLATFORM
Android & iOS
TIMELINE
October — November 2021
ROLE
UI/UX Designer
2021 — GARDA PANGAN
Garda Pangan App — UX Case Study
PLATFORM
Android & iOS
TIMELINE
October — November 2021
ROLE
UI/UX Designer
2021 — GARDA PANGAN
Garda Pangan App — UX Case Study
PLATFORM
Android & iOS
TIMELINE
October — November 2021
ROLE
UI/UX Designer
TL;DR
Indonesia ranks second globally in food waste, with each citizen discarding approximately 300 kilograms annually, a stark irony amid the 19.4 million Indonesians facing daily hunger.
Indonesia ranks second globally in food waste, with each citizen discarding approximately 300 kilograms annually, a stark irony amid the 19.4 million Indonesians facing daily hunger.
Garda Pangan is a Food Bank that aims to be a coordinating center for surplus and potentially wasted food, to be distributed to underprivileged communities. The organization needs a tool that helps people learn about, manage, and distributed their food waste. Garda Pangan primary target users include college students and adults who are concerned with the amount of food they waste and would like to learn more about what they can do to reduce waste.
Garda Pangan is a Food Bank that aims to be a coordinating center for surplus and potentially wasted food, to be distributed to underprivileged communities. The organization needs a tool that helps people learn about, manage, and distributed their food waste. Garda Pangan primary target users include college students and adults who are concerned with the amount of food they waste and would like to learn more about what they can do to reduce waste.
Challenge
Create an engaging application that could help Garda Pangan increase awareness, education, and donations to users. By connecting the dots between food insecurity and excess food waste, the application should be able to solve the food waste problem.
Create an engaging application that could help Garda Pangan increase awareness, education, and donations to users. By connecting the dots between food insecurity and excess food waste, the application should be able to solve the food waste problem.
Role
UX designer leading the mobile app design from conception to delivery.
UX designer leading the mobile app design from conception to delivery.
Responsibilities
Conducting interviews, determining information architecture, digital wireframing, writing microcopy, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Conducting interviews, determining information architecture, digital wireframing, writing microcopy, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Duration
8 week project
8 week project
Tools
Figma, Zoom, Miro, Google Sheets, Pen & Paper
Figma, Zoom, Miro, Google Sheets, Pen & Paper
Design Process
Generally, the case study presented here follows the design thinking principles. There are 5 phases in this design process :
Generally, the case study presented here follows the design thinking principles. There are 5 phases in this design process :
Emphathize
Methods: Competitive and Comparative Analysis (C&C) & In-Depth Interview (Qualitative)
Tools: Zoom Meeting & Google Sheets
Methods: Competitive and Comparative Analysis (C&C) & In-Depth Interview (Qualitative)
Tools: Zoom Meeting & Google Sheets
In the first stage, I plan to understand the user by doing some research. To begin with, I was conduct a competitive and comparative analysis to compare Garda Pangan’s website with some other leading food-related nonprofit organizations, rescues, and food banks in Indonesia and the world.
In the first stage, I plan to understand the user by doing some research. To begin with, I was conduct a competitive and comparative analysis to compare Garda Pangan’s website with some other leading food-related nonprofit organizations, rescues, and food banks in Indonesia and the world.
Amongst these competitors, I noted that Garda Pangan currently falls short in having already implemented features that could promote outreach and engagement with users more immediately.
In-Depth Interview
Before starting the interview, I have to identify quality participants that reflect target audience in the research. The criteria for participants in this study are as follows:
1. At productive age (17–45 y.o.)
2. Know / don’t know Garda Pangan
3. Once / Never donated at Garda Pangan
4. Able to use the website or mobile application
The interview was attended by 6 participants (3 men and 3 women). Sessions are carried out one by one via Zoom Meeting for approximately 30 minutes per person. I extract some insights and gain a good understanding of the different attitudes, motivations and behaviors of our users around food and charity.
My questions is specific but cater to the general population so I can get a broad overview of different people’s habits with food, leftovers, and their thorough knowledge of food banks and sustainability. During the interview, questions and answers are documented in Google Sheets in real time.
__
Things to know; — What are their behaviour around leftover food, preferences, and issues when donating waste food?
Amongst these competitors, I noted that Garda Pangan currently falls short in having already implemented features that could promote outreach and engagement with users more immediately.
In-Depth Interview
Before starting the interview, I have to identify quality participants that reflect target audience in the research. The criteria for participants in this study are as follows:
1. At productive age (17–45 y.o.)
2. Know / don’t know Garda Pangan
3. Once / Never donated at Garda Pangan
4. Able to use the website or mobile application
The interview was attended by 6 participants (3 men and 3 women). Sessions are carried out one by one via Zoom Meeting for approximately 30 minutes per person. I extract some insights and gain a good understanding of the different attitudes, motivations and behaviors of our users around food and charity.
My questions is specific but cater to the general population so I can get a broad overview of different people’s habits with food, leftovers, and their thorough knowledge of food banks and sustainability. During the interview, questions and answers are documented in Google Sheets in real time.
__
Things to know; — What are their behaviour around leftover food, preferences, and issues when donating waste food?
Define
Methods: Affinity Mapping
Tools: Miro
Methods: Affinity Mapping
Tools: Miro
After research, I tried to clean up the results using the Miro platform by using different colored sticky notes to organize quotes from participants.
After research, I tried to clean up the results using the Miro platform by using different colored sticky notes to organize quotes from participants.
Most interview participants reported feeling badly about food waste, but they didn’t actively try to reduce their own food waste. The feedback received through research made it very clear that users would be open and willing to work towards eliminating food waste if they had access to an easy-to-use tool to help guide them. During the interviews, a great deal of insight was gained, and now I am ready to analyze all the key takeaways. I pulled out the most crucial user quotes from each individual interview and grouped them into insights on the board of affinity mapping.
Most interview participants reported feeling badly about food waste, but they didn’t actively try to reduce their own food waste. The feedback received through research made it very clear that users would be open and willing to work towards eliminating food waste if they had access to an easy-to-use tool to help guide them. During the interviews, a great deal of insight was gained, and now I am ready to analyze all the key takeaways. I pulled out the most crucial user quotes from each individual interview and grouped them into insights on the board of affinity mapping.
After synthesizing all the information and organizing the insights into main categories, we were able to construct a user persona to assist us in painting the bigger picture and real world scenario as we continue on to ideate and design the structure of the application.
User Persona
I used the learnings from my research, Competitive and Comparative Analysis & In-Depth Interview to inform my ideal personas. My persona, Lisa, represents the ideal food donor. From my In-Depth interviews I learned that while small businesses want to donate their excess food, they often don’t have the resources or time one that needs their donations. Lisa wants an easy way to donate his leftover food even with his busy work schedule.
After synthesizing all the information and organizing the insights into main categories, we were able to construct a user persona to assist us in painting the bigger picture and real world scenario as we continue on to ideate and design the structure of the application.
User Persona
I used the learnings from my research, Competitive and Comparative Analysis & In-Depth Interview to inform my ideal personas. My persona, Lisa, represents the ideal food donor. From my In-Depth interviews I learned that while small businesses want to donate their excess food, they often don’t have the resources or time one that needs their donations. Lisa wants an easy way to donate his leftover food even with his busy work schedule.
Journey map
From captured data, it can also be made in the form of a User Journey which contains motivation, impressions, findings, problems, and user expectations at each stage of using the application, so that the decision-making process and design development will be more user-centric. The following is an overview of the User Journey in this study.
Journey map
From captured data, it can also be made in the form of a User Journey which contains motivation, impressions, findings, problems, and user expectations at each stage of using the application, so that the decision-making process and design development will be more user-centric. The following is an overview of the User Journey in this study.
User Journey Mapping Based on Nielsen Norman Group https://www.nngroup.com/articles/customer-journey-mapping/
User Journey Mapping Based on Nielsen Norman Group https://www.nngroup.com/articles/customer-journey-mapping/
From all stages of the user journey, there is a significant decrease in user experience occurring in the second step (Research) and third (Decision). Based on stages of the problems that have been found, it can trigger the emergence of opportunities for solutions that I can offer such as poviding easy-to-navigate, comprehensive app, simplify the donation process, etc.
From all stages of the user journey, there is a significant decrease in user experience occurring in the second step (Research) and third (Decision). Based on stages of the problems that have been found, it can trigger the emergence of opportunities for solutions that I can offer such as poviding easy-to-navigate, comprehensive app, simplify the donation process, etc.
Ideate
Methods: Sketching & Wireframing
Tools: Figma
Methods: Sketching & Wireframing
Tools: Figma
From the previous pain points I tried to make a challenge with How Might We: “How might we help Lisa easily donate his leftover food to a underprivileged communities who needs donations?”
Information Architecture — Sitemap
Next, I developed a sitemap for the app as well as the screens needed for new user on-boarding and returning user login. With the app’s information architecture, I wanted to make sure users could easily browse upcoming donations, see their donation schedule, receive and send messages about donations, and change their profile preferences.
From the previous pain points I tried to make a challenge with How Might We: “How might we help Lisa easily donate his leftover food to a underprivileged communities who needs donations?”
Information Architecture — Sitemap
Next, I developed a sitemap for the app as well as the screens needed for new user on-boarding and returning user login. With the app’s information architecture, I wanted to make sure users could easily browse upcoming donations, see their donation schedule, receive and send messages about donations, and change their profile preferences.
User Flow
And then I created user flows for the personas when they first opened the application, set their preferences and created their first donation. Additionally, I created a user flow for a user who wants to volunteer and distribute donations, another user flow is for user when they want to recommend the beneficiary community.
User Flow
And then I created user flows for the personas when they first opened the application, set their preferences and created their first donation. Additionally, I created a user flow for a user who wants to volunteer and distribute donations, another user flow is for user when they want to recommend the beneficiary community.
Wireframes
Next, I sketched out wireframes with screens needed to Log in to donate food, volunteer, or receive food. Focusing on the core screens needed for my user flows. In the process of designing the screens, I ensured that I addressed my “how might we” statements from the product roadmap.
Wireframes
Next, I sketched out wireframes with screens needed to Log in to donate food, volunteer, or receive food. Focusing on the core screens needed for my user flows. In the process of designing the screens, I ensured that I addressed my “how might we” statements from the product roadmap.
HMW answers : For food donors, it is important for users to have the ability to easily donate their food. It only takes a few steps for users to be able to donate through the user flow I designed. In addition, data that was filled in during signup will be automatically filled in (autofill) when the user makes a new donation.
Style Guides
I chose a color palette that would stay in the same realm of the Garda Pangan, but with a twist to achieve a more fun, dynamic and attention grabbing experience. This UI kit would standardize the design systems and ensure cohesion as new features get added to the app.
Journey map
From captured data, it can also be made in the form of a User Journey which contains motivation, impressions, findings, problems, and user expectations at each stage of using the application, so that the decision-making process and design development will be more user-centric. The following is an overview of the User Journey in this study.
Mockup
Next, I designed a high-fidelity mockup of the Garda Pangan app. In the navigation bar, the user would be able to select if they want to donate food, volunteer, or receive food.
Mockup
Next, I designed a high-fidelity mockup of the Garda Pangan app. In the navigation bar, the user would be able to select if they want to donate food, volunteer, or receive food.
Prototype
Methods: Prototyping
Tools: Figma
Methods: Prototyping
Tools: Figma
To test the usability of the app, I created a clickable prototype with Figma. My prototype created the screens for the user flow of signing up until food donations.
To test the usability of the app, I created a clickable prototype with Figma. My prototype created the screens for the user flow of signing up until food donations.
Test
Methods: Usability Testing
Tools: Figma Prototype, Google Meets & Zoom Meeting
Methods: Usability Testing
Tools: Figma Prototype, Google Meets & Zoom Meeting
I conducted usability testing with six participants. Two participants tested the prototype in-person, and four participants tested the prototype remotely via screen share.
Test objectives:
· Evaluate the usability of the Garda Pangan mobile app based on five components: learnability, efficiency, memorability, errors, and satisfaction.
· Discover how easy it is for a user to complete the flows of signing up, setting donation preferences, and donating a food item.
· Observe the overall satisfaction the user has when navigating through the prototype.
· Uncover any areas of inefficiency, confusion, or difficulty for the user.
Test procedure:
· For the test procedure, I wanted to ensure that the ability to donate made sense to the user, so I kept the verbiage intentionally vague.
· First, set up your account. Sign up to donate food. Provide your personal information (full name and address) to help Garda Pangan collect your donation. Show your willingness to donate leftover food .
· Next, set your donation priority. Food donations and money donations are available. Fill out the donation form, and voila! You have successfully donated.
Usability testing results:
Test completion rate: 100% (6 of 6) of participants were able to complete the tasks.
Error-free rate: 83.3% (5 of 6) participants were able to complete the tasks without an error. 16.7% (1 of 6) participants experienced friction with setting priority donations. The participant who experienced friction had never volunteered or food donor while the other five had experience.
Conclusions:
· Overall, participants thought the app was easy to use and wished that it existed in real life.
· Setting up the account was straightforward.
· Phase after successful donations was confusing for users.
Iteration
In order to fix the problem from Usability Testing that we found, we make improvements in several parts. Since users sometimes feel confused after successful donations, here we have added a new tab to the navigation bar called: Status.
I conducted usability testing with six participants. Two participants tested the prototype in-person, and four participants tested the prototype remotely via screen share.
Test objectives:
· Evaluate the usability of the Garda Pangan mobile app based on five components: learnability, efficiency, memorability, errors, and satisfaction.
· Discover how easy it is for a user to complete the flows of signing up, setting donation preferences, and donating a food item.
· Observe the overall satisfaction the user has when navigating through the prototype.
· Uncover any areas of inefficiency, confusion, or difficulty for the user.
Test procedure:
· For the test procedure, I wanted to ensure that the ability to donate made sense to the user, so I kept the verbiage intentionally vague.
· First, set up your account. Sign up to donate food. Provide your personal information (full name and address) to help Garda Pangan collect your donation. Show your willingness to donate leftover food .
· Next, set your donation priority. Food donations and money donations are available. Fill out the donation form, and voila! You have successfully donated.
Usability testing results:
Test completion rate: 100% (6 of 6) of participants were able to complete the tasks.
Error-free rate: 83.3% (5 of 6) participants were able to complete the tasks without an error. 16.7% (1 of 6) participants experienced friction with setting priority donations. The participant who experienced friction had never volunteered or food donor while the other five had experience.
Conclusions:
· Overall, participants thought the app was easy to use and wished that it existed in real life.
· Setting up the account was straightforward.
· Phase after successful donations was confusing for users.
Iteration
In order to fix the problem from Usability Testing that we found, we make improvements in several parts. Since users sometimes feel confused after successful donations, here we have added a new tab to the navigation bar called: Status.
After successfully filling out the donation form, the users can use this tab to track information about their donation. In the status tab, we provide information on activities that have been carried out (history) and activities that are currently being carried out (on progress). A few features are available in the status tab, including live tracking of pick up and recipient information. With this additional feature we hope users can more easily use this application.
After successfully filling out the donation form, the users can use this tab to track information about their donation. In the status tab, we provide information on activities that have been carried out (history) and activities that are currently being carried out (on progress). A few features are available in the status tab, including live tracking of pick up and recipient information. With this additional feature we hope users can more easily use this application.
Obstacles
There are several challenges I face while working on this project, such as:
· Coordinating the interview schedule between the participants.
· I hear a wide range of different opinions from the interview participants.
There are several challenges I face while working on this project, such as:
· Coordinating the interview schedule between the participants.
· I hear a wide range of different opinions from the interview participants.
Lessons Learned