sylv.

Boosting A Healthier, Happier Me's Donation and Volunteer Engagement Through Website Redesign

Boosting A Healthier, Happier Me's Donation and Volunteer Engagement Through Website Redesign

Boosting A Healthier, Happier Me's Donation and Volunteer Engagement Through Website Redesign

TLDR

TLDR

I led website redesign for a 501(c)(3) nonprofit organization based in Los Angeles, A Healthier, Happier Me. This was my first client project. Some challenges I faced included scope creep, collaborating effectively with the cross-functional team (founder, marketer, site developer) while also facing constraints like time and limited budget resources. Despite all of this, the site successfully launched in January 2024 and overall feedback from the organization was positive.

Project Type

Client Project

Role

UX/UI Designer

Timeframe

2023 (3 months)

PROBLEM

PROBLEM

A Healthier, Happier Me is a nonprofit organization based in Los Angeles. The website lacked visual appeal and an intuitive user experience making it challenging for the organization to build trust with new visitors.

A Healthier, Happier Me is a nonprofit organization based in Los Angeles. The website lacked visual appeal and an intuitive user experience making it challenging for the organization to build trust with new visitors.

RESEARCH

Understanding A Healthier, Happier Me's Target User Groups through stakeholder interviews

Understanding A Healthier, Happier Me's Target User Groups through stakeholder interviews

My primary stakeholder was Dr. Chanita Landry, the nonprofit founder who provided insight into the organization's goals, their user base and vision for the site redesign. 

Donors are looking for a legitimate cause that resonates with them. They want to be able to trust the organization and have a straight-forward way to make a donation.

Donors are looking for a legitimate cause that resonates with them. They want to be able to trust the organization and have a straight-forward way to make a donation.

Partners are looking for a legitimate cause that aligns with their company's values. They want to have a clear understanding of the organization's mission while also having a straight-forward way to become a corporate donor.

Partners are looking for a legitimate cause that aligns with their company's values. They want to have a clear understanding of the organization's mission while also having a straight-forward way to become a corporate donor.

Volunteers are looking for a legitimate cause that resonates with them and they can donate their time to. They want to have a clear understanding of the organization's mission while having a straight-forward way to sign up.

Volunteers are looking for a legitimate cause that resonates with them and they can donate their time to. They want to have a clear understanding of the organization's mission while having a straight-forward way to sign up.

Project Requirements Scope

Project Goals

Redesign site IA and layout
Improve visual design


Business Goals

Provide health resources in a digestible way
Appeal to target user groups

Constraints

2 month timeframe
Design within free Wordpress constraints

My Responsibilities

Heuristic evaluation, wireframing, prototyping, usability testing

Project Requirements Scope

Project Goals

Redesign site IA and layout

Improve visual design


Business Goals

Present health resources in a digestible way

Appeal to target user groups

Constraints

Time (3 month constraint)

Design within Wordpress constraints

My Responsibilities

Heuristic evaluation, wireframing, prototyping, usability testing, visual design

goal

goal

How might we revamp the organization’s website and appeal to donors, partners and volunteers?

How might we revamp the organization’s website and appeal to donors, partners and volunteers?

Identifying areas of improvement through heuristic evaluation

Identifying areas of improvement through heuristic evaluation

Stakeholder interviews provided a good understanding of the organization's goals and goals of their users. For that reason, I decided to forgo user research and focused on finding areas of improvement on the site through a heuristic evaluation.

  • 01 Lack of overall visual appeal


    Highly saturated color choice for hero section can be jarring for users



    Heuristic Violated: Effective use of white space

    02 Lack of CTA engagement


    Hero section lacks an engaging CTA to persuade donors. The headline doesn’t provide a clear direction which can be confusing for users.


    Heuristic Violated: Engaging CTAs

  • Too much white space


    Excessive use of white space creating an imbalance in a key section of the landing page. Content feels sparse and disconnected.


    Heuristic Violated: Effective use of white space


    Low quality images


    Images make the site feel disjointed. They add to the the inconsistencies found through the site creating a negative brand perception.


    Heuristic Violated: Aesthetic and minimalist design


  • Lack of progressive disclosure


    Section is text heavy and visually overwhelming making it challenging for users to process what’s most important.


    Heuristic Violated: Viability of system status


    Cluttered layout


    Layout is cluttered and lacks a hierarchy of information making it difficult for users to focus on the intended message.


    Heuristic Violated: Aesthetic and minimalist design


  • Inconsistent typeface with no clear visual hierarchy


    Current site uses 3 typefaces (Montserrat, SF pro, Cinzel) across font sizes, lacking a cohesive and logical typographic system.


    Heuristic Violated: Consistency and standards


    Design is not accessible


    A lack of contrast between error messages and background makes it difficult for users to read.


    Heuristic Violated: Consistency and standards


