FACEYOUTH Charity Website
01
Project Brief
FACEYOUTH Charity Website
Redesigned FACEYOUTH’s website to expand its reach, enhance user engagement, and simplify donations and volunteer sign-ups. The new platform aligns with FACEYOUTH’s mission to empower underprivileged youth, delivering a seamless, accessible, and engaging experience for all.
Role:
Senior Product Designer and Frontend Developer
Contribution:
Team Lead, User Research, UI Design, Prototyping, Usability Testing, Design System, Frontend Engineering
Team:
Product Manager, Backend Developer, Users and Me
Timeline:
6 weeks
02
Challenges
Identified Problems:
-
Complex and confusing donation process.
-
Lack of clear communication on how to volunteer.
-
Limited accessibility options, excluding a significant portion of the target audience.
Key Questions:
-
How can we simplify the donation process to increase contributions?
-
What changes are needed to make volunteer opportunities more accessible?
-
How can we improve the website's accessibility to cater to all users?
03
Approach + Solution
Header Section
Approach
Research & Insights:
-
Analyzed competitors’ websites for best practices in header design.
-
Conducted user interviews to gather feedback on the current header design.
Key Findings:
-
Users found the old header cluttered and confusing.
-
A simplified, more intuitive layout would improve user navigation.
-
There was no clear call-to-action in the header.
Primary Persona: George
Design & Prototyping:
-
Designed wireframes focused on a clean, minimalist header.
-
Created prototypes with easy-to-access links to key pages.
-
Added a clear call-to-action button.
Features Implemented:
-
Streamlined menu options for better usability.
-
Added a prominent donate button for easy access.
-
A visually distinct call-to-action button.
Solution
Header Section Core Functionality:
-
Simplified navigation that reduces cognitive load.
-
Implemented a clean and intuitive menu structure, making it easy for users to find information quickly.
-
Accessible design with high contrast and keyboard navigation support.
Impact:
-
Increased user engagement and retention by 25%.
-
Improved user navigation efficiency by 40%.
-
Increased donations through the prominently placed donate button.
Donation Page
Approach
Research & Insights:
-
Conducted A/B testing on various donation page designs.
-
Analyzed user feedback to identify pain points in the donation process.
Key Findings:
-
The donation process was too complicated.
-
Users lacked trust in the security of their payments.
-
Users preferred a straightforward donation process with minimal steps.
Secondary Persona: Ada
Design & Prototyping:
-
Created prototypes with a clear, simple donation process.
-
Added trust signals like secure payment icons.
-
Designed sections that detail how donations impact the community.
Features Implemented:
-
A streamlined donation form with multiple payment options.
-
A section explaining the impact of donations.
-
Secure, trusted payment gateways.
Solution
Donation Page Core Functionality:
-
An easy-to-use, secure donation form.
-
Transparency about donation allocation.
-
Multiple payment options for convenience.
Impact:
-
Increased donations through an optimized, user-friendly design.
-
Enhanced trust in the organization with clear communication of impact.
-
Higher donor retention rates.
Volunteer Page
Approach
Research & Insights:
-
Interviewed current volunteers to understand what information they need.
-
Analyzed the effectiveness of the existing volunteer sign-up process.
Key Findings:
-
The sign-up process was lengthy and confusing.
-
Volunteer opportunities were not clearly communicated.
-
Clear information about the commitment required encourages sign-ups.
User Journey Map: George
Design & Prototyping:
-
Redesigned the sign-up form to be more user-friendly.
-
Clearly outlined volunteer opportunities.
-
Included filters to help users find relevant opportunities.
Features Implemented:
-
Simplified and easy volunteer sign-up process.
-
A filterable list of volunteer opportunities.
-
Detailed descriptions of each role, including time commitment.
Solution
Volunteer Page Core Functionality:
-
A user-friendly interface that matches volunteers with opportunities.
-
Comprehensive information on each opportunity.
-
Integrated application process for ease of use.
Impact:
-
Increased volunteer engagement and sign-ups.
-
Better matching of volunteers to roles, improving satisfaction.
-
Streamlined management of volunteer applications.
04
Result
Outcome:
-
The redesigned website significantly increased user engagement, donations, and volunteer sign-ups.
-
FACEYOUTH’s branding is now consistent across all digital platforms, reinforcing their mission.
-
The site’s accessibility features have broadened the audience, ensuring no one is left behind.
Reflection:
-
The project successfully addressed the initial challenges, resulting in a website that is both functional and inspiring.
-
Future updates will focus on incorporating user feedback and enhancing mobile responsiveness.
05
Process
Behind the Scenes:
-
This project involved extensive user research, iterative design, and rigorous testing.
-
Throughout the design process, from initial sketches to final implementation, every step was tailored to address user needs, align with business goals, and enhance the overall experience.
For more detailed insights and the complete design process, feel free to contact me directly.