UX Consulting – 2024
Bunny’s Flowers
Nonprofit Website Redesign
Identifying ways to improve the usability and user experience of a nonprofit’s website
TEAM1 Other Undergrad Volunteer, 1 Founder
ROLEVolunteer UX Designer
DURATION4 weeks
DELIVERABLESRedesigned sitemap, Lo-Fi Wireframe
Bunny’s Flowers, a Philly-based nonprofit focused on environmental education, received a Google Ads grant to increase its online visibility.
I led their website redesign in collaboration with the founder and another volunteer, identifying opportunities to make it easier for new visitors to navigate and engage.
My Impact
Clearer Website Structure
Reorganized sitemap, navigation, and page content for users to more easily find what they’re looking for.
Strategic CTA Placement
Added call-to-action buttons to increase conversions in alignment with business goals.
Design Implementation
Designs were implemented on the live website after handoff.
ProblemNonprofits vs. Navigation:
The Usability Dilemma
Like many nonprofits, Bunny’s Flowers faced UX issues:
Unclear Navigation
Outdated
Content
These challenges disrupted the user experience and made it difficult for visitors to get involved with the organization.
Text
Overload
Existing Website Design
Original Home Page (part 1)
Original Home Page (part 2)
Original Home Page (part 3)
Original Home Page (part 4)
Original Home Page (part 5)
Key Pain Points
The website had no clear steps or actions for getting involved in programs.
With no active programs during the winter off-season, we needed to promote the e-learning course instead.
Audience Discovery
Who is our audience?
But before making any recommendations, I first needed to understand the target audience of Bunny’s Flowers.
Who was using this website?
What actions were they trying to accomplish?
How might we tailor the website to improve their user experience?
Audience Insights
Identifying the target audience was difficult due to a few reasons:
The founder didn’t track any record of past volunteers
The website and Instagram relied heavily on stock photos
The founder’s effort to welcome "everyone" made the target audience too broad to define
So I turned to testimonials and Google Ads analytics for audience insights.
Users were searching for ”community service opportunities”
Using analytics from their Google Ads account, I identified that most online traffic came from people searching for community service opportunities.
But why?
🔍 Audience Insight #1
Discovering the Target Audience
Testimonials reveal that moms enrolled their children or elderly parents in programs either for school credit or to encourage personal independence.
Youth
“My daughter is the youngest and she finally has something she is proud of and to call her own.”
🔍 Audience Insight #2
Moms
Moms were the pivotal facilitators
Elderly
“I was able to take my mom in for a class and get back to work...”
Action Items
❑ Restructure the navigation bar to guide users towards “community service opportunities.”
❑ Update the homepage by removing outdated content and focusing on clear action items.
❑ Highlight the website's e-learning lessons during the winter season when workshops are inactive.
The Redesign
How They Implemented My Design
The volunteer I shared my recommendations with ultimately adopted my suggestion, replacing the "Volunteer Events" page with a new "Get Involved" page.
Before (original navigation bar)
After (screenshot from live website)
This new page provides users with a clearer, more direct path to achieve their goal of finding community service opportunities.
Action Item #1: Unclear Navigation
The navigation bar included vague page names. For example, the "Dashboard" page was an e-learning page, but its label was confusing.
So I designed a
Turned the “Instagram” page into an icon to free up space
Deleted the page titled "Draft – Homepage"
Added a new page called “Volunteer Events” to meet user needs
Move “Bunny’s Wish” page under “Education” page since it is a program
Action Item #2: Outdated and Unstructured Content
The homepage displayed undated flyers, a 25-page carousel of logos, and a random infographic, creating a cluttered and outdated first impression.
After
I extracted only the most important information from the large paragraphs.
Before
Big blocks of text made it difficult to quickly grasp information about the organization.
Action Item #3: Promote the E-Learning Course
During the winter off-season, the homepage had no active programs, leaving users without clear actions. Additionally, the site didn’t guide visitors to the e-learning course, which was crucial for boosting the founder's impact and securing grants.
After
The live site now incorporates 9 calls to action which promote website visitors to donate, get involved, explore e-learning courses, learn more about past events, and contact the organization.
These additions are from my recommendations.
Before
The homepage only had 2 calls to action:
“God’s Love We Deliver” button which was a donation on an external org’s website
“MCW” button which was an unresponsive link to apply for a fellowship program
Home page (before)
Home page wireframe (after)
The Redesigned Homepage
Lessons Learned
Balancing Enthusiasm with Usability
I realized the cluttered homepage stemmed from the founder’s eagerness to share every update. This led to content piling up, disrupting the structure and making it harder for visitors to find key information.
If I continued this project, I’d recommend adding a “News Feed." This would allow the founder to share news all while keeping the rest of the homepage organized and user-friendly.
If I faced a similar cluttered homepage in the future, I’d take time to explore the root cause. Was it due to a lack of software knowledge? Misunderstanding of design best practices?
Potential “News Feed” design