top of page
Newsletter Mocks.png

HandsOn San Diego

HandsOn San Diego is an organization that connects volunteers with nonprofits around San Diego. Volunteers may refine opportunities based on location, interest, and schedule. Some of the opportunities offered by HandsOn San Diego include working with environmental causes, supporting seniors and people with disabilities, and more.

Role

Visual Designer & Marketing

Team

Tiffany Lee 
Jared Banawa 
Amy To 
Menaha Gujavarthi 
Yuntian Guo 
Anya Gommeren

Timeline

July 2023 - September 2023

Tools

Figma 
Canva 
Constant Contact
Notion

Skills

Email Marketing Visual Identity
User Research

Role 

As the team's Visual Designer, I spearheaded visual brand identity, finding our client's brand kit and icon folder. However, as our client did not want us to change any of their branding, I mainly worked on marketing materials, focusing on the redesign of their weekly newsletter. I also provided feedback and assisted in the redesign of our client's website landing page and business membership page. 

The Problem

How might we elevate user engagement and experience on HandsOn San Diego’s website and within their weekly newsletter, aiming for enhanced usability?

Our Solution

1

Redesigning their landing page and business pages to yield more volunteer signups & donations, partnerships with local companies, and fewer waived membership fees.

2

Refreshing the nonprofit's newsletter template to boost engagement by creating more compelling headers, incorporating more images, and a higher visibility donation link.

01                                                                        Understanding Our Users

1.png

Secondary Research

Conducted a website audit, newsletter audit, competitive analysis, and looked at Constant Contact data.

2.png

Primary Research

Gathered insights from 17 survey responses and 2 user interviews

Website & Newsletter Audit

As a team, we conducted a web audit to identify usability issues of HandOn San Diego’s current landing and business membership page. I independently conducted a newsletter audit to identify places for improvement.

Landing Page

Key Takeaways:

  • Communication Gap: Users don't know anything about the nonprofit’s mission or purpose from looking at this page

  • Lack of Consistency: Spacing, font styles, button states and styling

  • Business Objectives & Website: Not conveyed to the audience

Business Membership Page

Key Takeaways:

  • Readability: Lack of subheadings and including one big paragraph makes the content less digestible and more difficult to keep track of the main points

  • Lack of CTA: The current website does not have the necessary features nor a strong user experience that appeal to the general public to incentivize the need of a subscription

Newsletter

Key Takeaways:

  • Lack of Consistency: Button and header styles, alignment, and fonts.

  • Communication Gap: lack of CTA encouraging volunteers to donate, volunteering CTA is inconsistent, and button styling is aggressive.

  • Lack of Visuals: More compelling images, icons, and graphics are needed to boost engagement.

Competitive Analysis - Website

We looked into other non-profit organizations’ landing pages and volunteer pages to gain insights on different aspects such as design elements, user experience, and content presentation. By assessing their strengths and weaknesses, we identified ways we could improve HandsOn San Diego’s landing page and business membership page.

Website Landing Page

image 7_edited.jpg

Strengths:
✅ Engaging images in hero section

Weaknesses:
❌ Poor placement of UI elements

❌ Fail to highlight impact

Screenshot_2023-08-23_at_5.52.12_PM.png

Strengths:
✅ Various donation options emphasized with images 

Weaknesses:
❌ Simplistic layouts and design inconsistencies from landing page
❌ Redundant information

User Surveys and Interviews - Website

To gather information about users’ overall experiences using the HandsOn San Diego website and identify users’ pain points, we sent out a survey and collected 17 responses. The survey included questions about users’ experience with finding volunteering opportunities, enrolling in a membership, and donating. It also contained a grid for rating various aspects of the website.

To gain deeper understandings on the usability of the website and the challenges that the users have met, we conducted several 30-min user interviews via zoom. Here are the key insights from both the survey and the interviews:

Key Insights

Tracking.png

Membership Enrollment

  • Font size makes the texts a bit hard to read

Become a Member.png

Volunteer Sign-ups

  • Timely sign-up notification can be added to allow users to get immediate updates

  • Distinguish between ongoing opportunities and date-specific events more

  • Use of images can be more representative, diverse, and visually attractive

donate 1.png

Donation

  • The “Donate” button needs to be more obvious and visually attractive

  • More keywords of HOSD information may motivate users to donate

Constant Contact Data - Newsletter

For the newsletter, I looked at data on Constant Contact, the platform HandsOn San Diego hosts their newsletter. Some things I noted were:

  • Click rates are slightly lower than average

  • Links at the top are clicked most often

  • Most opens are on desktop, so their design is responsive

We used the insights we gathered from our primary and secondary research to guide our low-fidelity prototypes for the website and mid-fidelity prototypes for the newsletter. Some of the main things we wanted to hone in on in our low- and mid- fidelity designs were: 

Website

  • Preserving the hero section

  • Utilizing icons and stats to display impact

  • Including testimonials and highlighting business membership programs on the landing page

  • Emphasizing donating and the benefits of joining HandsOn SD for business membership page

Newsletter 

  • ​Playing around with different headers (fonts, letter sizes, background color), featured opportunities sections, images, and organizational hierarchy.

​

​

02                                                                                   Piecing it Together

Low-Fidelity Prototypes - Website

Our team created low-fidelity prototypes that we all provided feedback on to aid in creating the high-fidelity prototypes. Our UX designers each created a different design for the landing and business membership pages that focused on targeting HandsOn SD’s users (volunteers and businesses). 

