summary
Saving Huskies Through Adoption
In the HTML and CSS course I took at Des Moines Area Community College, I developed a responsive website using the Bootstrap 5 framework. This project aimed to provide a practical understanding of modern web design principles and responsive layout techniques. Key features of the website include responsive design, implementing Bootstrap grids, and utilizing components like cards.
Through this project, I gained hands-on experience in building dynamic, visually appealing, and functional web pages, preparing for real-world web development challenges.
project overview
Creating a Website to Increase Adoptions
This project focused on two goals as a real world challenge, including:
increase adoption rates
provide educational resources
The primary goal of this website was to increase adoption rates by ensuring potential adopters can quickly and easily access relevant information about available dogs. Speed to relevant information, such as dog profiles, is crucial. Comprehensive profiles for each dog, including photos, videos, and personality descriptions, can significantly aid potential adopters in making informed decisions.
The secondary goal of the website was to serve as a community engagement tool by providing educational resources. Offering information on pet care, training, and responsible dog ownership not only educates the community but also promotes responsible pet adoption. Additionally, these resources enhance the website’s visibility and SEO optimization, benefiting the organization by attracting more visitors and potential adopters.
problem
Desk Research on Adoption Rates and Competitors
According to Hearts Speak, research has found that 65% of adopters viewed photos of dogs online before deciding to adopt. Moreover, 64% of these adopters considered the photos extremely important or very important in their decision. Positive images, where dogs appear happy and engaged, are particularly influential.
Photos that create an emotional response like the images in the left column above, can significantly increase the likelihood of adoption. By tapping into the human emotions in this way could significantly increase adoption rates for this husky rescue. I started a collection of dog photos and analyzed the emotional response they evoked. This gave me a sense of what photos I needed to gather for the site.
To identify common patterns and opportunities for differentiation, I reviewed competitor websites to learn about their methods for presenting dog profiles. I found multiple issues that were problematic, including:
1. Profiles were hard to find: Many sites lacked a natural progression through calls to action (CTAs), often requiring users to take multiple steps before they could view a page of adoptable dogs.
2. Missing photos: Numerous profiles were missing photos, which is a significant drawback as many potential adopters are likely to bypass profiles without images.
These observations highlighted the need to improve accessibility and presentation on our site.
solution
Display Profiles On the Home Page
By implementing profiles on the home page, the user experience is streamlined, ensuring all potential adopters can easily find and view detailed profiles of all available dogs, ultimately increasing the chances of adoption.
As our second goal for community engagement, the requirement was focused on educational resources to the community to build credibility, trust, and engagement. Some ideas I had included:
downloadable care guides
checklists
infographics on preparing for a new pet
grooming tips
common health issues
By offering these educational resources and opportunities, a dog rescue can establish itself as a trusted source of information and support within the community, ultimately leading to increased credibility, trust, and engagement.
Implementing these solutions in VS Code, my site is live and earned an almost perfect score in development and presentation.
View Live Website
What's Next?
Lessons Learned and Next Steps
My first experience with Bootstrap was slow and tedious, but by familiarizing myself with Bootstrap's customization options, including variables and classes, I was able to tailor the framework to meet specific project requirements.
I've come to understand that building a website with Bootstrap is an ongoing learning journey. Staying updated on new features, best practices, and industry trends allows for continual skill improvement and the creation of better, more user-friendly websites.