Hope charity

Hope charity

Hope charity

Responsible Website

Responsible Website

UX/UI design

My Role

UX/UI designer from conception to delivery

UX/UI designer from conception to delivery

UX/UI designer from conception to delivery

Tools

Tools

Figma, Photoshop

What i did

What i did

  • Research

  • Wireframing

  • Prototyping

  • Research

  • Wireframing

  • Prototyping

  • Usability studies

  • Iterating on designs

  • Usability studies

  • Iterating on designs

Prototype

The problem:

To design a website to boost its global visibility, facilitate online donations, and educate visitors about its issues.

To design a website to boost its global visibility, facilitate online donations, and educate visitors about its issues.

The Background

Relies heavily on traditional methods of communication and fundraising, which limits its reach and effectiveness.

The Challenge

Hope Charity faces significant obstacles in reaching a wider audience, securing funds, and educating the public:

  • Struggles to raise awareness and garner support on a global scale.

  • Traditional means are limited for making secure and swift online donations.

  • Difficulty in improving productivity without a strong digital presence.

  • Difficulty in engaging and informing supporters about the cause.

The Challenge

Hope Charity faces significant obstacles in reaching a wider audience, securing funds, and educating the public:

  • Struggles to raise awareness and garner support on a global scale.

  • Traditional means are limited for making secure and swift online donations.

  • Difficulty in improving productivity without a strong digital presence.

  • Difficulty in engaging and informing supporters about the cause.

Research

I conducted a secondary research to understand what users want in a charity website and the pain point they face

User Expectations

Ease of Use and Navigation

Compelling Content

Secure and Versatile Donation Options

Mobile Optimization

Transparency and Detailed Information

Pain Points

Complex Donation Processes

Poor User Interface Design

Insufficient Engagement Opportunities

Lack of Updated Content

What specific features and functionalities do you most value in a charity website?

"I value clear information about how my donations are used. I also appreciate a simple, quick donation process with multiple payment options."

"I look for transparency in financial reporting and updates on projects. An easy way to sign up for volunteering opportunities is also important to me."

"I will appreciate a simple, quick donation process with multiple payment options."

What are the main obstacles you face when attempting to donate or engage with a charity online?

"Complicated donation forms with too many steps can be frustrating. I’ve abandoned donations before because of this."

"It’s hard to find updated information on some charity websites. If I see outdated content, I assume the charity isn’t active or effective."

Goals

Frustration

  • Clearly understand how their donations are being used and the impact of their contributions.

    Transparency and Impact

    Complex donation forms

    Users are frustrated by complicated donation processes that require too many steps

  • Donate quickly and securely without encountering complex forms or lengthy processes.

    Seamless donation process

    Outdated Content

    Users are discouraged by websites that are not regularly updated with fresh conten

  • Compelling stories, and images that emotionally connect them to the charity’s work.

    Engaging content

    Lack of Engagement

    Users find it challenging to discover how they can get involved beyond making donations

  • Access to information about how they can get involved like volunteering or attending events.

    Volunteer and Participation

    Poor Navigation

    Users struggle with websites that are difficult to navigate, making it hard to find crucial information

  • Clearly understand how their donations are being used and the impact of their contributions.

    Transparency and Impact

    Complex donation forms

    Users are frustrated by complicated donation processes that require too many steps

  • Donate quickly and securely without encountering complex forms or lengthy processes.

    Seamless donation process

    Outdated Content

    Users are discouraged by websites that are not regularly updated with fresh conten

  • Compelling stories, and images that emotionally connect them to the charity’s work.

    Engaging content

    Lack of Engagement

    Users find it challenging to discover how they can get involved beyond making donations

  • Access to information about how they can get involved like volunteering or attending events.

    Volunteer and Participation

    Poor Navigation

    Users struggle with websites that are difficult to navigate, making it hard to find crucial information

I identified exactly what the learners were facing.

Don’t want a complex donation processes

Want detailed information regarding how my donations are utilized

Want to be able to volunteer

Want engaging content that tells the stories of their works

Want the interface be ease to use

Difficulty finding social proof to validate the charity impact

I discovered major constraints during my research.

  • 73% of users want an easy-to-use interface and a straightforward donation.

  • 68% of users want information on donation usage and volunteer opportunities.

  • Most users want engaging content with impactful stories and social proof.

  • 73% of users want an easy-to-use interface and a straightforward donation.

  • 68% of users want information on donation usage and volunteer opportunities.

  • Most users want engaging content with impactful stories and social proof.

Ideation

I created crazy eight to explore lots of ideas for the charity website.

I created crazy eight to explore lots of ideas for the charity website.

Simplified donation form

Progress bar for the donation process

Online volunteer portal

Testimonial and Review Section

  • Simplified donation form

  • Progress bar for the donation process

  • Online volunteer portal

  • Testimonial and Review Section

  • Simplified donation form

  • Progress bar for the donation process

  • Online volunteer portal

  • Testimonial and Review Section

Wireframing:

Sketches & low fidelity mock up

Rapid sketching allowed me to explore design patterns common among website in the competitive landscape, helping me understand which needed to carry over into Hope charity.

Different paper wireframes for the landing page

  • Landing Page

  • About Us /History

  • Program page

  • Program / Education page

  • Get Involve

  • Donate page

  • Volunteer

  • Congratulation page for donation

  • Landing Page

  • About Us /History

  • Program page

  • Program / Education page

  • Get Involve

  • Donate page

  • Volunteer

  • Congratulation page for donation

Usability Test: was tested with 5 users.

Charity mission: Some user weren’t about to easily locate the charity mission.

Program area: User were clicking on the education instead of the learn more

Donate: Some users weren’t able to spot the donation button.

Charity mission: Some user weren’t about to easily locate the charity mission.

Program area: User were clicking on the education instead of the learn more

Donate: Some users weren’t able to spot the donation button.

These issues were addressed in the next high-fidelity iteration.

  • I made changes to improve the accessibility and visibility of the charity mission on the website

  • Added a dedicated section of donation in the landing page just before the footer

  • I made changes to improve the accessibility and visibility of the charity mission on the website

  • Added a dedicated section of donation in the landing page just before the footer

These issues were addressed in the next high-fidelity iteration.

Welcome to Hope charity

  • Landing page

    Get to know Hope Charity

  • About Us page

    View Key information

  • Program page

    Get to know various program

  • Get Involve page

    Ways to assist us

  • Donate page

    Ways to assist us

  • Volunteer page

    Ways to assist us

  • Landing page

    Get to know Hope Charity

  • About Us page

    View Key information

  • Program page

    Get to know various program

  • Get Involve page

    Ways to assist us

  • Donate page

    Ways to assist us

  • Volunteer page

    Ways to assist us

Takeaways

Impact:

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy..

What I learned:

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

Next steps

Conduct more user research to determine any new areas of need.

Conduct more user research to determine any new areas of need.

Conduct more user research to determine any new areas of need.

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

Explore More Work

Set

A mobile and web app for learning to read in a new language. Language apps overlook culture, resulting in poor real-world communication, misunderstandings, and low engagement.

View

H-steakhouse

A mobile menu app for H-Steakhouse, designed to enhance customer experience through digital convenience. Browse, order, and enjoy a personalized dining journey with ease.

View

Trusty

A visual identity for Trusty, a fintech company helping youth succeed

Get in Touch

ikenna.adizua@gmail.com

LinkedIn