Gathering inspiration from popular nonprofit websites

Gathering inspiration from popular nonprofit websites

With areas of improvement in mind, I wanted to understand how other nonprofit websites were designed and what some of the best practices were especially when it came to establishing credibility. I looked into five nonprofit sites and found that credibility was defined through the three areas below.

01

A clear and compelling mission statement

Each nonprofit clearly stated their values, goals and mission.



02

Engaging visuals


Infuse visual design using new brand colors and typography



03

Clearly defined call to actions


Each nonprofit had a straight-forward way to make a donation

and for users to complete key tasks

INFORMATION ARCHITECTURE

Streamlining how visitors navigate the site

Streamlining how visitors navigate the site

The website's existing navigation was simple but was missing the depth needed to help achieve the organization's goals. The site navigation was revamped by adding page links for events, educational resources, ways to get involved.

Subscribe To
Newsletter

Sign Up Form

Blog

Payment Form

Payment Form

Interest Form

Application Form

Contact Form

A Healthier,

Happier Me

Home

About Us

Events

Knowledge Corner

Get Involved

Donate

Partner

Volunteer

General Contact

Donate

Subscribe To
Newsletter

Sign Up Form

Blog

Payment Form

Payment Form

Interest Form

Application Form

Contact Form

A Healthier,

Happier Me

Home

About Us

Events

Knowledge Corner

Get Involved

Donate

Partner

Volunteer

General Contact

Donate

Identifying key donor interactions

Identifying key donor interactions

With donations being a key component, we focused our efforts on breaking down the current donation process and redesign the flow to have it better align with the goals of the project. Moving from PayPal to Donorbox allowed for visual customization while also helping future scalability through features like recurring payments.

land on homepage

click get involved

land on get
involved page

click give today

land on donate
page

click donate

select or

enter amount

enter payment info

payment confirmed

land on confirmation

page

land on homepage

click get involved

land on get
involved page

click give today

land on donate
page

click donate

select or

enter amount

enter payment info

payment confirmed

land on confirmation

page

DESIGN

Low-Fidelity wireframes help facilitate stakeholder discussions

Low-Fidelity wireframes help facilitate stakeholder discussions

The site was planned to roll out in multiple phase. We first prioritized the homepage and new get involved page. Low fidelity wireframes were used to communicate the structure and layout of the page which helped to keep our discussions focused. After many rounds of iterations based on stakeholder feedback, we landed on the homepage layout below.

The site was planned to roll out in multiple phase. We first prioritized the homepage and new get involved page. Low fidelity wireframes were used to communicate the structure and layout of the page which helped to keep our discussions focused. After many rounds of iterations based on stakeholder feedback, we landed on the homepage layout below.

Video reel highlight the

organization’s mission

and vision

Updated layout drawing

visitors’ attention to the

main CTA

Showing the organization’s impact to provide visitors with a quick understanding

of what the org has to offer

Offering straight-forward entry points for each visitor

Updated footer to create

more cohesion with updated

homepage layout and

visual elements

Progressive disclosure helps

to consolidate information

and allows visitor to view

information as requested

Video reel highlight the

organization’s mission

and vision

Updated layout drawing

visitors’ attention to the

main CTA

Showing the organization’s impact to provide visitors with a quick understanding of what the org has to offer.

Offering straight-forward entry points for each visitor

Updated footer to create

more cohesion with updated

homepage layout and

visual elements

Progressive disclosure helps

to consolidate information

and allows visitor to view

information as requested

Creating a simple component library and infusing visual design

Creating a simple component library and infusing visual design

A simple component library was created using the organization's new brand colors. This part of the process was most challenging as we needed to account for inclusivity within the design.

A simple component library was created using the organization's new brand colors. This part of the process was most challenging as we needed to account for inclusivity within the design.

Logo

Typography

H1 Kumbh Sans Bold

H2 Kumbh Sans SemiBold

Sub Heading Kumbh Sans SemiBold

Body Inter Medium

Colors

Primary

#EC709A

Secondary

#FFE497

Tertiary

#3F8D9A

Font

#1B1B1B

Buttons

Primary

DONATE

Secondary

GET INVOLVED

Tertiary

This is a link

Icons

Logo

Typography

H1 Kumbh Sans Bold

H2 Kumbh Sans SemiBold

Sub Heading Kumbh Sans SemiBold

Body Inter Medium

Colors

Primary

#EC709A

Secondary

#FFE497

