Mothers' Helpers
Optimizing a non-profit's site for user goals
Project Overview
Problem:
With multiple users with distinct needs visiting the site, the site structure needed a redesign that helped them move efficiently through the site and achieve their goals.
Solution:
The Team:
I collaborated with a UX writer who led content design and re-wrote all website copy to better guide users. We both worked directly with the client to organize the project and deadlines.
Impact:
This website is developed but not yet live. Once the site is live, we’ll use heat-mapping tools to gather data and further iterate on changes to optimize the site.
My role:
- Brand Design
- UX Design
- UI Design
- Light Web Development
TOOls:
- Adobe Xd
- Adobe Illustrator
- Wix
A website restructure, brand refresh, and new tech tools to better encourage and streamline donations.
Background
Mothers’ Helpers is a non-profit organization based in Central Coast, California area offering supplies and used baby goods to new families in crisis. They just won California’s Non-Profit of the Year and are excited to welcome more visitors to their website as press grows.
Understanding the Users
Through user interviews and site analytics, we determined two main users who are visiting the site:
- In her early 30’s and lives within the Santa Barbara city limits, she comes from a corporate background but recently left to become a stay at home mother with her first child
- She's looking for a way to donate with a recurring financial donation
01. A Mother interested in action
02. A Grandmother eager to give back
- In her early 60’s and lives within the Santa Barbara or Montecito city limits, she comes from a teacher/nurse background and is now retired
- She has ample free time and resources, and is looking for ways to donate with a recurring financial donation and volunteer her time and energy
- In her early to mid 20's and lives within Santa Barbara county
- She is experiencing housing and/or food instability
- She does not have a community to throw her a baby shower
03. An Expecting Mother in need of Help
Previous Site
Equipped with insight into users, we presented a site analysis that highlighted key ares that were causing friction for users and some ideas of where we’d focus both design and copy changes.
CLICK TO NAVIGATE TO EACH PAGE ANALYSIS
01. Home Page
02. Applicant Page
03. Donate Page
04. Volunteer Page
NAVIGATION:
The Navigation is clear, but we see an opportunity to prioritize the “Donate” CTA as receiving donations is the non-profit’s #1 goal.
HOME HERO:
We understand why there are two buttons, but we'd suggest a secondary underlined CTA to show which is more emphasized.
3 Column Section
We like this organization of information, but find the colors distract the eye and the outlined CTA does not stand out.
Additionally, there is no mention of location to easily let users know where the non-profit is based.
Missing footer
Each page should have a footer with all page links and social links.
We see why they put two buttons but would rather have one and a secondary underlined CTA to show which is emphasized. Additionally, there is no mention of location to easily let users know where the non-profit is based.
CLICK TO NAVIGATE TO EACH PAGE ANALYSIS
01. Home Page
02. Applicant Page
03. Donate Page
04. Volunteer Page
hero
There is no hero section, just a lot of dense information that could be overwhelming to users upon first glance.
Apply for help cta
A recurring theme across the entire site is that the call-to-action buttons do not stand out enough to draw the user's eye.
Resources section
Similar to the hero, this can feel like a lot of information overload. We suggest building a separate page dedicated to all resources and focusing this Applicant page on content that will help potential applicants see the value in this offering.
no Testimonials
adding some testimonials from past applicants turned successful recipients would be helpful to those interested in applying.
CLICK TO NAVIGATE TO EACH PAGE ANALYSIS
01. Home Page
02. Applicant Page
03. Donate Page
04. Volunteer Page
DONATE CALL TO ACTION
By using a button to link to the non-profit's Paypal this adds an extra click for users. We recommend an embed tool that allows users to make a donation while staying on the page.
changing cta colors
In the previous two pages, the CTA's were pink and now they're blue. We recommend using a consistent button color across all pages.
In the previous two pages, the CTA's were pink and now they're blue.
We recommend using a consistent button color across all pages.
Email opt-in
As the page currently is, users are encouraged to make a monetary donation or a physical donation. However, some users may be interested in the cause but are not in the position to donate either currently. With them in mind, we encourage a newsletter opt-in form at the bottom to help users stay connected with the non-profit.
As the page currently is, users are encouraged to make a monetary donation or a physical donation. However, some users may be interested in the cause but are not in the position to donate either currently. With them in mind, we encourage a newsletter opt-in form at the bottom to help users stay connected with the non-profit.
CLICK TO NAVIGATE TO EACH PAGE ANALYSIS
01. Home Page
02. Applicant Page
03. Donate Page
04. Volunteer Page
no type hierarch
Across all pages, there is little to no typography hierarchy that helps users scan information quickly.
Too much text
lacking supporting content
An additional panel of volunteer testimonials or photos from recent volunteer events would help users who are interested in becoming a new volunteer better see themselves in that role.
We suggest trimming down the words and also breaking the paragraphs up with images or other design elements.
This page in particular is too copy heavy and could be overwhelming to users. We suggest trimming down the words and also breaking the paragraphs up with images or other design elements.
This page in particular is too copy heavy and could be overwhelming to users.
Setting the Framework
HIGH FIDELITY WIREFRAMES, ROUND 01
In this first round, we presented both design and copy changes that we felt were instrumental to the business goal of getting more donations and the user goal of making the site easier to navigate.
Key Changes:
- Simplified Navigation that emphasizes the “Donate”button by using a dark berry color
- Donation Embed Form at the top-fold of the Donate Page to encourage donations, specifically recurring donations
- Addition of a footer including navigation links, an email opt-in, and dynamic Instagram Feed
- Testimonials to show social proof for the organization
Home Page
Donate Page
Refreshed Branding
previous Colors
The original branding leaned heavily on more saturated pinks and blues. We tested using the hot pink vs. berry color for the CTA’s and ended up keeping the berry as it felt more complimentary. We also toned back the pinks and blues so they felt more like softer background colors that let the user focus better on the important copy.
Updated Colors
A New Resources Page to Support the Applicant Page
HIGH FIDELITY WIREFRAMES, ROUND 02
The current site features both application info for moms in need as well as resources in the Santa Barbara area.
We wanted to separate this information to reduce overwhelm and provide more clarity for users. The After section shows two separate pages, first a more detailed Applicant page with added testimonials from moms who’ve received help and then an expanded Resources page that users can click into from the Applicant page if they’re interested in exploring more.
The before:
The After:
Navigation Refinement
We began with a more drastically changed navigation, as shown on the right. The feedback from the organization stakeholders was that the elements felt like they were floating and confusing.
We refined to the two bottom options, and ended up selecting the more traditional navigation. For both options we added an “En Español” as the non-profit plans to translate the entire site soon.
We refined to the two bottom options, and ended up selecting the more traditional navigation. For both options we added an “En Español” as the non-profit plans to translate the entire site soon.
HIGH FIDELITY WIREFRAMES, ROUND 03
Round 01, Option 1
Round 03, Option 1
Round 03, Option 2
Selected design
We began with a more drastically changed navigation. The feedback from the organization stakeholders was that the elements felt like they were floating and confusing.
We refined to the two bottom options, and ended up selecting the more traditional navigation. For both options we added an “En Español” as the non-profit plans to translate the entire site soon.
We refined to the two bottom options, and ended up selecting the more traditional navigation. For both options we added an “En Español” as the non-profit plans to translate the entire site soon.
Website Development
As the Mothers’ Helpers site is was already set up in Wix, we continued to work with this platform. As happens in real life projects with constraints, some elements had to pivot from wireframes to development.
NAVIGATION + FONT STYLES
Localization with the Spanish translation is not yet ready for the site and so that feature was not included in this round of development.
Additionally, we altered some of the labels of Navigation items as well as some font styles based on stakeholder feedback.
Additionally, we altered some of the labels of Navigation items as well as some font styles based on stakeholder feedback.
DONATE/SUBSCRIPTION FEATURE
Focused on increasing donations, we wanted to include an embedded donate box at the top of fold on the Donate page.
We had originally proposed Fundraise tool, but this did not align with the founders’ goals as the tool took too large of a percentage of each donation.
We finally landed with Donorbox which Mothers’ Helpers took live on the site.
We had originally proposed Fundraise tool, but this did not align with the founders’ goals as the tool took too large of a percentage of each donation.
We finally landed with Donorbox which Mothers’ Helpers took live on the site.
FOOTER + LINKED POLICIES ADDITION
The previous site had no footer, which made it feel unfinished and lacked key pages for standard web compliance.
The footer now helps users navigate, but also links to 3 separate legal documents: Privacy Policy, Site Terms & Conditions, and Recipient Conditions to esnure the site is compliant.
The footer now helps users navigate, but also links to 3 separate legal documents: Privacy Policy, Site Terms & Conditions, and Recipient Conditions to esnure the site is compliant.
Looking to the Future
Data to Collect When the Site launches:
- Click Actions: Are users moving to the Donate page? (monitored using Hot Jar on the non-profit's site)
- Donations: Is there an increase in donations now that they're using an easy-to-use embed form for donations?
- Overall Web Traffic: Is web traffic up due to providing a site with quality content and better information structure?
- Numbers for Volunteer + Recipient Applications: Are more visitors taking action on the site by signing up to volunteer or applying if they need help?
- Physical Donations: How is the new site impacting physical donation numbers?
- Newsletter Opt-Ins: How many users are taking action by joining the non-profit's newsletter?
Reflections
01. the best design solution considers users and stakeholders
- We loved Fundraise on other non-profit websites from a design standpoint but the price did not make sense for Mothers' Helpers. We continued researching and landed on Donorbox which still helps users easily donate money and is more aligned with the team's budget.
02. the importance of clear buttons + call-to-action colors
- While not yet tested on their audience, we see a big difference in simply using a more saturated color for buttons to draw the eye.
03. stay in your genius lane but have empathy for your collaborators
- Working again with a UX writer on this project showed me how much better the result is when you turn to specialized folks for areas of a project. Focusing on my area of expertise while having empathy for Sarah's role as a writer really led to an excellent final product.