Camp Hope

Loved, Valued
and Created
for Purpose

Image alt tag

This is a group project to redesign a non-profit website to help with the Camps' efforts to increase awareness for the volunteer opportunities for their summer programs

This non-profit website redesign was a group project developed for Camp Hope, a faith-based youth camp in Colorado.

My role was integral to each process in the team effort. My main achievements during this project included the re-design of the logo and the development of a new user-friendly navigation . My work with the group resulted in a streamlined volunteer sign-up process as well as being integral to the new friendly look and feel of the site.

Image alt tag

Problem

Based on our observation, Camp Hope’s website lacks informational hierarchy and a clear user flow to access information. Currently, there’s a lot of text-heavy information on the site and it's confusing for users to find volunteer information.

How might we reorganize and redesign the site to be more easily accessible and navigable to empower potential volunteers to engage with our organization?

The Goal: Create an informative and streamlined experience for potential volunteers and allow users to sign up directly on the website. 


Image alt tag

Solution

We created an inviting and intuitive site with a clear path to volunteer enrollment.

We achieved greater understanding by designing elements and interactive forms which made choosing a role and a date easy for potential volunteers.

The new logo design helped to inform the new interface which is now more vibrant and has a better hierarchical information for user to learn about the camp and it's opportunities.

Tools

  • Figma

  • Miro

  • Trello

Team

  • 4 UX designers

  • 4 Interviewers

My Role

  • UX design

  • UX research

  • Interviewer

Timeline

  • Overall: 4+ weeks

  • Discovery & Research: 2+ weeks

  • Design & testing: 2 weeks

One Step at a Time
Camp Hope

Aligned values and clear expectations are

key to attracting volunteers!

Surveys

We distributed a survey to the community via social media to identify the key factors people consider when looking for volunteer opportunities.

We found that the majority of people volunteer to make a positive impact in their community and want to have a clear understanding of their roles.

This informed us about the goals and pain points of potential users.

Camp Hope

Sarah, we need you!

Persona

Volunteering takes a special kind of person. We wanted to understand how to attract volunteers to the summer programs and what would empower them to sign up for the programs.

Our persona was informed by user interviews and surveys and we continuously updated and referred to this persona throughout the process.

This kept our design focused on potential volunteers, who in turn would benefit Camp Hope.

The persona was a key component to developing the sites volunteer messaging.

Analysis and Heuristics

Existing navigation of Camp Hope site needs help!

https://youtu.be/0mRG7AE9nC0

Site Analysis

Our first step to helping the camp recruit volunteers was to take a look at the current website and volunteer onboarding process and find opportunities to improve the experience.

The unorganized interface of the site could potentially be a road-block for people interested in aligning themselves with these opportunities since basic information about volunteering was not presented directly on the site.

Wireframing and Prototyping

Camp Hope

Information hierarchy was established through a navigation bar with dropdown menus for readily discoverable content.

Using Figma, our team translated our sketches into low-fidelity wireframes for desktop. We developed a navigation that has a clean and simple interface by presenting the information and actions into discoverable dropdown menus and content grouping.

As a result of interviews and the needs of our persona, we made sure that there was a clear path for the user to find volunteer roles, answer a brief questionnaire and begin the application process for volunteering.

Usability Testing

Camp Hope

Our User testing Plan was useful for providing a single template for each member to use while conducting separate interviews in different settings

Next we created a fully-functional, high-fidelity prototype of the new navigation and sign-up process using Figma.

We interviewed 5 testers who matched the persona developed during our research to make sure our decisions could be validated.

We conducted 5 usability tests in the first round and 2 after making the changes most important to the user and the organization. Here is what we found:

Key Findings

We conducted an A/B test for the scheduling feature which allows the volunteers to sign up for their chosen session

"The calendar and scheduling feature seems disconnected"

3 out of the five users found the calendar field and select feature to be awkward.(A) At first, we had them choose their desired session and training from the dates from the calendar and enter them into a field. This seemed the best option to cater to the users timeline. After some review and an A/B test we found a better solution.

The Solution

After reviewing the scheduling information for training sessions and the different camp sessions we came to the conclusion that these dates were set and so it would make more sense and save the user time by designing buttons which reflected the determined sessions and the user could just click their desired dates. (B)

Camp Hope

The B option tested well and was an improvement for users' success rate because it eliminated the need to cross-reference the dates with the sessions

UI Design

Camp Hope

We incorporated much brighter and more inviting colors, typography and components to evoke a fun and inviting interface.

Style Guide

Once the usability of the navigation was validated, we began incorporating moved on to design the final screens in Figma.

The goal of our style guide was to create a visual identity that’s aligned with the brand’s values and message, which is: “Loved, Valued and Created for Purpose”.

The use of a grid and typographic hierarchy made the navigation intuitive and the information easy to find.

Camp Hope

The new logo was a chance to refresh the identity of the organization with a visually inviting look to complete the branding of the organization.

High-fidelity Prototype

This shows the distinct user path to the volunteer application.

User Path to the Volunteer Application

User testing validated our navigation re-design. Potential volunteers were able to discover the roles available, the dates required and apply online through the site with minimal clicking which decreases drop-offs and increases engagement with the camp through direct action!

Learnings

Our team met many challenges through this process. We learned the value of clear communication through the delegation of tasks as well as how to compile separate data points from different research methods to provide insight into a unified development process. The design and implementation of multi-layered application, contact and reference forms gave us insight into managing how the user would approach the onboarding process most effeciently. It really taught us the importance of referencing the developed persona to inform our design decisions to best impact the user.

Next steps

This was a great opportunity to analyze a site with so much potential and create a new experience that builds on the values and mission of the organization by instilling a sense of inclusion, a clear path and community involvement. If we had the opportunity to improve the site even further we would definitely include new interaction for the Donate section of the site. Camp Hope is community funded and this would greatly improve the accessibility to donation opportunities.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!
...or just say hello on my social media.