Silicon Valley pet Project

RESPONSIVE WEBSITE case study

I did a resigned and developed a responsive website Silicon Valley Pet Project, tailored for both mobile and desktop users. crafted a professional online presence that showcases the company’s services and builds trust with potential new pet adopters. The site features a user-friendly new pet adoption area , an updated about us section and a donation section This project demonstrates my ability to create impactful, client-focused solutions that elevate businesses in a competitive digital landscape.

Background

Silicon Valley Pet Project (SVPP) was established in November 2014 in San Jose, with a mission inspired by Silicon Valley's innovative ethos. The organization aims to create a professional and sustainable animal welfare initiative that celebrates rescue pets.

SVPP is organized into specialized teams that focus on various areas such as rescue operations, foster parent support, marketing and communications, volunteer management, development, administration, and more. Committed to teamwork, professionalism, and adaptability, the organization strives to assist more animals in the community. SVPP works to ensure that volunteering, fostering, adopting, or donating is a rewarding, educational, and community-oriented experience.

The Problem

The Silicon Valley Pet Project website currently suffers from outdated responsiveness and an overall lack of modern design elements, which hampers user experience and engagement. Although the website contains essential information and functionalities, its outdated layout and navigation make it difficult for users to access key content on various devices. 

To enhance user interaction and meet contemporary web standards, a comprehensive redesign is necessary. This includes updating the homepage to better reflect our mission and values, aligning business goals with user expectations, and optimizing the contact page for accessibility and ease of use. By implementing these changes, we aim to create a more dynamic and user-friendly website that effectively serves our community and promotes our initiatives.

The Solution

The primary goal of redesigning the Silicon Valley Pet Project website is to create a fully responsive and user-friendly platform that enhances the overall visitor experience. This initiative aims to modernize the website's design by updating page layouts, improving navigation, and refreshing button styles to ensure intuitive usability across all devices. 

By fostering a welcoming and engaging online environment, we seek to better connect with our audience, effectively communicate our mission, and encourage greater participation in our initiatives. Through these improvements, we aspire to strengthen our community presence and make it easier for users to access vital information and resources related to pet care and adoption.

How does silicon valley pet project website work?

Research

My approach to rebuilding the Silicon Valley Pet Project website was deeply rooted in user research. I conducted in-depth user interviews to understand specific needs and pain points, performed a competitive analysis to identify best practices and market opportunities, and utilized card sorting exercises to inform content organization and improve navigation. This comprehensive strategy will drive design decisions and optimize the user journey

Goal

Understand User Needs and Expectations: Determine the key information that potential pet owners expect to find on a renovation website, such as details about available pets for adoption, donation options, and inspiring stories of past adoptions.

Discover Engagement Preferences: Assess how users prefer to interact with the website, including their interest in requesting information about adoptable pets, the features they are most likely to utilize, and whether updates could enhance overall website usability.

Identify Pain Points: Gain insight into the challenges and frustrations users encounter when searching for pets to adopt online, ensuring these issues are addressed in the design.

Explore Differentiation Opportunities: Investigate ways the Silicon Valley Pet Project can distinguish itself from competitors by fulfilling unaddressed user needs, ultimately enhancing its appeal and effectiveness.

Research Methods

Competitive Analysis

For the competitive analysis, I focused on local websites dedicated to pet adoption to assess how they compared to the design of the Silicon Valley Pet Project (SVPP) site. I analyzed three websites: adoptapet.com, hssv.org, and aspca.org. I found that all three sites fell short in enhancing the pet adoption experience and lacked robust social media integration, as well as dedicated mobile apps for user accessibility and engagement.

User Interviews

I interviewed two participants who currently work for veterinary and adoption agencies, and they noted that many pet adoption websites tend to be outdated or difficult to navigate. Both participants emphasized that the photo sections often contain small images or lack detailed information about the animals. This deficiency can lead to users losing interest in the animals and ultimately exploring other options for adoption.

