Food Education Australia is a non-profit focused on transforming how communities engage with food. Through hands-on programs and educational workshops, they promote wellness, sustainability, and food literacy. Their initiatives empower individuals, especially youth, to make informed food choices, addressing issues like health disparities, sustainability, and social enterprise.
This mockup showcases the redesigned 'Hero section of the Home page'
My role
End-to-End UI/UX Designer collaborating with a Senior Designer and Product Team.
Company
FEA
Industry
Non-profit organization
Timeline
March 21, 2024 - May 10, 2024
Key problems to solve
Streamlining Donation Process
Redesigning the donation flow to make it intuitive and user-friendly, improving conversion rates.
Balancing User Needs
Creating a seamless experience for both donors and volunteers, ensuring the site supports both community engagement and donations.
Enhancing Visual and Content Strategy
Developing persuasive calls to action and a visually compelling homepage to encourage donations and participation
Challenges I encountered…
Creating a Donor-Centric Experience
The biggest challenge was ensuring the website focused primarily on converting visitors into donors, while still providing a smooth user experience without overwhelming them with information.
Optimizing the Donation Flow
Simplifying the donation process to ensure it was fast and intuitive, while maintaining flexibility for users to choose different donation amounts and payment methods, posed a challenge in minimizing potential drop-offs without complicating the user experience.
Persuasive Yet Minimal Content
Balancing between compelling storytelling and clear calls to action for donations was a challenge, as too much content risked deterring users from completing their donation.
Results…
Donation conversions rose by 25% within the first three months post-redesign, reflecting improved engagement and user experience.
Donation drop-offs decreased by 20%, streamlining the process and enhancing user satisfaction.
25%
Donation conversions increase
20%
Decrease in donation drop-offs
Delving deeper into the process…
Competitive Analysis
As part of my design process for Food Education Australia (FEA), I conducted a competitive analysis of platforms such as Food for Soul, Oz Harvest, Red Cross, World Food Programme, Food Bank, Eat Up, and Nutrition Australia. By analyzing their home pages and donation flows, I identified key strengths and areas for improvement. This research uncovered valuable insights and inspired innovative features for FEA’s user experience. I’ve included screenshots from some of these platforms, showcasing impactful features that guided my design decisions, ensuring FEA’s interface integrated best practices while meeting the specific needs of its users.
In-depth Interviews
The interview method was used to deeply understand user needs and expectations , providing valuable insights and feedback. This helped shape the product's functionality, improve existing features , and suggest new ones.
6 Respondents
Group Age- 23 years- 65 years
To better understand our users and design effectively for their needs, I created a user persona based on the insights gathered during research.
User Persona
The solution phase…
I began the solution phase with simple hand-drawn sketches, turning rough ideas into wireframes that shaped the structure. With feedback guiding the process, I refined these into the final designs, focusing on clear navigation and a user-friendly experience that drives donations and volunteer engagement.
Sketches
The 'Homepage' is designed to provide a clear and engaging entry point, highlighting key services, programs, and calls to action such as donate.
I designed clean, mobile-friendly 'Donation pop-ups' that appear when users click "Donate." The layout is simple and intuitive, optimized for seamless use on smaller screens.
The "Who We Are" page highlights the brand’s story, fostering trust and connection with users by visually emphasizing their mission-driven work.
Usability Testing…
This page showcases the initial design of the 'Home page's Hero section', which was revised after usability testing.
01
Mission Clarity
5 users stopped at the hero section but couldn’t understand what Food Education Australia stood for. The visuals drew them in, but the purpose wasn’t clear. This revealed a key insight: we needed a stronger message that instantly conveyed our mission of food education and empowerment.
02
Call to action for volunteering
Four out of six users struggled to find the volunteering option on the homepage. The option is located in the header under "Get Involved," but users didn't click on it and instead searched the homepage. I didn't include it elsewhere on the page. This highlighted the need for a more prominent and intuitive "Volunteer" button to improve user engagement and accessibility.
This page displays the initial design of the 'Impact page', prior to user feedback and revisions
03
Impact Statistics
3 users expressed the need for statistics on the impact page. The lack of concrete numbers left them uncertain about the organization's credibility. They wanted to see measurable data, like the number of people impacted or programs delivered, to build trust and confidence in Food Education Australia's effectiveness.
The design and the decisions…
I wanted users to feel a deep connection with FEA’s mission. Through clear messaging and visuals, I aimed to create an emotional bond, making it easy for visitors to understand the cause and feel inspired to support. The design focused on creating this connection while keeping the donation process simple. I aimed to ensure users could easily donate via phone by designing for both web and mobile versions.
In this section, I outline four distinct user experience challenges I encountered during the design process. For each problem, I’ve included the solutions I developed , followed by the corresponding images that illustrate the final designs.
01
Problem:
I had to create a strong first impression by balancing engaging visuals and clear messaging to convey FEA’s mission effectively.
Solution:
I envisioned the homepage as more than just an introduction; it serves as a gateway for visitors to genuinely connect with FEA's story and mission. I have incorporated the following key features into my home page design to enhance user engagement and improve usability:
1.Dynamic Hero Section Animation: The hero section features animated headings that display these core messages sequentially, capturing users’ attention and clearly conveying FEA’s purpose.
2.Intuitive Navigation: I included micro-interactions to enhance navigation, making the site enjoyable and user-friendly.
3.Call to Action Buttons: Based on usability testing feedback, I incorporated the volunteering section into my homepage. I placed the "Explore Actions" and "See Impact" buttons next to each other to guide users from emotional engagement with the organization's mission to immediate action. This proximity improves the user flow, encouraging them to first connect with the cause and then take action, creating a seamless and intuitive experience.
4.Building Trust: A certified NGO badge is prominently displayed to establish credibility and reassure users of FEA’s legitimacy.
Final design Home page
02
Problem:
I had to create an emotional connection that motivates users to donate, while ensuring the donation process remained simple and intuitive.
Solution:
I prioritized a clean and user-friendly layout.
1.Giving card: Emphasizing the significance of giving in the donation process, based on usability testing, creates an emotional connection with individuals. It strengthens their sense of purpose and tie to the cause, motivating them to donate.
2.Dynamic Donations Ticker: A scrolling bar at the bottom shows live donation updates, fostering a sense of community and urgency.
3.Prominent CTA: The "Donate Now" button stands out in the hero section, encouraging users to take immediate action.
4.FAQs Section: A well-organized "Find Answers to Your Questions" section provides clear answers to common queries about donations and FEA's mission, enhancing transparency.
Final design Donation page
03
Problem:
Designing a streamlined donation flow across all interfaces that allows users to quickly select an amount and feel confident in their contribution.
Solution:
To simplify the donation process, I crafted a mobile-first, clean pop-up design that offers users clear options with minimal effort. Key amounts are displayed upfront, while the "other amount" option and an impact update checkbox personalize the experience. The bright CTA guides users seamlessly to complete their donations, enhancing usability and encouraging contributions.
Final design Donation pop-up
04
Problem:
Users wanted to see real evidence of the organization’s impact, but overwhelming them with too much information risked losing their attention.
Solution:
Instead of overloading the home page with all the impact data, I dedicated a separate impact page. This page featured visually appealing infographics and heartfelt testimonials, allowing users to explore FEA’s achievements in a more focused and engaging way. This solution helped maintain a clean and clear homepage while offering users a deeper look into FEA’s positive impact.
Final design Statistics 'Impact page'
Key Learnings…
Throughout my time working for this project, I've learned the importance of gathering as much user feedback in the early phase of a project. In this project, we started to gather user feedback a few weeks after we started the project, which provided strong first-hand evidence on design decision-making.
