Rebuilding Youth Volunteer Corps of Hampton Roads’ homepage


COMPANY

Youth Volunteer Corps of Hampton Roads

RESEARCH METHODS

Competitor analysis, user testing

PLATFORM

Web and mobile

TIMEFRAME

3 months


As lead designer, I rebuilt Youth Volunteer Corps of Hampton Roads’ homesite on a new Squarespace template to optimize the user experience. Leveraging research, I identified pain points in the current website and optimized the site for better communication.

OVERVIEW

Youth Volunteer Corps of Hampton Roads (YVCHR) is a 501(c)(3) nonprofit that engage youths in team service experiences in the Hampton Roads, Virginia area. It has been active since 2009 and worked with 6k+ volunteers with 3.5k+ hosted events.

While their site had always been hosted on Squarespace, the update of their page from Squarespace 7.0 to 7.1 broke a lot of the layout and design on their website. Recognizing the need to fix and update their site, I joined as a volunteer to revamp the site, in particular their home page.

Objectives

01

Fix issues caused by the update to Squarespace 7.1 and rehaul the information architecture and layout for a better user experience.

02

Improve the audience’s understanding of YVCHR’s programs and offerings and refresh content and photos.

Challenges

Technical limitations

The website must remain hosted on Squarespace so that YVCHR staff can easily maintain the site with no web development experience.

Disorganized pages

YVCHR has many programs and outdated pages, which need to be updated and consolidated.

Limited resources

As YVCHR is a non-profit with a limited budget and staffing, design experiences must work around these constraints.

Process

DISCOVER

Problem exploration; learn about YVCHR’s programming, operations and technical / brand constraints.

Complete competitive audit and leverage research.

DEFINE

Organize insights, narrow down features / modules, and define requirements

DEVELOP

Create and test multiple rounds of wireframing.

Conduct user testing and reiterate each round.

DELIVER

Launch final product.

DISCOVER

Familiarize myself with YVCHR’s mission, offerings, and audience

Before diving into the design work, I worked with YVCHR’s executive director to understand the organization’s mission and work. We reviewed the organization’s priorities, the audiences for the website, Youth Volunteer Corps brand guidelines, and technical limitations.

Competitive analysis: nonprofit sites are clear, communicative, and engaging

I completed a competitive analysis on 10+ nonprofit websites, including ones that YVCHR highlighted.

DEFINE

Target Audience

Youth Volunteers

New volunteers come to the website to learn about YVCHR and its mission and programming, while current volunteers come to sign up for events and stay up-to-date on programming.

Parents

As YVCHR organizes events for youth volunteers, parents are an essential segment. We want to ensure that the site is informative, trustworthy, and clear for them.

Donators & supporters

YVCHR is an nonprofit that relies on donations. Ensuring that this audience understands YVCHR’s mission and can easily donate is crucial.

Community partners

Businesses and organizations come to YVCHR to find volunteers to help with community projects. They need to be able to easily seek out info.

Insights

“YVCHR's website is a critical communication tool! Without a polished, eye-catching, professional-grade website that is easy to navigate, we risk losing participants, community partners, and donors.”

— Katie Morgan, Executive Director

DEVELOP & ITERATE

Revamping the information architecture

After proposing a new information architecture setup and rounds of discussions with YVCHR leadership, we successfully streamlined the site from 28 pages to 19 essential ones.

Initial ideation

Focused on incorporating learnings and ideas across our audience and competitive research.

Lo-fi wireframes after iteration

New round of work based on YVCHR’s priority initiatives after discussions with Katie, Executive Director.

Usability testing revealed confusion about programming and other flaws

I developed hi-fidelity wireframes to test with end users, as we felt that a more complete prototype would allow the testers (which included teenage volunteers) to visualize the site better and focus on giving constructive feedback. We conducted testing with Reagan (a teen volunteer), and Kimberly (a parent who also staffed some YVCHR events).

Overall, users saw the prototype as a much more professional and streamlined site that addresses the formatting and content issues of the original.

New homepage was approved!

DELIVERY

Next steps

After implementing the new home page, we will revamp other pages following the same designs and guidelines of the homepage. We will continue to test and iterate, especially with target users like volunteers and parents.

Thank you for reading!