Card Sorting

Cart Sorting: The final phase of my research involved conducting a card sorting activity using Maze, an unmoderated app, which was completed by 12 participants. The activity presented five categories: the contact page, home page, payment page, pet adoption page, and user sign-up page, with a total of 28 cards for users to organize. The results revealed a strong consensus among participants, who unanimously agreed that each of these pages is essential for the redesign of the Silicon Valley Pet Project (SVPP) website.

Affinity Map

I then created an affinity map with what users from the cart sorting thought were essential, important and optional for each page. Which would give me a better example of what would need to be featured on the redesign of the website.

User Feedback and Suggestions

  • Strong Consensus: Certain cards, such as the Contact Form, Welcome Message, and Available Pets Gallery received unanimous agreement, indicating their essential roles on their respective pages.

  • Variability in Preferences: Cards like the About Us Section and Success Stories showed lower agreement rates, suggesting a need for clearer classification or potential reevaluation of their relevance.

  • Recommendations:

    • Prioritize visibility of high-agreement cards on their respective pages for a more user-friendly experience.

    • Clarify the labeling and purpose of content areas associated with lower agreement to enhance user understanding and accessibility.

Personas


The subsequent step in my process involved creating two personas that represent distinct needs and target audiences for the Silicon Valley Pet Project. These personas provided insights into the needs, goals, and challenges faced by potential pet adopters, ensuring that the design solutions were user-focused and aligned with their experiences. The personas served as a consistent reference throughout the project, keeping the user's perspective at the forefront of the process.

Business Goals, User Goals, and Common Goals

In designing the Silicon Valley Pet Project website, I prioritized aligning user goals with business objectives. This approach ensured that the shared priorities of prospective adopters and the organization’s aims were central to the project, creating a cohesive experience that serves both users and the company effectively.

Business Goals

  • Increase Adoption Rates: Aim to improve the number of pets successfully adopted through the website by a certain percentage within a specific timeframe.

  • Enhance Brand Recognition: Increase visibility and awareness of the Silicon Valley Pet Project in the local community and beyond through targeted marketing campaigns.

  • Improve Website Performance: Optimize the website's user experience and loading speed to enhance user engagement and retention.

  • Engage with Local Businesses: Establish partnerships with local pet-related businesses for sponsorships or cross-promotions.

Common Goals

  • Promote Animal Welfare: Both the organization and its users share the common goal of improving the lives of homeless pets.

  • Foster a Sense of Community: Creating a thriving community that supports pet adoption and responsible pet ownership.

  • Enhance User Experience: Continuously improving the website and its functionalities to ensure it meets the needs of both the organization and its users.

  • Educate the Public: Raising awareness about the importance of adopting pets and the benefits of spaying/neutering.

User Goals

  • Find a Pet to Adopt: Users want to easily search for and find pets available for adoption that fit their lifestyle and preferences.

  • Access Resources: Users seek information about pet care, training, and adoption processes to make informed decisions.

  • Share Success Stories: Users may want to share their own adoption success stories, helping to inspire others to consider adopting a pet.

  • Easily Compare Pets: Users want the ability to compare different pets based on factors like breed, size, age, temperament, and health history to find the best fit for their home.

Feature Set

A feature set was developed for the Silicon Valley Pet Project to prioritize features based on user needs and business goals, derived from interviews and competitive analysis. This roadmap provided a structured approach to building a functional and user-friendly website, while also outlining a plan for future feature additions.

DESIGN

I developed a site map for the Silicon Valley Pet Project that incorporates four distinct navigation levels: starting with the home page, followed by a main navigation, then a secondary navigation, and concluding with a third navigation that directs users to various sections of SVPP. This site map was designed to focus on key pages, ensuring a smooth and intuitive experience for users as they explore the website.

Site Map

Branding of Silicon valley pet project

