Aligned values and clear expectations are
key to attracting volunteers!
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.
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.
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.
Figma
Miro
Trello
4 UX designers
4 Interviewers
UX design
UX research
Interviewer
Overall: 4+ weeks
Discovery & Research: 2+ weeks
Design & testing: 2 weeks
Aligned values and clear expectations are
key to attracting volunteers!
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.
Sarah, we need you!
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.
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.
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.
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:
We conducted an A/B test for the scheduling feature which allows the volunteers to sign up for their chosen session
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.
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)
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
We incorporated much brighter and more inviting colors, typography and components to evoke a fun and inviting interface.
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.
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.
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!
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.
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.
Want to work with me? Feel free to contact me!
...or just say hello on my social media.