Be One To Give
Be One to Give is an on demand delivery app for surplus food. It provides retailers with the opportunity to close the gap between food surplus and food insecurity. It's designed to be the middle man for excess food and people who need it.
MY ROLE
Product Designer, Brand/Visual Designer
TIMELINE
April - May 2024
TOOLS
Figma
PROJECT TYPE
INDUSTRY
Food and Beverage
DESIGN PROCESS
DEFINE
Problems
Implementing new features and updates is difficult to manage while spread across two apps.
It's difficult for the users to download multiple apps to complete the process.
The current interface and user experience does not allow for growth or expansion for the company.
Retail partners are unable to book scheduled pick-up orders.
The impact page does not display itemized environmental impact.
Goals
Create a hybrid app that combines both Retail Partners and Community Partners into one.
Reduce the amount of development work when launching new features or correcting issues with a single app.
Develop a refreshed, modern, and consistent branding and user interface.
Add design elements that allow for growth, expansion, and a stronger user experience.
Success Metrics (Definition)
Success in this project is to successfully merge two existing apps into a hybrid app. The hybrid app will solve for the hero journey's of both personas as well as edge case scenarios. It will also be refreshed with a stronger, more modern interface that is consistent throughout each screen. A successful final shipped product will be easily passed off to engineering for software production.
DEFINE
Problems
Implementing new features and updates is difficult to manage while spread across two apps.
It's difficult for the users to download multiple apps to complete the process.
The current interface and user experience does not allow for growth or expansion for the company.
Retail partners are unable to book scheduled pick-up orders.
The impact page does not display itemized environmental impact.
Goals
Create a hybrid app that combines both Retail Partners and Community Partners into one.
Reduce the amount of development work when launching new features or correcting issues with a single app.
Develop a refreshed, modern, and consistent branding and user interface.
Add design elements that allow for growth, expansion, and a stronger user experience.
Success Metrics (Definition)
Success in this project is to successfully merge two existing apps into a hybrid app. The hybrid app will solve for the hero journey's of both personas as well as edge case scenarios. It will also be refreshed with a stronger, more modern interface that is consistent throughout each screen. A successful final shipped product will be easily passed off to engineering for software production.
DEFINE
Problems
Implementing new features and updates is difficult to manage while spread across two apps.
It's difficult for the users to download multiple apps to complete the process.
The current interface and user experience does not allow for growth or expansion for the company.
Retail partners are unable to book scheduled pick-up orders.
The impact page does not display itemized environmental impact.
Goals
Create a hybrid app that combines both Retail Partners and Community Partners into one.
Reduce the amount of development work when launching new features or correcting issues with a single app.
Develop a refreshed, modern, and consistent branding and user interface.
Add design elements that allow for growth, expansion, and a stronger user experience.
Success Metrics (Definition)
Success in this project is to successfully merge two existing apps into a hybrid app. The hybrid app will solve for the hero journey's of both personas as well as edge case scenarios. It will also be refreshed with a stronger, more modern interface that is consistent throughout each screen. A successful final shipped product will be easily passed off to engineering for software production.
DEFINE
Problems
Implementing new features and updates is difficult to manage while spread across two apps.
It's difficult for the users to download multiple apps to complete the process.
The current interface and user experience does not allow for growth or expansion for the company.
Retail partners are unable to book scheduled pick-up orders.
The impact page does not display itemized environmental impact.
Goals
Create a hybrid app that combines both Retail Partners and Community Partners into one.
Reduce the amount of development work when launching new features or correcting issues with a single app.
Develop a refreshed, modern, and consistent branding and user interface.
Add design elements that allow for growth, expansion, and a stronger user experience.
Success Metrics (Definition)
Success in this project is to successfully merge two existing apps into a hybrid app. The hybrid app will solve for the hero journey's of both personas as well as edge case scenarios. It will also be refreshed with a stronger, more modern interface that is consistent throughout each screen. A successful final shipped product will be easily passed off to engineering for software production.
DEFINE
Problems
Implementing new features and updates is difficult to manage while spread across two apps.
It's difficult for the users to download multiple apps to complete the process.
The current interface and user experience does not allow for growth or expansion for the company.
Retail partners are unable to book scheduled pick-up orders.
The impact page does not display itemized environmental impact.
Goals
Create a hybrid app that combines both Retail Partners and Community Partners into one.
Reduce the amount of development work when launching new features or correcting issues with a single app.
Develop a refreshed, modern, and consistent branding and user interface.
Add design elements that allow for growth, expansion, and a stronger user experience.
Success Metrics (Definition)
Success in this project is to successfully merge two existing apps into a hybrid app. The hybrid app will solve for the hero journey's of both personas as well as edge case scenarios. It will also be refreshed with a stronger, more modern interface that is consistent throughout each screen. A successful final shipped product will be easily passed off to engineering for software production.
DEFINE
Problems
Implementing new features and updates is difficult to manage while spread across two apps.
It's difficult for the users to download multiple apps to complete the process.
The current interface and user experience does not allow for growth or expansion for the company.
Retail partners are unable to book scheduled pick-up orders.
The impact page does not display itemized environmental impact.
Goals
Create a hybrid app that combines both Retail Partners and Community Partners into one.
Reduce the amount of development work when launching new features or correcting issues with a single app.
Develop a refreshed, modern, and consistent branding and user interface.
Add design elements that allow for growth, expansion, and a stronger user experience.
Success Metrics (Definition)
Success in this project is to successfully merge two existing apps into a hybrid app. The hybrid app will solve for the hero journey's of both personas as well as edge case scenarios. It will also be refreshed with a stronger, more modern interface that is consistent throughout each screen. A successful final shipped product will be easily passed off to engineering for software production.
RESEARCH
User Personas
🛒
Retail Partner
This user needs to be able to schedule pick-up orders to remove their excess food. This persona includes hotels, grocery stores, universities, and catering companies.
🏫
Community Partner
This user needs to be able to recieve orders from the retail partners. This persona includes homeless shelters, food banks, and community kitchens.
RESEARCH
User Personas
🛒
Retail Partner
This user needs to be able to schedule pick-up orders to remove their excess food. This persona includes hotels, grocery stores, universities, and catering companies.
🏫
Community Partner
This user needs to be able to recieve orders from the retail partners. This persona includes homeless shelters, food banks, and community kitchens.
RESEARCH
User Personas
🛒
Retail Partner
This user needs to be able to schedule pick-up orders to remove their excess food. This persona includes hotels, grocery stores, universities, and catering companies.
🏫
Community Partner
This user needs to be able to recieve orders from the retail partners. This persona includes homeless shelters, food banks, and community kitchens.
RESEARCH
User Personas
🛒
Retail Partner
This user needs to be able to schedule pick-up orders to remove their excess food. This persona includes hotels, grocery stores, universities, and catering companies.
🏫
Community Partner
This user needs to be able to recieve orders from the retail partners. This persona includes homeless shelters, food banks, and community kitchens.
RESEARCH
User Personas
🛒
Retail Partner
This user needs to be able to schedule pick-up orders to remove their excess food. This persona includes hotels, grocery stores, universities, and catering companies.
🏫
Community Partner
This user needs to be able to recieve orders from the retail partners. This persona includes homeless shelters, food banks, and community kitchens.
RESEARCH
User Personas
🛒
Retail Partner
This user needs to be able to schedule pick-up orders to remove their excess food. This persona includes hotels, grocery stores, universities, and catering companies.
🏫
Community Partner
This user needs to be able to recieve orders from the retail partners. This persona includes homeless shelters, food banks, and community kitchens.
PROTOTYPE
Wireframe
The process of wireframing was a crucial part of the process. The task of merging two apps required the ideation of user flows and prototyping. Our goal was to maintain the same flow of the two apps but integrate them together seamlessly. I wireframed every individual screen of the user flow. It allowed me to collaborate with the CEO and make changes to improve the hybrid user experience. With the wireframes, I was able to experiment with different design elements, flow changes, and usability checks.
PROTOTYPE
Wireframe
The process of wireframing was a crucial part of the process. The task of merging two apps required the ideation of user flows and prototyping. Our goal was to maintain the same flow of the two apps but integrate them together seamlessly. I wireframed every individual screen of the user flow. It allowed me to collaborate with the CEO and make changes to improve the hybrid user experience. With the wireframes, I was able to experiment with different design elements, flow changes, and usability checks.
PROTOTYPE
Wireframe
The process of wireframing was a crucial part of the process. The task of merging two apps required the ideation of user flows and prototyping. Our goal was to maintain the same flow of the two apps but integrate them together seamlessly. I wireframed every individual screen of the user flow. It allowed me to collaborate with the CEO and make changes to improve the hybrid user experience. With the wireframes, I was able to experiment with different design elements, flow changes, and usability checks.
PROTOTYPE
Wireframe
The process of wireframing was a crucial part of the process. The task of merging two apps required the ideation of user flows and prototyping. Our goal was to maintain the same flow of the two apps but integrate them together seamlessly. I wireframed every individual screen of the user flow. It allowed me to collaborate with the CEO and make changes to improve the hybrid user experience. With the wireframes, I was able to experiment with different design elements, flow changes, and usability checks.
PROTOTYPE
Wireframe
The process of wireframing was a crucial part of the process. The task of merging two apps required the ideation of user flows and prototyping. Our goal was to maintain the same flow of the two apps but integrate them together seamlessly. I wireframed every individual screen of the user flow. It allowed me to collaborate with the CEO and make changes to improve the hybrid user experience. With the wireframes, I was able to experiment with different design elements, flow changes, and usability checks.
PROTOTYPE
Wireframe
The process of wireframing was a crucial part of the process. The task of merging two apps required the ideation of user flows and prototyping. Our goal was to maintain the same flow of the two apps but integrate them together seamlessly. I wireframed every individual screen of the user flow. It allowed me to collaborate with the CEO and make changes to improve the hybrid user experience. With the wireframes, I was able to experiment with different design elements, flow changes, and usability checks.
TEST
Usability Testing
My team and I conducted usability testing with both our wireframes and the high fidelity screens. This allowed us to work through kinks in the user flows, iron out touch targets and identify missing features.
Test Finding
We identified an edge case scenario where a Retail Partner would need to create a pre-scheduled pick up order. Our original user flow did not account for this scenario. We tested a few options for how to integrate it into the existing user flow.
Solution
Working with the CEO, we determined to place the button for a scheduled order pick up in the navigation bar. Since this is an edge case, it did not need to be in the home screen. It also required an updated flow to include a secondary location, if the pick up point was not their primary location.
Test Finding
The impact page is a secondary feature of our app. It was not part of the hero journey but enhanced the importance of food distribution and reinforced the value of Be One to Give. When designing the impact page, we did not account for broken down data points and multiple views.
Solution
In a second round of revisions, the impact page would include different view points of each data. It would allow the user to view their impact for individual orders, month to date, and year to date.
TEST
Usability Testing
My team and I conducted usability testing with both our wireframes and the high fidelity screens. This allowed us to work through kinks in the user flows, iron out touch targets and identify missing features.
Test Finding
We identified an edge case scenario where a Retail Partner would need to create a pre-scheduled pick up order. Our original user flow did not account for this scenario. We tested a few options for how to integrate it into the existing user flow.
Solution
Working with the CEO, we determined to place the button for a scheduled order pick up in the navigation bar. Since this is an edge case, it did not need to be in the home screen. It also required an updated flow to include a secondary location, if the pick up point was not their primary location.
Test Finding
The impact page is a secondary feature of our app. It was not part of the hero journey but enhanced the importance of food distribution and reinforced the value of Be One to Give. When designing the impact page, we did not account for broken down data points and multiple views.
Solution
In a second round of revisions, the impact page would include different view points of each data. It would allow the user to view their impact for individual orders, month to date, and year to date.
TEST
Usability Testing
My team and I conducted usability testing with both our wireframes and the high fidelity screens. This allowed us to work through kinks in the user flows, iron out touch targets and identify missing features.
Test Finding
We identified an edge case scenario where a Retail Partner would need to create a pre-scheduled pick up order. Our original user flow did not account for this scenario. We tested a few options for how to integrate it into the existing user flow.
Solution
Working with the CEO, we determined to place the button for a scheduled order pick up in the navigation bar. Since this is an edge case, it did not need to be in the home screen. It also required an updated flow to include a secondary location, if the pick up point was not their primary location.
Test Finding
The impact page is a secondary feature of our app. It was not part of the hero journey but enhanced the importance of food distribution and reinforced the value of Be One to Give. When designing the impact page, we did not account for broken down data points and multiple views.
Solution
In a second round of revisions, the impact page would include different view points of each data. It would allow the user to view their impact for individual orders, month to date, and year to date.
TEST
Usability Testing
My team and I conducted usability testing with both our wireframes and the high fidelity screens. This allowed us to work through kinks in the user flows, iron out touch targets and identify missing features.
Test Finding
We identified an edge case scenario where a Retail Partner would need to create a pre-scheduled pick up order. Our original user flow did not account for this scenario. We tested a few options for how to integrate it into the existing user flow.
Solution
Working with the CEO, we determined to place the button for a scheduled order pick up in the navigation bar. Since this is an edge case, it did not need to be in the home screen. It also required an updated flow to include a secondary location, if the pick up point was not their primary location.
Test Finding
The impact page is a secondary feature of our app. It was not part of the hero journey but enhanced the importance of food distribution and reinforced the value of Be One to Give. When designing the impact page, we did not account for broken down data points and multiple views.
Solution
In a second round of revisions, the impact page would include different view points of each data. It would allow the user to view their impact for individual orders, month to date, and year to date.
TEST
Usability Testing
My team and I conducted usability testing with both our wireframes and the high fidelity screens. This allowed us to work through kinks in the user flows, iron out touch targets and identify missing features.
Test Finding
We identified an edge case scenario where a Retail Partner would need to create a pre-scheduled pick up order. Our original user flow did not account for this scenario. We tested a few options for how to integrate it into the existing user flow.
Solution
Working with the CEO, we determined to place the button for a scheduled order pick up in the navigation bar. Since this is an edge case, it did not need to be in the home screen. It also required an updated flow to include a secondary location, if the pick up point was not their primary location.
Test Finding
The impact page is a secondary feature of our app. It was not part of the hero journey but enhanced the importance of food distribution and reinforced the value of Be One to Give. When designing the impact page, we did not account for broken down data points and multiple views.
Solution
In a second round of revisions, the impact page would include different view points of each data. It would allow the user to view their impact for individual orders, month to date, and year to date.
TEST
Usability Testing
My team and I conducted usability testing with both our wireframes and the high fidelity screens. This allowed us to work through kinks in the user flows, iron out touch targets and identify missing features.
Test Finding
We identified an edge case scenario where a Retail Partner would need to create a pre-scheduled pick up order. Our original user flow did not account for this scenario. We tested a few options for how to integrate it into the existing user flow.
Solution
Working with the CEO, we determined to place the button for a scheduled order pick up in the navigation bar. Since this is an edge case, it did not need to be in the home screen. It also required an updated flow to include a secondary location, if the pick up point was not their primary location.
Test Finding
The impact page is a secondary feature of our app. It was not part of the hero journey but enhanced the importance of food distribution and reinforced the value of Be One to Give. When designing the impact page, we did not account for broken down data points and multiple views.
Solution
In a second round of revisions, the impact page would include different view points of each data. It would allow the user to view their impact for individual orders, month to date, and year to date.
DESIGN
Style Guide
DELIVER
Final Design
The final designs were passed off as a fully shipped product to the engineering team. We included a component library, branding guidelines, and a redlined structure for each page. We successfully integrated both apps into a hybrid app.
DESIGN
Style Guide
DELIVER
Final Design
The final designs were passed off as a fully shipped product to the engineering team. We included a component library, branding guidelines, and a redlined structure for each page. We successfully integrated both apps into a hybrid app.
DESIGN
Style Guide
DELIVER
Final Design
The final designs were passed off as a fully shipped product to the engineering team. We included a component library, branding guidelines, and a redlined structure for each page. We successfully integrated both apps into a hybrid app.
DESIGN
Style Guide
DELIVER
Final Design
The final designs were passed off as a fully shipped product to the engineering team. We included a component library, branding guidelines, and a redlined structure for each page. We successfully integrated both apps into a hybrid app.
DESIGN
Style Guide
DELIVER
Final Design
The final designs were passed off as a fully shipped product to the engineering team. We included a component library, branding guidelines, and a redlined structure for each page. We successfully integrated both apps into a hybrid app.
DESIGN
Style Guide
DELIVER
Final Design
The final designs were passed off as a fully shipped product to the engineering team. We included a component library, branding guidelines, and a redlined structure for each page. We successfully integrated both apps into a hybrid app.
Nice to see you here!
Let's work together.
Website made with love by me!
Nice to see you here!
Let's work together.
Website made with love by me!
Nice to see you here!
Let's work together.
Website made with love by me!
Nice to see you here!
Let's work together.
Website made with love by me!