Boulder Humane Society
Redesign the look and feel of the current website with a focus on improving the journey for users looking to apply as volunteers at the Boulder Humane Society.
UX Design, UX Research
The Challenge
The Boulder Humane Society (BHS) is in need of volunteers that can commit to a variety of tasks and times. Currently, they receive volunteer inquiries through walk-ins, phone calls, email, and online. While they love the interest and always need help, managing these requests via walk-in, email, and phone calls is difficult to and creates additional work for staff and that are already spread thin. Often this results requests being misplaced and/or are difficult to organize.
BHS would love to drive the majority of these requests through their website in a way that is easy for users to locate and navigate, and also helps their team field requests in a more efficient manner.
Discovery
Site Analysis
In order to assess the goals for this project, I first needed to dig into the current state of the site. In doing a site analysis I quickly realized it was designed and organized in a way that made it difficult for users to easily navigate to volunteer information, in addition to much of the other information on the website.
​
Focus on the Users
So, who is interested in volunteering at the Boulder Humane Society? After interviewing employees and current volunteers it seemed there were three primary user groups I needed to focus on:
-
Stay-at-Home Parents (SAHP), ages 35-50
-
Preteens/Teens, ages 12-18
-
Retired/Elderly, ages 65+
Once I had a sense of the main user groups, I interviewed current and potential volunteers in these groups to learn more about their goals, needs, and pain points with the current BHS volunteer signup process. From there, I created three user personas based on the feedback gained from these interviews.
Noteworthy: One interview candidate in the SAHP category had unique insight, as she had previously been the Director of the Detroit Humane Society. She felt that both volunteers *and* employees would benefit from a system with more customized volunteer options, as this would reduce frustration and potential loss of volunteers *plus* make scheduling easier for the employees managing it. She also suggested implementing a way for volunteers to specify any physical or health limitations would be ideal in order to avoid putting volunteers in dangerous situations and also reduce liability issues for the organization.
User Personas
This is your Team section. Briefly introduce the team then add their bios below. Click here to edit.
Identifying Pain Points
-
Determining how to volunteer on a personal computer or mobile device was unclear and frustrating
-
Lack of transparency into available roles and time slots for volunteering
-
Lack of ability to identify unique user needs when applying as a volunteer (ex. allergies, disabilities)
-
General ability to find information easily was difficult
-
A desire for improved accessibility features
​
Competitive Audit
I decided to do a competitive analysis of other Humane Society websites plus other non-profit animal shelter sites to see what similar sites were doing to solve this user problem. Many of the websites I looked at had much cleaner design elements using easier to read fonts, color contrast, smart grouping, and hierarchy, as well as accessibility features lacking on the BHS site (like being able to tab through information/links). Additionally they had thoughtful organization of user journeys to access volunteer signup information. I also noted the time it took for me to locate the information needed to volunteer on these sites was significantly less than the time it took for me to access this information on the BHS website.
Ideation
As I prepared for the design phase, I wanted to consider, how might we solve these pain points for our users?
-
How might we make it easier for someone to sign up to volunteer on a mobile device?
-
How might we make it easier for volunteers to specify health or mobility limitations?
-
How might we make information on volunteering easier for users to find?
-
How might we improve accessibility features?
-
How might we make scheduling easier for volunteers?
-
How might we make managing volunteer requests easier for BHS employees to manage?
​
Design Process
Structure
First I wanted to look at the structure of the user journey and determine what, if any areas of the path, could be altered to address user pain points. This is what Boulder Humane Society had in place in order for Users to complete the task of volunteer registration:
Users were required to hover over How to Help on the main menu in order for a drop down menu to then also hover. Then users were required to carefully navigate over to ‘volunteer’ and select it. This was problematic for several reasons.
-
In my research users noted frustration as they expected to be able to click on How to Help and be taken to a new page. However as noted above, this was not the case. There was no ‘How to Help’ page.
-
If users veered even slightly outside of the drop down from the ‘How to Help’ link, the menu would disappear. Again, users cited frustration over this in my research.
Once users made it to the Volunteer page, they were often unsure of where to go next. Below are snapshots of the user’s perspective.
​
User’s first full view of Volunteer Opportunities page:
Once users scroll down, the first three options are visible:
Users must then scroll further to see the remaining volunteer options:
Mobile version:
In my research, users found it frustrating that they had to continually toggle up and down to see all of the options on the page and could only view them all simultaneously if they zoomed out of their screen size.
After a few iterations, I proposed the flow below:
Some key differences:
-
How to Help is no longer simply a link that leads to a drop down menu. When clicked, How to Help takes you to a page titled the same, where all items that were previously on the How to Help drop down menu, will not be presented as different categories on the How to Help page. Why? Because users expect this.This is predictable user behavior; they expect to be able to click on a main menu and be taken to a fresh page. It also addresses the frustration felt by users regarding the sloppy hovering behavior.
-
Paths to the Volunteer Application: In the previous flow, the application could only be accessed via the Current Opportunities page. However Individuals looking to fill community service hours as well as some of the Youth Opportunities require filling out the volunteer application. Thus it made sense to have a path from both of those pages as well directly to the link.
-
I also wanted to drive those two pages to the current opportunities pages as well, as there may be opportunities there that would be suitable for all of those groups and linking directly to that page instead of backtracking will save users time and frustration.
-
Early Concepts
My early concepts were focused on two main areas: the How to Help page, and the volunteer signup form as users identified many frustrations with the initial volunteer form (which asked for only basic information and allowed users to select a single task of interest).
I wanted the How to Help page to have all of the information users needed to make their next decision in the user journey, located clearly in sight without having to scroll. The large hero image of a dog was not helpful at all to the users. Thus I eliminated that in all of my early concepts and used that space to provide information that users desired.
Focusing on the volunteer form next, it was important to address the user needs of being able to select multiple tasks of interest, record their preferred availability, and provide additional relevant information that would streamline the pairing of volunteers with appropriate tasks.
Digital Wireframes & Low Fidelity Prototyping
User testing for the low fidelity prototypes was overall very positive and little change was required before moving into mockups and high fidelity prototyping.
Mockups and High Fidelity Prototyping
Preparing for Mockups, I also could not help but notice the overall layout of the current site, from the header right down to the footer, could be cleaner, easier to read, provide better immediate access to needs, better direction, and just generally work better for users. Thus I started mulling over a refreshed design to achieve this as well.
Key to the success of the Boulder Humane Society is Volunteers, Donations, and Adoptions. Thus I felt it was important to add immediate, easy to see links to each of these on every page. I achieved this with colorful icons on the header and footer across the site.
​
Header
Footer
Accessibility
The Recite Me cloud-based assistive technology toolbar which was already on the website was brought over into the new design as well. I used color and placement to make sure it was easier to see on both the mobile website as well as the desktop version, and also placed this in both the header and footer.
​
Results
A more approachable design with thoughtful placement and arrangement of information that responds to multiple devices.
Customization throughout the Volunteer Sign-up: Users can specify duties they wish to volunteer for, make note of any physical, health, etc. limitations, and select day/time shifts that work with their schedules. Not only does this make the process easier for potential volunteers, but it also streamlines the process for those managing volunteer assignments at BHS.
​
High Fidelity Prototype
This working high fidelity prototype of the user flow for signing up to volunteer was created in Adobe Xd. Please have fun experimenting with the user flow!
​
Next Steps
-
Update the entire website based on the look and feel established in the user flow above.
-
Examine ways to improve user flows throughout the entire site, but primary focus would be on adoption and donation user flows.