My approach to rebranding the Silicon Valley Pet Project centered on improving the user's experience. I retained the core color palette of blues, greens, and whites, but introduced calming blue gradients and pristine white backgrounds to create a more inviting and accessible website.

The logo was streamlined for better navigation, and the typography was strategically chosen – Lora for its classic elegance and Mulish for its modern readability. This resulted in a website that’s both visually appealing and easy to navigate."

Low-Fidelity Frames

The redesign of the Silicon Valley Pet Project began with low-fidelity desktop wireframes, establishing the site's core structure and layout. User testing provided essential feedback, leading to revisions that optimized key flows like 'About Us,' adoption, and donations. High-fidelity wireframes were then developed, focusing on visual and functional refinement. The UI implementation significantly elevated these frames, bringing the design to its optimal form. Finally, a mobile-responsive layout was designed and validated to ensure a seamless user experience across all devices.

Wireframes

High-Fidelity Frames

Usability Testing and Refinements

Ater creating the high-fidelity web pages, I developed a prototype that highlighted three distinct flows derived from the site map. These flows consisted of:

  1. Navigating to the "About Us" section

  2. Adopting a dog

  3. Making a donation

These flows were designed to offer users an intuitive experience as they explored the website's core functionalities. I uploaded the prototype to Maze, allowing users to engage with it in an unmoderated setting and provide their feedback.

Users responded positively to the layout and redesign, noting the following

Positive Aspects:

  • User-friendly interface with an appealing design.

  • High ratings for usability and navigation ease.

 Areas for Improvement

  • Increase interactivity on the dog adoption page and ensure all cards are clickable.

  • Streamline the donation process to minimize clicks and enhance button functionality.

  • Make call-to-action buttons larger.

Suggestions for Improvement

  • Add more content to the About Us section for better engagement.

  • Ensure all interactive elements work properly.

  • Provide clearer navigation instructions for dropdowns and buttons.

Refining the Prototype after usability testing

Following the completion of the unmoderated prototype testing, I conducted a thorough review of the collected user feedback. This analysis revealed specific areas for improvement, prompting me to implement several key changes. These changes were not merely cosmetic; they were designed to directly address user pain points and enhance the overall functionality and usability of the website. By incorporating user feedback into the design process, I was able to create a more intuitive, efficient, and ultimately, more satisfying online experience for all visitors.

Problem ( Figure 1)

Feedback from usability testing indicated that users experienced difficulty with the size of the 'Adopt' and 'Donate' call-to-action buttons on the homepage, suggesting they be increased for better visibility.

Problem ( Figure 2)

A key finding from usability testing was that users wanted the ability to click and explore all dog profiles, as the current design only allowed interaction with Dino's, restricting their selection.

Solution ( Figure 2 )

Responding to user feedback from usability testing, I enlarged the 'Adopt' and 'Donate' call-to-action buttons, resulting in a more user-friendly and accessible design

Solution ( Figure 2)

I added two dog profiles per user feedback, improving adoption options and experience. This addressed a key user request.

My Reflection & Future roadmapping

The Silicon Valley Pet Project website effectively meets the company's need for a professional online presence, enhancing visibility and accessibility for prospective adopters. By prioritizing user-centered design, the site now effectively showcases the organization's services, builds trust with updated and fully designed pet profiles, and simplifies the donation process to support the project's ongoing mission.

Although there are opportunities to further expand the site with additional features, such as an Events section, a Contact Us page, and profiles for other types of animals like cats, the current design establishes a strong foundation for the company's growth in the digital landscape. Overall, this project was both enjoyable and challenging, providing valuable insights throughout the process.

Lessons learned:

From this experience, I gained two key insights:

  1. Test Early: Conducting tests early in the project is crucial, as it allows for timely improvements and helps identify issues sooner.

  2. Plan and Finish: Effective time management is essential. Completing tasks the same day ensures organization and prevents delays.

These lessons will enhance my efficiency on future projects.