Landing Page Lo-fis

Differences

  • Use of images vs. statistics for certain sections

  • Individual layouts of each section

Similarities 

  • Information hierarchy of the landing page 

  • General structure of the hero section

Business Membership Page Lo-fis

Desktop - 6.png
Desktop - 1.png

Differences

  • Information hierarchy of the business membership page

  • Donations on the bottom of the left lo-fi, and not the right

Similarities ​

  • Hero sections​

  • Information about the BMP

Mid-Fidelity Prototypes - Newsletter

I designed templates in Figma for the newsletter before transferring them to Constant Contact. I incorporated insights from my research to enhance the design of our mid-fidelity mockups.

Current Template

Template #1

  • Rounded buttons, gradient headers, and buttons

  • Volunteer Spotlight & Impact Sections

  • More images

  • App download moved to the bottom

Template #2

  • Similar “Projects that need more Volunteers” layout

  • Consistent header & buttons

  • Impact graphic (from our team's social media campaign not shown)

Template #3

  • Using icons from the website

  • Shorter version 

  • Different headers 

03                                                                     Putting Things into Context

High-Fidelity Prototypes - Website

Our key takeaways from the lo-fis that we incorporated on the high-fis for the landing page were:

  • Focusing on adding full-bleed images to draw attention to viewers of the site, especially in hero section

  • Using larger headers to create contrast from body text & icons within cards to visually communicate the impact HandsOn San Diego has had throughout the years

  • Adding testimonials from past volunteers

And key takeaways from the lo-fis we incorporated on the high-fis for the business membership page were

  • Reducing text and emphasizing visuals

  • Highlighting annual plans with cards differentiating the two options HandsOn San Diego offers

  • Fixing inconsistent indentation/layout in the “Enroll your Business” form:

Landing Page

Hi-Fi_Landing_Page_FInal.png

Business Membership Page

Hi-Fi_Business_Page_Final.png

Constant Contact Mockups - Newsletter

After sharing our mid-fidelity mockups, I was given access to Constant Contact when I realized what design constraints I would be working with:

  • Gradient headers & buttons and “Week of..” under the logo are not feasible

  • Fonts are limited, so we have to use different ones from the style guide of the website

  • Constant Contact employs block design for newsletters, so it’s not very flexible style-wise; therefore, Template #3 is impossible.


With these constraints, designing became more difficult, so I put more energy into our client’s secondary request - producing welcome newsletter(s) to increase volunteer engagement from the get-go.

Weekly Newsletter 

screencapture-app-constantcontact-pages-campaigns-email-2023-08-10-00_22_48.jpg

Welcome Newsletter 

screencapture-app-constantcontact-pages-campaigns-email-2023-08-10-00_20_05.jpg

My key takeaways from the mid-fis I incorporated in the Constant Contact iterations were:

  • Adding gradient backgrounds, images to the “Ongoing Opportunities” section, and a postcard-like graphic to the welcome template

  • Designing a featured opportunities section with images

04                                                                                           Final Designs

Landing Page

Untitled-1.png

Business Membership Page

Untitled-2.png

For the website, these were the key changes made with the design constraints kept in mind:

  • Fixed text hierarchy with subheadings to make information easier to read

  • Added information and images to the landing page to highlight impact, testimonials, and information about the nonprofit to encourage people to volunteer 

  • Highlighting featured opportunities and donations to boost engagement 

  • Emphasizing the benefits of the BMP program 

  • Condensing the "Enroll Your Business" form to only contain key information to improve usability

Old Weekly Newsletter

Marketing-06.png

Welcome Newsletter Day 1

screencapture-app-constantcontact-pages-campaigns-email-2023-08-23-22_31_01.jpg

New Weekly Newsletter

screencapture-app-constantcontact-pages-campaigns-email-2023-08-23-22_31_26.jpg

Welcome Newsletter Day 3

screencapture-app-constantcontact-pages-campaigns-email-2023-10-04-14_57_30.png

For the newsletter, these were the main changes I made in the final designs:

  • Separating the welcome newsletters into 2: one with general information about HandsOn San Diego & highlighting past events and the other with featured opportunities & answering FAQs

  • Consistently rounded and proper case buttons

  • “Our Impact: 10 Years of HandsOn SD” Section with a graphic from our 10th Anniversary Social media campaign (not shown here) with a clear CTA to donate

  • Images for each upcoming opportunity and 9 featured opportunities instead of 18

  • 10th Anniversary Logo instead of the standard logo

  • Border & playful background

Reflection

Overall, I had an amazing redesigning the newsletter and assisting with the landing & business membership pages. While I learned lessons in the process of creating valuable solutions to user-related problems, I also honed my time management and communication skills learning to talk to the team, our client, and our mentor to receive feedback and ensure I was taking necessary steps each week to complete deliverables. From this opportunity I definitely learned to:

  • Learn what platform final deliverables are being hosted on in the very beginning

  • Communicate effectively and consistently with the client and put their needs first

  • Be less afraid to back my stylistic choices

Thank you to...

  • The HandsOn San Diego staff, Lisa Lindgren and Jessie Case, for being part of this meaningful project and empowering my team and I to hone our design skills.

  • Our team mentor, Priya Rajaraman, for providing us with insightful feedback that guided us in the right direction for this project

  • UCSD Design Co Program Coordinators for giving me to the opportunity to work with fellow creatives at UCSD and expand my design knowledge beyond the classroom.

bottom of page