UX Design – 2024
Bunny’s Flowers Nonprofit Website Redesign
Improving website usability for new traffic driven by Google Ads
Team
2 Undergrad Volunteers
1 Founder
Role
Web Designer
Duration
4 weeks
Process
Content & IA Audit, Sitemap, User Personas, Lo-fi Wireframes
Tools
Figma, FigJam, Google Docs
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, aiming to make it easier for new visitors to navigate and engage.
My Impact
➞ I reorganized the site map to make the navigation clearer and easier for users to find what they need.
➞ I redesigned the homepage using low-fidelity wireframes, adding more call-to-action buttons to guide users.
➞ The designs I created were implemented on the website after I handed off the project to a volunteer.
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.
Designing a Simpler Sitemap
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
[SCREENSHOT SNIPPETS OF CALL TO ACTION BUTTONS THEY IMPLEMENTED ON LIVE SITE]
Before
[CHANGE SCREENSHOT TO RED BOXES AROUND THE CALL TO ACTION BUTTONS ON ORIGINAL HOMEPAGE]
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