HSSPV Case Study
Project Overview
Our Mission Objective: Redesign a responsive web design website prototype for a local nonprofit.
Role and Responsibilities: UX Researcher / UX Designer
Duration: 3 weeks
Team: Sahand Hasani, Rachel Baechtold, Jairo Diaz Gonzalez
Deliverables: Design Process (Research > Design > Iterations > Testing) & High Fidelity Prototype for both mobile and desktop
Tools: Figma, Procreate, Photoshop CS5
Executive Summary
Currently, the non profit we’ve chosen does not have great usability or an aesthetically pleasing user interface. A better UI can enhance the experience for both the shelter and potential adopters which can help increase adoption rates. By creating a visually appealing and user friendly website, this can attract more support from donors, sponsors, and volunteers.
Project Summary
We wanted to better understand how the current animal shelter works and find out the motivations and pain points that people have during the adoption process. By gaining insights into the existing user experience, we aimed to identify areas where improvements could be made to enhance the overall adoption journey.
User Research Phase
In the user research phase of our non-profit redesign for the animal shelter, we crafted a hypothesis statement, developed a proto-persona, and conducted interviews. Additionally, we sent out surveys to gather comprehensive insights
Hypothesis Statement
We hypothesize that by adding simpler UI and restructuring the information architecture of the homepage and navigation, users will feel more drawn to the shelter’s website - thus creating more opportunities for them, such as adopting, volunteering, donating, fostering, and fundraising.
We began to start our user research with a proto persona, a representation of the typer user we anticipated interacting with the pet adoption website. This proto persona served as the starting point for understanding the needs, preferences, and pain points of our users.
Name - Luna Lovegood
Behavioral Demographics
Age 25
Graduated from college
Moved to a new city
Wants to explore new home
Enjoys long walks
Pain Points
Adjusting to routine changes
Lack of support system
Balancing Schedule
Goals & Needs
Needs companionship
Needs stability & routine
Seeking a furry friend to begin her journey with
We focused on users who have previously adopted a pet from an animal shelter to gain insight into their interactions with other shelter websites and what factors motivated further engagement with those shelters. Our aim was to assist more animals in finding their forever homes and increase engagement with the shelter. We then conducted one on one interviews and distributed surveys online.
We conducted 6 in person interviews and we wanted to know three key things.
What are some prerequisites that need to be met for people that are considering adopting?
What would potential adopters like to know before choosing a shelter to visit and/or engage with?
When using a shelter’s website or digital platforms, how easy is it to find information about available pets, adoption procedures, and fees?
Key Findings from User Interviews
Transparency “Before selecting a shelter, I want to know how much overhead they take off donations and if they’re a kill shelter.”
Clear Information “The pet I ended up adopting wasn’t on the website at all…It was also hard to find times the shelter was open”
Feeling Prepared “I want to know if the shelter will give me further information to help after adoption (vet recommendations, etc.)”
Next, we wanted to reach a wider audience, so we posted a Google survey that was sent via Reddit and social media. Garnering over 73 responses in just a few days.
Key Findings from Surveys
Over 60% of users reported that they felt more encouraged to engage with the website further after browsing available pets.
Over 60% of users reported their main purpose was to adopt when visiting an animal shelter website.
80% of users perceive a shelters website as more trustworthy and reputable when its design is visually appealing.
After gathering these research insights, our user insight and problem statement cemented around the importance of providing transparency, predictability, and reliability for potential and future adopters throughout their adoption journey.
Problem Statement
We believe that creating a platform that prioritizes transparency and clear information for potential pet adopters will help users feel confident in their choices when adopting a pet, and lead to more animals finding their forever homes.
Define and Synthesize Phase
Entering the initial stages of our defining and synthesizing process, we used an affinity diagram to organize our insights and data. By visually mapping out recurring themes, patterns, and key finding, we wanted to distill this information into actionable insights that would inform our design decisions.
We later updated our persona to be more reflective of our user base after the information we had collected from our research. This further illustrates their needs and preferences, which will later influence our design decisions.
Name - Luna Lovegood
Behavioral Demographics
Age 25
Needs information to be clear before making a decision
Volunteers when she has time
Pain Points
Does not like long applications
Lack of transparency
Miscommunication
Goals & Needs
Explores new surroundings
Finding balance in her life
Expects reputable service
We then conducted a heuristic evaluation on the website. During this assessment, we noted several observations, such as details regarding adoption, volunteering, fostering, and sponsoring were not prominently displayed on the homepage, potentially hindering user engagement with the shelter’s most important aspects.
Ideation Phase
In our ideate phase, we created a storyboard which shows Luna’s story. This helps us visualize the user journey. It allows us to visualize how users might interact with the interface, and identify design solutions.
Brainstorming
For the next portion of the Ideate section, we used the “I Like.. I wish… What if…” method to generate a variety of innovative ideas and explore potential solutions to the identified design challenges. The photo to the left shows what this looked like in action.
Following the I like.. I wish.. What if.. Method, each team member selected their preferred favorite ideas. We then added our favorite concepts into our feature prioritization matrix, arranging them based on their perceived user impact from high to low and their complexity from high to low.
Following the I like.. I wish.. What if.. Method, each team member selected their preferred favorite ideas. We then added our favorite concepts into our feature prioritization matrix (shown right) arranging them based on their perceived user impact from high to low and their complexity from high to low.
From there, we then selected our new favorites again depending on what would be most impactful for the user. We picked features including ‘wanting the website to be more engaging’ and ‘including all useful information being on the homepage’ and ‘wishing there was more information provided on benefits of adopting rather than buying.’
Next we conducted card sorting of HSSPV’s homepage, going through the three phases of define, group, and structure. In this phase, we also added new levels of secondary navigation that were not previously included on the homepage to give users further clarity on the information that’s provided to them on the website that was originally hard to find before. Ensuring that we’re organizing the homepage to aid in our goal of transparency and clarity.
Prototyping Phase
In the prototyping phase, we translated our research and design concepts into interactive prototypes. This allowed us to test and refine functionality, ensuring an intuitive and effective user experience before final development.
Each one of our team members was tasked with creating the wireframe for our initial prototype. We then integrated our favorite ideas from each other's contributions.
Structuring Content
Next was deciding what we were going to feature on the homepage, drawing from insights we gathered during user interviews - such as unclear information and lack of transparency, and aimed to address these concerns. We outlined essential information to be showcased, aiming to foster trust with our users. We then later refined this information, as demonstrated later.
Testing Phase
During the testing phase, we conducted tests with our users to gather valuable feedback. This iterative process ensured that our design solutions were intuitive, user-friendly, ultimately enhancing the overall usability of the website.
Beginning User Testing
This version of the wireframe served as the basis for our prototype during our first initial round of user testing
From our first round of user testing, we got some notable feedback.
Pinning the navigation bar to the top of the page so that users would not need to scroll as far to get back to the top.
Making the donate button not so hidden
Enlarging the size of the search bar as users commented on how small it was
Rethinking some of the design choices on the Featured Pets portion of the page.
Restructuring the footer of the page as the partners portion looked disjointed.
Before
After
We relocated the donation button to increase visibility and then extended the search bar for enhanced user accessibility and engagement.
Before
After
Removed the borders around each featured pet for a cleaner, more modern look, enhancing visual appeal and focus on the pets themselves.
Before
After
Reorganized partner listings from a tight row with separators to a more consistent layout matching the rest of the footer, improving readability and visual harmony.
Adding Style and Flair
Next, we wanted to establish the overall theme of the website. We opted for an orange color palette, as it evokes a sense of excitement and playfulness, which resonates well with the nature of the organization. Using fonts with rounded edges to make our website feel more youthful
Prior to our last round of user testing, our team decided to make some changes based on feedback we had gotten from our instructor - we also made these changes to mobile and tablet as well.
Resizing the donate buttons near the footer as it did not match the size of the donate button at the header.
Adding horizontal lines instead of keeping information contained in a box
Changing the wording on the blog section from ‘See More’ to ‘Read More’
Upgrading our previously oval circles for our “How We Work” section to circles
Changing navigation color and moving our hero image off to the right so text would be more visible.
Before
After
Resized the donate button to the match the navigation bar and adjusted the text placement to create some negative space, enhancing visual consistency and readability.
Before
After
Replaced the box surrounding the text with two horizontal lines, maintaining emphasis while achieving a cleaner and more modern look.
Before
After
Updated images from ovals to circles, achieving a more modern and consistent visual aesthetic.
Lastly, we did one last round of user testing and below was some of the feedback we received.
Navigation bar was getting lost while scrolling so we made navigation bar one color and added a drop shadow to distinguish it from the background.
Spacing felt off for some portions of the website.
Changing the alignment of the buttons under “Featured Pets.” We then changed the alignment from centered, to left aligned to match with the post.
Fixing the partners portion in the footer as it didn’t feel connected with the rest of the information.
Widening text margins as we had previously changed our layout grid.
Before
After
Adding color to the navigation bar background and pinned it to the top while scrolling, enhanced the visual contrast and consistent accessibility for users.
Before
After
Here we aligned the Learn More button with the rest of the information, creating a more cohesive and organized layout.
Before
After
Further refining from our previous changes - we moved our partners to the left-hand side, optimizing the use of empty space and improving the layout balance.
Final Thoughts
Some of the feedback we got from our peers was wanting more use of the rest of our color palette, I think for future opportunities, I would like to explore how to use color more throughout my designs.
On the topic of color, the orange color that we had used was unfortunately not WCAG compliant. For my future projects, I would ensure to make sure my designs are WCAG compliant and ensuring that I create inclusive digital experiences that can be enjoyed and accessed by all users.
This project has also highlighted the importance of constantly iterating and improvement in design. It’s essential to recognize that even minor details can significantly impact user experience, and soliciting feedback is invaluable to refining designs. Always being open to feedback, striving to deliver the best possible solutions that prioritize user satisfaction and accessibility.
