FACEYOUTH Charity Website

01

Project Brief

Senior Product Designer

Role

1 Product Manager

1 developer

Users and

Me

Team

6 weeks

Timeline

Lead UX/UI Design

User Research

Interface Design

Interaction Design

Prototyping

Usability Testing

My Contribution

FACEYOUTH Charity Website

FACEYOUTH Charity needed a website overhaul to amplify its reach, improve user engagement, and streamline the donation and volunteer processes. The goal was to create a platform that aligns with FACEYOUTH’s mission of empowering underprivileged youth while providing a seamless, accessible, and engaging experience for all users.

Challenges

02

  1. Complex and confusing donation process.

  2. Lack of clear communication on how to volunteer.

  3. Limited accessibility options, excluding a significant portion of the target audience.

Identified Problems:

  1. How can we simplify the donation process to increase contributions?

  2. What changes are needed to make volunteer opportunities more accessible

  3. How can we improve the website's accessibility to cater to all users?

Key Questions:

Approach + Solution

03

Approach

  1. Analyzed competitors’ websites for best practices in header design.

  2. Conducted user interviews to gather feedback on the current header design.

Research & Insights:

  1. Users found the old header cluttered and confusing.

  2. A simplified, more intuitive layout would improve user navigation.

  3. There was no clear call-to-action in the header.

Key Findings:

Persona

  1. Designed wireframes focused on a clean, minimalist header.

  2. Created prototypes with easy-to-access links to key pages.

  3. Added a clear call-to-action button.

Design & Prototyping:

  1. Streamlined menu options for better usability.

  2. Added a prominent donate button for easy access.

  3. A visually distinct call-to-action button.

Features Implemented:

Solution

  1. Simplified navigation that reduces cognitive load.

  2. Implemented a clean and intuitive menu structure, making it easy for users to find information quickly.

  3. Accessible design with high contrast and keyboard navigation support.

Header Section Core Functionality:

  1. Increased user engagement and retention by 25%.

  2. Improved user navigation efficiency by 40%.

  3. Increased donations through the prominently placed donate button.

Impact:

Approach

  1. Conducted A/B testing on various donation page designs.

  2. Analyzed user feedback to identify pain points in the donation process.

Research & Insights:

  1. The donation process was too complicated.

  2. Users lacked trust in the security of their payments.

  3. Users preferred a straightforward donation process with minimal steps.

Key Findings:

User Journey Map

  1. Created prototypes with a clear, simple donation process.

  2. Added trust signals like secure payment icons.

  3. Designed sections that detail how donations impact the community.

Design & Prototyping:

  1. A streamlined donation form with multiple payment options.

  2. A section explaining the impact of donations.

  3. Secure, trusted payment gateways.

Features Implemented:

Solution

  1. An easy-to-use, secure donation form.

  2. Transparency about donation allocation.

  3. Multiple payment options for convenience.

Donation Page Core Functionality:

Before

After

  1. Increased donations through an optimized, user-friendly design.

  2. Enhanced trust in the organization with clear communication of impact.

  3. Higher donor retention rates.

Impact:

Approach

  1. Interviewed current volunteers to understand what information they need.

  2. Analyzed the effectiveness of the existing volunteer sign-up process.

Research & Insights:

  1. The sign-up process was lengthy and confusing.

  2. Volunteer opportunities were not clearly communicated.

  3. Clear information about the commitment required encourages sign-ups.

Key Findings:

User Journey Map

  1. Redesigned the sign-up form to be more user-friendly.

  2. Clearly outlined volunteer opportunities.

  3. Included filters to help users find relevant opportunities.

Design & Prototyping:

  1. Simplified and easy volunteer sign-up process.

  2. A filterable list of volunteer opportunities.

  3. Detailed descriptions of each role, including time commitment.

Features Implemented:

Solution

  1. A user-friendly interface that matches volunteers with opportunities.

  2. Comprehensive information on each opportunity.

  3. Integrated application process for ease of use.

Volunteer Page Core Functionality:

Before

After

  1. Increased volunteer engagement and sign-ups.

  2. Better matching of volunteers to roles, improving satisfaction.

  3. Streamlined management of volunteer applications.

Impact:

04

Result

  1. The redesigned website significantly increased user engagement, donations, and volunteer sign-ups.

  2. FACEYOUTH’s branding is now consistent across all digital platforms, reinforcing their mission.

  3. The site’s accessibility features have broadened the audience, ensuring no one is left behind.

Outcome:

  1. The project successfully addressed the initial challenges, resulting in a website that is both functional and inspiring.

  2. Future updates will focus on incorporating user feedback and enhancing mobile responsiveness.

Reflection:

Process

05

  1. Extensive collaboration with the FACEYOUTH team and users ensured the design met all their needs.

  2. Iterative testing and feedback loops were crucial in refining the final product.

Behind the Scenes:

  1. Continue monitoring the site’s performance and make iterative improvements based on user feedback.

  2. Explore integrating more advanced features, such as personalized content and AI-driven user experiences

  3. The development of a mobile app to further expand FACEYOUTH's digital presence.

Next Steps:

For more detailed insights and the complete design process, feel free to explore my portfolio further or contact me directly.