oc humane society
(Responsive web design)
Find Your Furry Friend, Make a Difference, Give Back
Background
Project Focus: Improving the donation platform, homepage, and volunteer sign-up process for the OC Humane Society website.
Challenges Identified: Addressed issues like the lack of online donation options, an unengaging homepage, and a confusing volunteer process.
Objectives: Aimed to make donations easier, the homepage more user-friendly, and the volunteer process straightforward.
The shelter's goal is to find a permanent, loving home for all of our pets and to provide rehabilitation whenever possible.
Goal: To redesign the OC Humane Society’s website to simplify online donations, create an engaging homepage, and streamline the volunteer sign-up process.
The Design Process
Discover
Define
I’d like to explore ways to enhance the online donation process by implementing electronic payment options, making it easier for users to contribute to the cause.
Ideate
Jessica, marketing manager and animal lover.
Goals: wants to easily find donation options on her mobile device, complete tasks quickly with minimal steps, and support causes seamlessly without dealing with manual forms, especially when she’s on the go.
Pain Points: gets frustrated by the lack of easy online payment options, feels discouraged by broken links and cluttered pages when trying to donate, and finds unclear labels like “Paw-ticipate” confusing.
A feature set categorizing a list of features into 'must have,' 'should have,' 'could have,' and 'won't have.
Prototype
Test
Research Objective
To identify user pain points in the donation, homepage, and volunteer processes to inform design improvements that enhance usability and engagement.
Methodologies
Competitive Analysis: Compared OC Humane Society, SPCA LA, and OC Animal Care websites, focusing on donation visibility, ease of use, options, impact information, and recurring donations to identify strengths and weaknesses.
User Interviews: Asked participants to complete tasks like finding volunteer info, donation details, and adoption forms to uncover usability issues and pain points.
Competitive Analysis
Insights: The OC Humane Society's donation process could be improved by making it more visible, easier to use, and offering recurring donation options, like its competitors.
User Interviews
Conducted 1:1 interviews with 5 participants.
Insights:
Navigation & Labeling Issues: Users struggled with unclear labels and navigation, particularly on mobile devices, with terms like "Paw-ticipate" causing confusion. There is a need for more intuitive and direct access to volunteer and adoption information, especially on the homepage.
Donation Process Frustrations: While the donation process itself was straightforward, the lack of electronic payment options (e.g., credit card, PayPal) and the requirement to print and mail forms created frustration. Users strongly preferred an online payment system.
Broken Links & Overload of Information: Multiple users encountered broken links, especially for adoption forms, and felt overwhelmed by too much information on pages. Simplifying navigation and consolidating sections would enhance user experience and engagement.
Affinity Mapping
Learning and Guesses: Users had trouble with confusing navigation, broken links, outdated donation methods, and a poorly optimized mobile experience, preferring simpler, direct paths and online payment options.
POV’s and HMW’s
Point Of View’s
I’d like to explore ways to streamline the navigation and fix broken links on the OC Humane Society website to help users quickly access adoption information and forms.
I’d like to explore ways to simplify the terminology and enhance the visibility of volunteer information on the OC Humane Society website to make it easier for users to find and engage with volunteer opportunities.
User Personas
Research Findings
Discoveries from User Interviews: Users found the navigation confusing, struggled with broken links, and wanted clearer labels, while preferring easier processes and electronic payment options.
Challenges: Manual donation steps and broken links made it hard for users to complete tasks smoothly.
Project Goals
Create a responsive website for the OC Humane Society that makes it easier to navigate, simplifies donations and volunteering, adds secure payment options, and provides clear, updated information to build trust and boost community involvement.
Feature Set
User Flow
Created user flows based on the key needs identified from user testing feedback and user personas: finding volunteer information, donating, and adopting.
Wireframing
How Might We’s
Wireframing
How might we create a seamless online donation experience that allows users to contribute quickly and easily using electronic payment methods?
How might we redesign the navigation structure and ensure all links are functional to provide users with quick and easy access to adoption information?
How might we use clearer language and more intuitive labels to make volunteer opportunities more accessible on the website?
Chris, software engineer and first-time dog adopter.
Goals: wants to easily find clear, up-to-date adoption requirements and forms, access them with minimal clicks and no broken links, and have a smooth, straightforward adoption process with all the information in one place.
Pain Points: frustrated by broken links and outdated adoption form information, overwhelmed by confusing navigation with too many submenus, and annoyed by having to dig through multiple pages for simple details.
Low Fidelity
High Fidelity
Usability Testing Results
Overall Usability: Users found the website easy to navigate but suggested enhancements to design, readability, and personalization.
User Flow Performance
Donation Flow: 5/5
Users found the donation process simple, with suggestions to add more payment options and a confirmation with sharing features.
Volunteer Sign-Up Flow: 4.5/5
The volunteer process was quick and well-received, with suggestions to personalize applications, adjust time selection, and add a photo for the dog grooming role.
Interface Feedback
Positive:
Users found the donation and volunteer sign-up processes simple and quick.
The website was easy to navigate overall.
Negative:
Users suggested adding PayPal and receipt confirmation with social sharing options for donations.
Improvements were recommended for the volunteer sign-up, such as adding a personalized text field and correcting the default time selection.
User Satisfaction: All users rated the donation process 5/5 for satisfaction, and the volunteer sign-up process received an average score of 4.5/5, with most users having a positive experience.
Recommendations 💡
Increase flexibility in donation options, add PayPal as a payment method and include social sharing features for completed donations to help users spread awareness.
Enhance volunteer form customization, include a text box for users to share their reasons for volunteering, correct the default time selection, and add pet images to improve user engagement.
Using a pop of color, like the logo's orange, could enhance the visual appeal and make call-to-action buttons more prominent.
Results 📊
Definitions of Success and Performance Metrics
Task Completion Rate: 5/5
Average Time to Task Completion: <1 minute for each task
Average User Satisfaction Rating: 4.5/5
Average Error Rates: 1 error per task
What Worked 👍
Ease of Navigation: Users found the website easy to navigate and the overall process simple and efficient.
Efficiency & Accuracy: Task completion rates were high, with minimal errors and fast completion times.
Positive User Experience: The design provided a positive user experience, with high satisfaction scores for both donation and volunteer sign-up processes.
What Needs To Be Changed 🔧
Flexibility Payment Options: Add additional payment methods like PayPal to give users more payment options.
Volunteer Form Customization: Include a text box for users to input the reason why they want to volunteer, helping OC Humane Society learn more about the volunteers applying. Correct the default time selection and add pet images can help improve user engagement.
CTA Color & Social Sharing: Users recommended adding a color pop, such as the logo’s orange and social media visibility for better user engagement.
Revisions ✏️
The donation process now includes PayPal as a payment method, providing more flexibility for users.
2. Added social sharing options on the 'Thank You' screen to allow users to share their donation with their community.
3. To enhance the call-to-action, the 'Donate Now' button was updated with a color change from blue to the orange/yellow from the logo, making it more prominent.
Prototype Link:
Final Revisions ✅
The donation process now includes PayPal as an additional payment method, offering users more flexibility. Social sharing options have been added to the 'Thank You' screen, allowing users to share their donation with their community. To enhance the call-to-action, the 'Donate Now' button has been updated with a color change from blue to the orange/yellow from the logo, making it more prominent and eye-catching.