HandsOn San Diego
HandsOn San Diego
Increasing Volunteer Participation & Donations for HandsOn San Diego
Increasing Volunteer Participation & Donations for HandsOn San Diego
TEAM
2 UX Designers
1 UX Researcher
1 Content Strategist
1 Marketing Strategist
1 Visual Designer
Timeline
Jun - Sep 2023
(10 Weeks)
Skills
Product Design
Marketing Strategy
Non-profit Work
DELIVERABLES
2 Web Pages
3 Newsletter Templates
10 Social Media Graphics
TEAM
2 UX Designers
1 UX Researcher
1 Content Strategist
1 Marketing Strategist
1 Visual Designer
Timeline
Jun - Sep 2023
(10 Weeks)
Skills
Marketing Strategy
UX Research
Visual Design
DELIVERABLES
2 Web Pages
3 Newsletter Templates
10 Social Media Graphics
TEAM
2 UX Designers
1 UX Researcher
1 Content Strategist
1 Marketing Strategist
1 Visual Designer
Timeline
Jun - Sep 2023
(10 Weeks)
Skills
Marketing Strategy
UX Research
Visual Design
DELIVERABLES
2 Web Pages
3 Newsletter Templates
10 Social Media Graphics
HandsOn San Diego
Increasing Volunteer Participation & Donations for HandsOn San Diego
TEAM
2 UX Designers
1 UX Researcher
1 Content Strategist
1 Marketing Strategist
1 Visual Designer
Timeline
Jun - Sept 2023 (10 Weeks)
Skills
Marketing Strategy
UX Research
Visual Design
DELIVERABLES
2 Web Pages
3 Newsletter Templates
10 Social Media Graphics
The problem
The problem
HandsOn San Diego’s online platforms, including the Landing and Business Membership Pages, failed to effectively engage volunteers and attract business partnerships. Additionally, the outdated newsletter layout resulted in low click-through rates, limiting the nonprofit's ability to connect with its audience.
HandsOn San Diego’s online platforms, including the Landing and Business Membership Pages, failed to effectively engage volunteers and attract business partnerships. Additionally, the outdated newsletter layout resulted in low click-through rates, limiting the nonprofit's ability to connect with its audience.
how might we Statement
how might we Statement
How might we redesign the nonprofit's website pages and newsletter to better engage volunteers, attract business partnerships, and improve audience interaction?
How might we redesign the nonprofit's website pages and newsletter to better engage volunteers, attract business partnerships, and improve audience interaction?
Our solution
Our solution
To address these challenges, my team and I identified two key deliverables: redesigning the Landing and Business Membership Pages and updating the newsletter. I led the efforts to refresh the newsletter and website pages, creating user-friendly designs that strengthened engagement and supported the nonprofit’s mission to build stronger communities through volunteer action.
To address these challenges, my team and I identified two key deliverables: redesigning the Landing and Business Membership Pages and updating the newsletter. I led the efforts to refresh the newsletter and website pages, creating user-friendly designs that strengthened engagement and supported the nonprofit’s mission to build stronger communities through volunteer action.
RESEARCH
RESEARCH
MY role
MY role
After pinpointing our deliverables, my team and I divided tasks. I primarily focused on the redesign of the newsletter and website pages.
After pinpointing our deliverables, my team and I divided tasks. I primarily focused on the redesign of the newsletter and website pages.
WEBSITE RESEARCH
WEBSITE RESEARCH
Our website research was grounded in primary and secondary methods. We performed a UX audit of the 2 pages, referenced other nonprofit organizations within the competitive landscape, and analyzed insights from 17 user survey responses and 2 user interviews.
Our website research was grounded in primary and secondary methods. We performed a UX audit of the 2 pages, referenced other nonprofit organizations within the competitive landscape, and analyzed insights from 17 user survey responses and 2 user interviews.
Our website research was grounded in primary and secondary methods. We performed a UX audit of the 2 pages, referenced other nonprofit organizations within the competitive landscape, and analyzed insights from 17 user survey responses and 2 user interviews.
NEWSLETTER RESEARCH
NEWSLETTER RESEARCH
For the newsletter, we looked at data in Constant Contact, a digital and email marketing platform that held key performance insights on the weekly newsletter. We also conducted a UI audit, primarily focusing on the layout of information, and the strength of call-to-action buttons.
For the newsletter, we looked at data in Constant Contact, a digital and email marketing platform that held key performance insights on the weekly newsletter. We also conducted a UI audit, primarily focusing on the layout of information, and the strength of call-to-action buttons.
For the newsletter, we looked at data in Constant Contact, a digital and email marketing platform that held key performance insights on the weekly newsletter. We also conducted a UI audit, primarily focusing on the layout of information, and the strength of call-to-action buttons.
Key pain points
Key pain points
Landing & Business Membership Pages
Highlight key metrics to showcase the nonprofit's impact and achievements.
Simplify text hierarchy to improve readability and reduce clutter.
Redesign the search button for better visibility and usability.
Clarify membership types on the business membership page for easier understanding.
Newsletter
Strengthen the volunteer call-to-action (CTA) to boost sign-ups.
Develop a reusable weekly template for streamlined content updates.
Enhance the newsletter interface for a more engaging and visually appealing experience.
Landing & Business Membership Pages
Landing & Business Membership Pages
Highlight key metrics to showcase the nonprofit's impact and achievements.
Simplify text hierarchy to improve readability and reduce clutter.
Redesign the search button for better visibility and usability.
Clarify membership types on the business membership page for easier understanding.
Newsletter
Newsletter
Strengthen the volunteer call-to-action (CTA) to boost sign-ups.
Develop a reusable weekly template for streamlined content updates.
Enhance the newsletter interface for a more engaging and visually appealing experience.
IDEATION
IDEATION
Low-Fidelity wireframes
Low-Fidelity wireframes
Landing Page
Landing Page
Landing Page
Design exploration:
Content organization
Page alignment options (left-aligned vs. center-aligned)
Varied visuals (icons and images)
Design exploration:
Content organization
Page alignment options (left-aligned vs. center-aligned)
Varied visuals (icons and images)
Business Membership Page
Business Membership Page
Business Membership Page
Design exploration:
Highlighting impact metrics
Optimizing subheading organization
Design exploration:
Highlighting impact metrics
Optimizing subheading organization
MID-Fidelity wireframes
MID-Fidelity wireframes
Newsletter
Newsletter
V1
V1
V2
V2
V3
V3
V4
V4
Throughout iterations V1 to V4, I explored various button styles, headings, content organization, and layouts. Ultimately, my designs were adapted to align with the constraints of the Constant Contact builder platform.
Throughout iterations V1 to V4, I explored various button styles, headings, content organization, and layouts. Ultimately, my designs were adapted to align with the constraints of the Constant Contact builder platform.
FINAL designs
FINAL designs
FINAL designs
FINAL designs
After creating low-fidelity wireframes, our team conducted a design critique, selecting the best elements from each version to integrate into our high-fidelity solution.
After creating low-fidelity wireframes, our team conducted a design critique, selecting the best elements from each version to integrate into our high-fidelity solution.
Landing Page
Landing Page
Landing Page
Business Membership Page
Business Membership Page
Business Membership Page
Designed a hero section carousel with a CTA to drive donations and volunteer sign-ups.
Highlighted impact with icons, statistics, and testimonials.
Integrated clear CTAs for volunteering and donating.
Designed a hero section carousel with a CTA to drive donations and volunteer sign-ups.
Highlighted impact with icons, statistics, and testimonials.
Integrated clear CTAs for volunteering and donating.
Highlighted benefits with icons and concise descriptions.
Improved visuals for membership options.
Highlighted benefits with icons and concise descriptions.
Improved visuals for membership options.
CLICK HERE TO SEE OUR FINAL DESIGNS
CLICK HERE TO SEE OUR FINAL DESIGNS
CLICK HERE TO SEE OUR FINAL DESIGNS
NEWSLETTER TEMPLATE & IDENTIFYING A GAP
NEWSLETTER TEMPLATE & IDENTIFYING A GAP
Individually, I revamped the newsletter template to enhance the UI and introduced more personalized and easily reusable sections.
Individually, I revamped the newsletter template to enhance the UI and introduced more personalized and easily reusable sections.
Example of Refreshed Newsletter Template sent out on 08/28/23
Additionally, I identified a critical marketing opportunity: the moment users sign up for the newsletter is ideal for sharing more about the nonprofit and its mission. To capitalize on this, I developed 1-day and 3-day welcome newsletters to boost engagement and improve the onboarding process for new subscribers from the start.
Additionally, I identified a critical marketing opportunity: the moment users sign up for the newsletter is ideal for sharing more about the nonprofit and its mission. To capitalize on this, I developed 1-day and 3-day welcome newsletters to boost engagement and improve the onboarding process for new subscribers from the start.
1 Day after account creation Newsletter
3 Days after account creation Newsletter
Driving impact
Driving impact
Driving Impact
Driving Impact
We offloaded our designs to HandsOn San Diego in September 2023. These were some updates we received from the NPO in July 2024.
We offloaded our designs to HandsOn San Diego in September 2023. These were some updates we received from the NPO in July 2024.
Our designs for the home page and business membership page were designed with a responsive layout to ensure optimal viewing across various devices.
Our newsletter layout that was designed is still being used, with open rates having increased 6% and our click rate has increased 2% over the past year.
Our designs for the home page and business membership page were designed with a responsive layout to ensure optimal viewing across various devices.
Our newsletter layout that was designed is still being used, with open rates having increased 6% and our click rate has increased 2% over the past year.
REFLECTION
REFLECTION
KEY Takeaways
KEY Takeaways
Define software limitations early to avoid design setbacks and work within its capabilities.
Define software limitations early to avoid design setbacks and work within its capabilities.
Prioritize responsive design from the start to ensure seamless experiences across devices.
Prioritize responsive design from the start to ensure seamless experiences across devices.
OTHER PROJECTS
Transforming Music Festivals into Sustainable and Cost-Effective Experiences for College Students with TicketTasker
PRODUCT DESIGN • MOBILE DESIGN • PRODUCT THINKING
OTHER PROJECTS
Transforming Music Festivals into Sustainable and Cost-Effective Experiences for College Students with TicketTasker
PRODUCT DESIGN • MOBILE DESIGN • PRODUCT THINKING
Creating web interfaces to teleoperate the Stretch RE1 Robot in the UCSD Healthcare Robotics Lab
PRODUCT DESIGN • UX RESEARCH • HEALTHCARE DESIGN