Aligned values and clear expectations are
key to attracting volunteers!
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.
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.
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
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.
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
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.
-
Volunteering information and their roles are hard to find. Information does not have a visual hierarchy and the text-heavy format hinders discoverability.
-
Volunteer opportunities are hard to find and interaction is limited to email correspondence.
-
The mission statement and the "About" page are hidden and should be front and center to highlight the opportunity for volunteers to make a positive impact in the community
Wireframing and Prototyping
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.
-
Camp Hope's Mission Statement is now front and center on the homepage to align users with the organizations' values
-
Descriptions of the roles and responsibilities keeps the user on the site and moving toward the end goal of signing up to volunteer
-
We provided information about what to expect from your experience and how to prepare for the opportunities.
-
Forms for the application and questionnaire allow users to submit their information on the site and increase trust in the organization and the opportunities available.
Usability Testing
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)
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
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.
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
-
Our homepage aligns the user to the Camp's Mission Statement and a brief overview of their Values.
-
A complete description of the roles and positions clarifies the opportunities available and empowers the user to choose a role they are excited about.
-
The application process allows users to choose which sessions they would like to participate in with the click of a button!
-
Brief descriptions of the types of programs allows users to learn more about the sessions and how they might align to the users requirements
-
If the users still have more questions or would like to discuss the opportunities further they can now message Camp Hope directly without leaving the site.
-
Volunteers are a valuable asset to the camp and we felt it was important to thank each applicant for their interest and time. This is also a feature to assure the user their information was received.
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.