PROJECT OVERVIEW
Kai is a start-up that is very concerned about food waste. They want help in designing and streamline the process of food donations by connecting donors with local food banks. Ease of use is key in the experience to ensure repeat use. The proposed application will help food donors from all over to donate their food to those who need it in a timely, safe and easy way.
MY APPROACH
While the project's primary aim was to link food donors with food banks, I wanted to explore possibilities beyond that. I envisioned Kai as a comprehensive platform that bridges the gaps and fosters a sense of community, therefore expanding the app to include the following roles:
-
Business Donors: Simplifying and streamlining the process for companies with surplus food to donate efficiently and regularly.
-
Individual Donors: Offering a quick and easy way for individuals to contribute food.
-
Volunteers: Providing opportunities for community members to support food banks with their time and effort.
-
Food Banks: Equipping food banks with tools to manage donations, coordinate with donors and volunteers, and communicate their needs effectively.
This holistic approach ensures that Kai stands out as a comprehensive solution for food donation and support, addressing the needs of all users in the food donation ecosystem and fostering a cohesive community effort to combat food waste and hunger.
PROJECT GOALS
-
Simplify Donations: Make the food donation process quick and easy for business donors.
-
Foster a community: Connect donors, volunteers, and food banks for seamless coordination.
-
Ensure Accessibility: Design the app to be user-friendly and accessible to everyone.
-
Define the Brand: Create and design the Kai brand to be welcoming, friendly, and associated with freshness and positivity.
THE CHALLENGE
Before diving into the design process for Kai, I anticipated several significant challenges given the project's scope, how I wanted to expand on that and the project goals:
1. Integrating Multiple User Roles:
Unlike typical food donation apps that focus on a single user group, Kai needed to serve diverse roles including business donors, individual donors, volunteers, and food banks. Designing workflows that cater to the unique needs and interactions of each of these personas requires careful planning and consideration.
2. Creating a Cohesive User Experience:
Balancing different users' varied needs and goals while maintaining a unified, intuitive, and engaging user experience. Each user type has specific requirements, and aligning them into a streamlined, cohesive interface is challenging.
3. Building a Brand Identity:
Establishing a welcoming brand for Kai that resonates with all user types is crucial. This involves careful selection of colors, typography, and icons to create an inviting and memorable experience.
4. Future-Proofing and Scalability:
Considering potential future expansions, such as adding features for selling food at a fraction of the cost, requires foresight in designing the app’s structure to be adaptable and scalable.
MY ROLE
Sole UX/UI Designer
Sole UX Researcher
SKILLS
Product strategy
Branding
Wireframing
Site mapping
User Flows
User testing
Prototyping
RESEARCH METHODS
Market research
TIMELINE
9 weeks
TOOLS
Figma
Secondary research
Qualitative research
RESEARCH
RESEARCH METHODS
-
Secondary Research:
Conducted research through news articles, blogs, and industry reports.
-
Competitor Analysis:
Reviewed similar platforms to identify gaps and opportunities for improvement.
-
Interviews:
Conducted with potential users to understand their needs, pain points, and preferences.
-
User Personas:
Created to represent key user groups and guide the design process.
SECONDARY RESEARCH AND COMPETITOR ANALYSIS:
To gain a comprehensive understanding of the food assistance landscape, I conducted secondary research through news articles, blogs, and industry reports. This was useful in familiarizing myself with the needs and pain points of different users within food assistance programs.
I researched user demographics, industry standards, and the unique challenges faced by various personas in the food donation ecosystem. I analyzed both direct and indirect competitors, including platforms like MealConnect, Foody Bag, Food Finder, Food Hero, Share The Meal, Careit, Food Rescue US, Food Rescue Hero, Go Donate, Waste No Food, Food Cloud, Geev, Olio,Too Good to Go, and Food For All. By testing and experimenting with these apps, I searched for inspiration and identified gaps in existing solutions. This exploration helped me understand how these platforms address industry challenges and provided valuable insights into opportunities for innovation in designing Kai.
USER RESEARCH
The target audience for my design caters to the following personas:
-
Individual Donors: People who want to donate food on a one-time or regular basis.
-
Business Donors: Companies with surplus food looking to donate as a one-time or regular basis.
-
Volunteers: Individuals interested in contributing their time and efforts to support food banks.
-
Food Banks: Organizations that collect and distribute food to those in need.
Due to time constraints I focused my research and user flow of my design on the sign up and one-time donation of a Business Donor persona.
INTERVIEWS:
To complement the quantitative and qualitative data from my secondary research, I sought insights from industry professionals who have firsthand experience with food donation and management.
Interview with a VP of Marketing and Non-Profit Founder:
- Profile: A young professional who has worked as VP of marketing for a large company and the founder and president of a non-profit organization called Giving in Paris.
- Method: Conducted a 30-minute remote interview.
Interview with a Cafe Owner:
-
Profile: A co-owner of a sit-down cafe and co-owner of a Firehouse Subs restaurant.
-
Method: Conducted an in-person interview.
KEY INSIGHTS
WANT
-
Impact Visibility
-
Personalization
-
Surplus handling
-
Seamless user experience
-
Scheduled donations email confirmation
-
Control
NEED
-
Real-time updates
-
Capacity management
-
Variety and balance
-
Urgency alert
PAIN
-
Customer expectations
-
Perishable surplus
-
Capacity issues
DEFINE
In developing Kai, the scope extends beyond the initial design prompt by creating an app that serves Food Banks, Volunteers, and Donors. However, for the purposes of this case study and within the constraints of the project, the primary focus is on the business donor persona. This aligns with the business goal of developing a user-friendly application that facilitates easy and efficient food donations for organizations.
Based on insights from secondary research and expert interviews, I developed the persona of Antonio Colombo. Antonio represents the archetype of a business donor:
-
Name: Antonio Colombo
-
Occupation: Restaurant Owner
-
Location: Florida
USER PERSONA
Persona Snapshot:
Antonio is a dedicated and busy restaurant owner who occasionally finds himself with surplus pastries and bread that he wants to donate to his local food bank. He values efficiency and seeks a straightforward, time-saving solution for donating excess food. Antonio wants to understand the impact of his contributions by knowing exactly where his donations are going.
In addition to his occasional surplus, Antonio faces a unique challenge common to many businesses in Florida: frequent power outages. These outages often put him in a position where he must urgently find a way to prevent large quantities of food from going to waste. He needs a quick and reliable method to notify potential recipients and coordinate emergency food donations before it spoils.
IDEATE
USER FLOW
To illustrate a new user's experience, I developed a user task flow that details the steps a business donor takes when signing up on the Kai app. This flow captures the critical touchpoints and interactions, ensuring that the onboarding process is smooth and intuitive for businesses looking to donate food.
WIREFRAMES
Given the diverse roles of the users, I decided to introduce the app with a clear and engaging onboarding flow that caters to each user type.
I began by sketching various concepts to visualize the app's interface and structure. My primary goal was to create an intuitive and effortless experience, especially for busy business owners who might not have much time to spare. This led me to focus on a clean, minimalistic design that simplifies the donation process and makes it as straightforward as possible.
DESIGN
BRANDING
In designing Kai, I aimed to create an inviting and engaging experience, resonating with the diverse community of users it serves, business donors, volunteers, and food banks, supporting the app’s mission to connect communities and foster positive interactions around food donations.
The branding of Kai reflects its core values: community, accessibility, and nourishment. By using a thoughtful blend of colors, fonts, gifs, and icons, I aimed to create a platform that serves its functional purpose and brings a sense of joy and satisfaction to its users.
To achieve this, I focused on a few key elements:
COLOR PALETTE
I chose a vibrant and friendly color palette inspired by the rich hues of fresh fruits and vegetables. These colors evoke a sense of freshness and vitality, encouraging users to associate Kai with positive, nourishing experiences. The palette is designed to feel warm and welcoming, promoting a sense of community and collaboration. Each color is carefully selected to reflect the variety and abundance of foods found in a fridge, symbolizing the bounty that Kai helps to distribute to those in need.
TYPOGRAPHY
For the app's typography, I chose sans-serif fonts, Poppins and SF Pro Text, known for their clarity and readability. These fonts were selected to provide a clean, modern look while ensuring that text is easy to read across different screen sizes and resolutions.
LOGO
I kept the KAI logo sans serif, using Poppins Bold typography, which is modern and friendly yet strong. The logo features primary colors commonly found in food, creating a sense of familiarity and warmth. The four different hands represent inclusivity, each holding a puzzle piece that fits together perfectly. This symbolizes the sense of community and collaboration central to Kai's mission, emphasizing that we are all united in the fight against hunger.
VISUAL ELEMENTS
To enhance the app’s visual appeal, I integrated gifs and multicolor icons sourced from Lottiefiles, Freepik on Flaticon.com. These gifs and icons add a layer of depth and playfulness, making the app more visually engaging than many traditional food donation platforms. The icons not only enrich the aesthetic but also aid in navigation and user interaction by clearly representing various functionalities and sections of the app while the gifs make the app more engaging and lively. This visual diversity contributes to making the user interface welcoming and enjoyable, encouraging users to explore and engage with Kai’s features.
STYLE LIBRARY
USER-CENTRIC DESIGN DECISIONS
-
User Identification and Onboarding Flow:
To immediately identify the type of user—whether a business donor, food bank, or individual donor—the onboarding process begins with a set of questions before the registration form. I chose this strategy to:
Tailor the Experience: Deliver relevant content and options based on the user's role, ensuring a personalized and intuitive journey.
Streamline Navigation: Provide direct paths to pertinent features, reducing unnecessary steps and enhancing clarity.
Increase Engagement: Build an early connection by showing users that their specific needs are understood and prioritized.
Collect Efficient Data: Segment users from the start for better data analysis and feature targeting.
Simplify Registration: Display only relevant registration fields, avoiding user overwhelm with irrelevant questions.
-
Form Structure: Initially, I considered a single comprehensive form for donors to input their donation information. However, to avoid overwhelming the users, I opted for a multi-step form. This approach breaks down the process into manageable steps, making it easier for users to digest and complete each section without feeling burdened.
-
Map and List View: Users can browse and select nearby food banks.
-
Filters: Quick access to filter options (e.g., distance, food bank needs, services).
-
Food Bank Profiles:
Detailed Information: Contact details, services offered, and donation requirements.
Statistics and Impact: Information on meals provided, community impact, and more.
-
Donation Process:
Step-by-Step Guidance: Clear instructions and progress indicators for making a donation.
Flexible Scheduling: Options for immediate or scheduled donations, including pickup or drop-off.
Review and Submit: Summary of donation details with the ability to edit before submission
-
Home Screen and Emergency Alert Feature:
In my initial sketches, the idea of an emergency alert feature was not included. However, during a user interview with a café owner, I learned about the need to quickly distribute food during unexpected situations, such as power outages. This feedback led to the inclusion of an emergency alert feature, allowing businesses to notify food banks and volunteers to collect surplus food urgently. This feature became an integral part of the app, addressing a critical user need that was not initially apparent.
-
Personalized Dashboard: Displays key information and quick actions relevant to the user’s role.
-
Recent Activity: Highlights recent donations, volunteer opportunities, and messages.
-
Focus on Donations:
During the conceptual phase, I contemplated adding a feature where businesses could choose to either donate surplus food or sell it at a reduced price. Ultimately, I decided to align with the project’s original scope and focus solely on donations. This decision was driven by the need to provide a streamlined and efficient donation process that supports the primary goal of connecting businesses with food banks. This also helps the team building this application stay aligned with the mission.
UX IMPLEMENTATION
Based on my research, I identified several common frustrations among users. Here are the design decisions I implemented to address these pain points:
Donors Want to See Their Impact:
“As a donor, I have no idea where my donations are going and I don’t get to see the impact I am making.”
Solution: To enhance transparency and engagement, I designed the app to interconnect donors, volunteers, and food banks, allowing them to see how their actions impact others.
-
Impact Dashboard: Under the user Profile tab, donors can access a dashboard displaying their impact metrics, including the total pounds of food donated, the number of meals distributed, the number of people fed, and the amount of CO2 saved.
-
Visual and Emotional Engagement: This feature encourages donors to form a stronger emotional connection with their contributions. It also gamifies the donation process, motivating donors to reach certain goals, earn badges, and share their achievements on social media or within their business.
-
Feedback and Gratitude: A section on the dashboard allows food banks to leave thank-you notes for donors, fostering positive reinforcement and encouraging repeat donations.
Food Banks Need Better Donation Management
“As a food bank, it’s a shame that we get so many of the same food items, especially since we don’t always have the adequate storage or distribution capacity for it.”
Solution: To help food banks manage their donations effectively and ensure a balanced variety of items:
-
Needs Posting: Food banks can post their current needs, enabling donors to tailor their contributions to these specific requirements. This helps prevent overstocking of certain items and understocking of others.
-
Donor Guidance: Donors can view food bank profiles and their accepted items before making a donation. This alignment helps both parties manage donations more efficiently.
-
Donation Form: The donation process includes a multi-step form where donors select from the list of accepted items, specify the amount, and add descriptions if necessary. This structured approach simplifies the donation process.
-
Guidelines and Communication: Donors can access food bank guidelines while filling out the donation form and communicate directly with food banks through in-app messaging, ensuring smooth coordination.
Organizations Need Simplified Donation Processes
“As a member of an organization, one of the most time-consuming things we do is segmenting donation items and figuring out how we will distribute it evenly.”
Solution: To streamline the donation process and reduce the workload for food banks and volunteers:
-
Detailed Donation Information: Donors provide detailed information about the food items, including type, amount, and storage requirements. This helps volunteers prepare appropriately for pickups.
-
Efficient Coordination: This information allows food banks to prepare for incoming donations, saving time on segmentation and enabling efficient storage and distribution. It also helps maintain a log of all incoming items for better inventory management.
Handling Emergency Situations in Florida
“We often have power outages in Florida, and those are the times we have the most food that ends up going to waste.”
Solution: Recognizing the unique challenges faced by businesses in Florida due to frequent power outages:
-
Emergency Alert Feature: I added an “Urgent Alert” button on the home screen and within the “Donate” section. This feature allows business donors to quickly send out alerts when they have surplus food that needs immediate pickup to prevent spoilage.
-
Dual Placement for Accessibility: The button’s presence on both the home screen and the “Donate” screen ensures quick and easy access during emergencies. The home screen button includes a tooltip for clarity without taking up too much space, while the “Donate” screen button provides a detailed explanation.
-
Prompt Response: This feature enables rapid response from food banks and volunteers maximizing the chances of salvaging food that might otherwise go to waste.
ACCESSIBILITY
In designing Kai, accessibility was not an afterthought but a fundamental aspect of the process. From color contrast and typography to intuitive user flows, form validation, and touch targets, each element was crafted with inclusivity in mind. Here’s how I approached accessibility in the design process:
-
Color Contrast:
I prioritized high color contrast throughout the app to ensure readability and usability for users with visual impairments. Each color used in the app was tested to meet or exceed the Web Content Accessibility Guidelines (WCAG) AA standard for contrast ratios. This ensures that text and interactive elements are easily distinguishable from their backgrounds, enhancing visibility for all users, including those with color blindness or low vision.
-
Typography:
For the app's typography, I chose sans-serif fonts, Poppins and SF Pro Text, known for their clarity and readability. These fonts were selected to provide a clean, modern look while ensuring that text is easy to read across different screen sizes and resolutions. The consistent use of these fonts helps maintain a straightforward and professional appearance, reducing cognitive load for users who may struggle with more decorative or complex typefaces.
-
Straightforward User Flow:
I designed Kai with a simple and intuitive user flow to make navigation as straightforward as possible. The aim was to minimize the number of steps required to complete any task, whether it's donating food, signing up, or finding a nearby food bank. By simplifying the user journey and reducing potential points of confusion, I sought to create an experience that is accessible and user-friendly for people with varying levels of tech-savviness, including those who may be new to using mobile apps.
-
Touch Targets and Navigation:
In addition to visual considerations, I ensured that touch targets, such as buttons and interactive elements, are appropriately sized for easy tap access. This is especially important for users with motor impairments or those who navigate the app using assistive technologies. Clear, consistent navigation and easily recognizable icons contribute to a smoother and more accessible user experience.
-
Form Validation and Feedback:
To help users understand when they need to complete a form before proceeding, buttons are greyed out if the required fields are not filled out. This visual cue clearly communicates to the user that they cannot move forward until all necessary information is provided. This approach not only prevents errors but also guides users through the process, making it easier for everyone to successfully complete their tasks.
TEST
USABILITY TEST PLAN
Targeted Testing with Business Donor Persona:
Users were given a specific prompt to act as the business donor persona, Antonio Colombo. They were asked to complete the task of signing up on the Kai app and making a donation to the nearest food bank, with the understanding that they would deliver the donation themselves.
Feedback Collection:
Throughout this process, I gathered qualitative feedback on the ease of signing up, navigating the app, and completing the donation process. Participants provided insights into what aspects of the app were intuitive and which areas needed refinement.
USABILITY TEST RESULTS
User testing of the Kai app prototypes yielded predominantly positive outcomes, with a few minor issues that provided valuable insights for future iterations.
Successful Onboarding and Donation Process:
-
Onboarding: All users missed the “Skip” option that was placed at the top right corner of the onboarding welcome screens. Other than that, users had no significant issues with the onboarding and sign-up process. They found it intuitive and straightforward to create an account as a business donor on the Kai app.
-
Ease of Donation: Once users selected which food bank to donate to, they found the donation process smooth and easy to follow. The multi-step form was effective in guiding them through the necessary steps without overwhelming them.
-
Positive Feedback: Overall, users reported a very good experience. They appreciated the intuitive design and found the app easy to navigate, which is crucial for encouraging repeat usage.
Map Functionality on the Food Bank Map Screen:
-
Issue Encountered: During the task of finding their nearest food bank, users initially tried to interact with the map on the Food Bank Map screen. Since the map was a non-functional placeholder screenshot in the Figma prototype, users were unable to utilize it to pinpoint their location or view nearby food banks.
-
User Behavior: The majority of users instinctively attempted to use the map for navigation. When they realized the map was not functional, they then tried to swipe up to view the list of food banks. The swipe-up function in the Figma prototype was not very smooth, leading to some difficulties.
-
Lesson Learned: The key lesson here was that my initial assumption was that users would use the filter and sort tabs above the map, especially the "by distance" tab, as their primary method for finding the nearest food bank. However, testing revealed that most users preferred to use the map for this purpose. This insight highlights the importance of providing intuitive, interactive map features.
User Suggestions:
-
Email Receipts: One user, a café owner, suggested adding an email receipt feature after scheduling a donation. This would provide a formal record and acknowledgment of their contribution, enhancing their satisfaction and aiding their record-keeping.
-
Quantity Screen: One user struggled with understanding the "Quantity" screen's descriptions for selecting donation sizes. For instance, the options included "Small - one to two sheetpans," "Medium - one to two boxes," "Large - three or more boxes," and "Extra large - more than one trip." The user wanted clarification on the size of sheetpans and the dimensions of the boxes.
-
Time Picker: On the "Delivery" screen, I originally had "important guidelines for drop off" at the bottom of the screen, which included times the food bank accepted donations. A user suggested this information be given prior to the user choosing a donation time so that they can choose a donation time within the appropriate time frame. They also suggested the time picker not allow the user to select times outside of that time frame.
-
Past Donations and Frequency Reminder: The user suggested having past donations displayed at the top of the home screen with the option to reschedule another donation.
ITERATIONS
-
Onboarding: I moved the “Skip” option to underneath the “Continue” button at the bottom of the screens instead.
-
Quantity Screen: I revised the descriptions and added tooltips next to each label to provide detailed size and dimension information.
-
Delivery Screen: I moved the "Important guidelines" to be shown prior to the user selecting a drop off time and I greyed out the hours outside of the viable time frames, ensuring users could only select appropriate times for their donations.
REFLECTION
This project presented a unique challenge, as I entered it with minimal knowledge and experience in the field of food donation. The learning curve was steep, requiring extensive research before I could begin the design process.
Going Beyond the Scope:
I aimed to push the boundaries of the project by creating a solution that uniquely catered to all participants in the food donation ecosystem. My goal was to design a one-stop platform that not only met the needs of each persona but also facilitated a seamless and interconnected experience for everyone involved in fighting hunger. This required a deep dive into user research and interviews to hypothesize and craft potential user flows that addressed their specific pain points and needs.
Challenges Encountered:
One of the primary hurdles was the lack of direct competitors offering a comprehensive approach similar to mine. Most existing food donation apps cater to specific user segments, such as volunteers focused on rescuing food or apps dedicated solely to business donors. These apps do not provide an integrated platform for all stakeholders—Donors, Volunteers, and Food Banks—making it difficult to benchmark against a similar user experience. Additionally, some business donor apps had restricted access, requiring registration as an existing business, which limited my ability to explore their user flows fully. Since this project is designed to be a three-person marketplace, designing user flows for each persona and interconnecting them requires alignment on the mission from all stakeholders and a considerable amount of time to bring this project to life.
FUTURE IMPROVEMENTS AND TESTING
Although this app remains a conceptual project, the process has highlighted several areas for future testing and enhancement.
User research: I would conduct user interviews with food banks themselves and get their feedback.
Testing: Much more testing would need to be done with other user personas.
Map: If the app were to go live, a crucial update would be to implement a fully functional map on the Food Bank Map screen, complete with a “current location” feature. This would address the usability issues identified during testing and align with user preferences for map-based navigation over sorting and filtering tabs.
Sort and Filter Menu: Further testing would be essential to evaluate the effectiveness of the sort and filter menu on the map screen. This could involve user feedback and analytics to determine if these features add value or if they should be simplified or removed.
In addition, future iterations of the app would need to explore and design user flows for the other personas. For instance:
-
Volunteer: Designing a flow where a volunteer responds to a business donating food and facilitates the transportation of the donation to the food bank.
-
Individual Donor: Developing a user journey for individuals who want to donate food from their homes to local food banks.
Each of these flows would require thorough research, testing and iteration to ensure they meet the needs of their respective users and integrate seamlessly into the overall system.
Considering Expansion:
Reflecting on the potential of this project, I also see opportunities to explore additional features, besides the idea to give business users the option to either donate or sell surplus food at a reduced cost, that could enhance the app’s functionality and impact:
-
Food Tracking: Implementing a system to track the journey of food donations from donor to recipient, ensuring transparency and accountability. This also allows food banks to track incoming items in real-time, helping them manage inventory and distribution more effectively.
-
Push Notifications: Adding push notifications to keep users informed about donation opportunities, urgent alerts, and updates from their chosen food banks.
-
Tax Relief Receipts: Providing business donors with the option to receive tax relief receipts, simplifying the process of claiming charitable deductions.
CONCLUSION
Overall, this project has been a significant learning experience, demonstrating the importance of user-centered design, especially when tackling complex problems involving diverse user groups. While there is much more to be done to bring this concept to fruition, the insights gained and challenges overcome have established a strong foundation for future development. I look forward to the possibility of further refining and testing this app to make a meaningful impact in combating food insecurity.