Tertiary

#3F8D9A

Font

#1B1B1B

Buttons

Primary

DONATE

Secondary

GET INVOLVED

Tertiary

This is a link

Icons

Logo

Typography

H1 Kumbh Sans Bold

H2 Kumbh Sans SemiBold

Sub Heading Kumbh Sans SemiBold

Body Inter Medium

Colors

Primary

#EC709A

Secondary

#FFE497

Tertiary

#3F8D9A

Font

#1B1B1B

Buttons

Primary

DONATE

Secondary

GET INVOLVED

Tertiary

This is a link

Icons

usability testing

First round of user testing informs four design iterations while also revealing encouraging reads on time reduction

I used Figma to build a prototype using hi-fidelity designs, focusing on two key tasks: Add a previously bought item to cart, editing weekly staples and adding staples to cart. Maze was used to for unmoderated usability testing with 6 participants. Below are 4 findings and the iterations that resulted from the test.

01 "After clicking the Donate button on the landing page, it's directed to a new page that appears to have three dot options, but the user needs to click the Donate button again"

We removed the second page and allowed donors

to go directly to the donate box

Before

After

Before

OUR WORK

EVENTS

KNOWLEDGE CENTER

GET INVOLVED

DONATE

After

OUR WORK

EVENTS

KNOWLEDGE CENTER

GET INVOLVED

DONATE

VOLUNTEER WITH US

BECOME A PARTNER

GIVE TODAY

02 "A corporate donor might experience skepticism with the "get involved" link...maybe a separate menu item to locate easily?"

A drop down menu was added for each user group allowing direct access to complete task

usability testing

Evaluating site user-friendliness

Evaluating site user-friendliness

The goal of the test was to understand ease of navigation and ability to complete three key tasks. Success was measured through qualitative and quantitive feedback (task success rate).

The goal of the test was to understand ease of navigation and ability to complete three key tasks. Success was measured through qualitative and quantitive feedback (task success rate).

01 "After clicking the Donate button on the landing page, it's directed to a new page that appears to have three dot options, but the user needs to click the Donate button again"

We removed the second page and allowed donors to go directly to the donate box

Before

After

02 "A corporate donor might experience skepticism with the "get involved" link...maybe a separate menu item to locate easily?"

A drop down menu was added for each user group allowing direct access to complete each task

Before

OUR WORK

EVENTS

KNOWLEDGE CENTER

GET INVOLVED

DONATE

After

OUR WORK

EVENTS

KNOWLEDGE CENTER

GET INVOLVED

DONATE

VOLUNTEER WITH US

BECOME A PARTNER

GIVE TODAY

01 "After clicking the Donate button on the landing page, it's directed to a new page that appears to have three dot options, but the user needs to click the Donate button again"

We removed the second page and allowed donors

to go directly to the donate box

Before

After

Before

OUR WORK

EVENTS

KNOWLEDGE CENTER

GET INVOLVED

DONATE

After

OUR WORK

EVENTS

KNOWLEDGE CENTER

GET INVOLVED

DONATE

VOLUNTEER WITH US

BECOME A PARTNER

GIVE TODAY

02 "A corporate donor might experience skepticism with the "get involved" link...maybe a separate menu item to locate easily?"

A drop down menu was added for each user group

allowing direct access to complete each task

final design

Proposed Solution a bold, playful and inclusive website redesign for A Healthier, Happier Me

defining success

Metrics we could learn from

Metrics we could learn from

While the site launched in January 2024, the organization is undergoing marketing efforts to draw more attention to the brand and organization as a whole. I would love to see how this design impacts the organization down the line.

Metric

How can this be measured?

Customer Satisfaction

Score

Are visitors satisfied with the way education resources are presented on the site? Do they find resources helpful?

Net Promoter Score

Are visitors recommending the organization to their friends and family?

Conversion Rate

Is there a significant increase in donations and volunteer sign ups compared to previous levels since the site has launched?

Customer Satisfaction Score

Are visitors satisfied with the way education resources are presented on the site? Do they find resources helpful?

Net Promoter Score

Are visitors recommending the organization to their friends and family?

Conversion Rate

Is there a significant increase in donations and volunteer sign ups compared to previous levels since the site has launched?

reflection

reflection

This was my first client project and a huge learning opportunity

This was my first client project and a huge learning opportunity

While reflecting on this project, there are many aspects I would now approach differently. Despite the many challenges, it helped me grasp the design process in a real-world context. Being newer to Design, I definitely underestimated the project's scope, involving site structure redesign and visual components creation. However, collaborating with the nonprofit's team throughout the process and seeing the site launch was a rewarding achievement!