WWAS - Woof Woof Animal Shelter
Tools used: Adobe XD, Figma, pen and paper
Woof Woof Animal Shelter is a local community animal shelter that helps dogs find new loving homes, helps take care of them, foster new puppies, educate new dog owners and help them train their dogs.
Tools used: Adobe XD, Figma, pen and paper
Problems :
Various animal shelter websites are cluttered, which make the crucial tasks of adoption and donation difficult
Users required multiple clicks to access the information
Layout of pages make the user feel overwhelmed with information
Users are unclear regarding the adoption process and services provided by WWAS
WWAS needed a responsive website so users could access their website on any device
Goals :
Design a responsive animal shelter website
Assist users to adopt their dog easily
Users should be able to view the adoptable dog remotely
Educate users regarding the care of the dog
Get the doggo trained by the new owner
Have an efficient user flow and clear navigation
Increase community awareness about WWAS through events and merchandise
My role :
Lead UX designer leading the Woof Woof Animal Shelter’s responsive website redesign.
My Responsibilities :
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and creating responsive design.
Outcomes :
User actions for donations increased by 66.67% during usability studies.
Doggie adoptions increased by 50% during the usability studies.
87% users reported eagerness to buy WWAS merchandise and completed corresponding actions during the usability study.
38% users expressed interest in WWAS community programs thus increasing awareness through involvement.
Increased user engagement was noted due to clear navigational cues, intuitive design, eye-catching images, and a simple user flow.
Understanding
the user
- My Design Process
- User Interviews
- Affinity Mapping
- User Pain Points
- User Persona
- Competitive Analysis
- User journey map
EMPATHIZE
I conducted research to understand my users and learn the challenges they were facing while adopting doggos
DEFINE
I analysed all my research to observe where the problems existed and what were the user pain points
IDEATE
I was able to come up with a range of crazy & creative ideas that would address user issues
PROTOTYPE
I built, real, usable representations of my ideas and had it tested with my users
TEST
I went back to my users for feedback and get their input after the use of the my prototype
REFINE
After I put my vision into effect & after testing, I was able to jot down areas to make the user experience better
While conducting my user interviews, I learned that individuals wanted the company of a loving dog during the pandemic, but did not have any remote access to check out the dogs and determine ahead of time if they should go for the adoption process. Also, they wanted to learn how to take care of the dogs and needed help with getting the dog trained. Some users, who could not drive, did not know that WWAS provided home delivery of their dog companions. The users demonstrated a need for a clean and efficient website with a clear navigational flow to improve their dog browsing experience before committing to adopting a dog, needed guidance to take care of their dog and train the dog to decrease the stress of the process and increase their confidence.
Note-taking during my user interviews allowed me to create an affinity map to help me understand user pain points and the specific challenges they were facing while using the website. It guided me to my next design path.
Navigation
Animal shelter websites are often confusing to navigate and do not have a clear user flow for adoption, fostering, volunteering and making donations.
Information
The information provided is laid out in a cluttered manner making it difficult to scan and understand services provided.
Experience
The animal shelter websites do not provide an engaging experience to encourage user action.
Lack of knowledge
Users are unaware of the breed of dog they should own based on their needs.
I created 2 personas after assessment of the user pool. Potential users will be individuals, either single or with small/big families, between the age group of 18 to 85 years who express the desire of adding a paw member to complete their family. These individuals may or may not be able to drive and may or may not use assistive devices such as keyboards or screen readers.
Sam is a 32 yr old freelance artist who needs an intuitive website that will help her select the best dog breed suited for her, checkout the pet online and learn tips on how to take care of them because she works during the operating hours of the adoption agency and has never owned a pet.
During the intial interview, Ms. Amelia Cruz, the administrator of WWAS, expressed that they need to increase the adoption rate of their puppers, increase donations to help their dogs and increase community awareness about WWAS through events and merchandise.
I conducted a competitive analysis by comparing the website user experiences and services provided by 2 direct and 2 indirect competitors.
After conducting the competitive analysis, I determined that there was a need for a responsive website that will allow the users to select a dog breed based on their requirements, will have doggy webcams to view the dog prior to committing for adoption, will deliver the doggy to a person's home and will have accessibly considerations, will have a clear and simple navigational flow and improve the overall experience of an individual while adding a pawed friend to their family.
I created a user journey map of Sam Adam’s experience using an animal shelter website to highlight possible pain points and enlighten regarding possible improvement opportunities.
Starting
the design
- Paper wireframes
- Digital wireframes
- Low-fidelity prototype
- Usability studies
Difficulty with navigation and accessing important information was a primary pain point for users, so I used that knowledge to create a sitemap. My goal was to create strategic IA decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Next, I sketched out paper wireframes for each screen in my website, keeping in mind the pain points about navigation, information, experience, and limited awareness.
The home screen paper wireframe variations to the right focus on clear navigational cues and optimizes user experience.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes to make the final refined version of the landing page.
Because WWAS’s users will access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Moving from paper to digital wireframes made it easy to understand how the design could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes to make the final refined version of the landing page.
Digital wireframes were created for different device sizes - mobile, tablet, and desktop to make sure the responsive website will be able to meet the needs of various users.
To create a low fidelity prototype, I connected all of the screens involved in the primary user flow of the adoption and the donation process.
At this point, I had received feedback on my designs from teams and from my usability studies. I made sure to listen to their feedback and implement several suggestion in places that addressed user pain points.
Study Type
Unmoderated usability study
Location
United States, remote
Participants
8 participants
Length
20-30 minutes
A usability study was conducted with 8 participants and following pain points were observed after careful assessment of the themes and frustrations users experienced during the research
Donation
Based on the finding the users did not have any other methods of donating money other that credit card, multiple methods of donations were added to next iterations of the design
Adoption
Users wanted to check out the dog remotely before going to the shelter. Webcam feature was added to the adoption page so users could take a look at the dog before committing to adopt
Volunteer
Users wanted volunteer opportunities that match their skillset, so various volunteer options were added to the next design iteration
Refining
the design
- Mockups
- High-fidelity prototype
- Accessibility
01.
Based on the feedback I got during the usability study, users needed multiple methods to choose from to be able to donate to WWAS - Multiple options were provide to encourage users to donate to WWAS.
02.
Prior to the usability study, users could only fill out the adoption interest form, but insights from the research encouraged me to add doggy webcam viewing on the same page so users could checkout their dog prior to committing to adopt, thus increasing their confidence in the action.
03.
Users could only fill out a volunteer sign-up form if they were interested in volunteering, but insights gained form the usability study were used to add multiple areas where users could use their available skillsets and interests to volunteer and help WWAS.
04.
During Usability study round 2, users did not respond well to the multiple clicks needed prior to accessing the information they needed, so iterations were made to allow all information related to a single topic to be on the same page for a simpler user experience.
05.
During Usability study round 2, I also conducted Peer design reviews during the high-fidelity prototype phase encouraging me to make some very insightful design changes.
I included considerations for additional sizes in my mockup based on my earlier wireframes. Because users would be using different devices to access the WWAS website, I designed additional mockups based on my earlier wireframes.
The high-fidelity prototype followed the user flow of the low-fidelity prototype and included the design changes made after summarization of themes from the usability studies and notes obtained from peers during the design review stage
- To prepare for handoff, I made sure that my designs a true representation of the intended user experience, that all placeholder texts, icons, and images been replaced with finalized assets and that users are able to interact with my design without any external guidance.
- I used a design system to add a visual consistency to the overall app and make it easier for me to collaborate with the developer.
- I included all icons, button states, typography, color scheme and grid system in the design system.
- I named all the components that way it is easier for the developer to code as well as to make navigating through the project easier.
- I made sure I have good communication as that’s the key to effective collaboration between a designer and developer during handoff.
The WWAS website uses alt text with all images throughout the website for their desktop, tablet and mobile version to assist users with screen readers navigate with ease
Users with assistive technologies were taken into consideration and text landmarks were used to assist with the navigational path of the user flow
Visual hierarchy was created throughout the WWAS website for the desktop, tablet and mobile version with the use of clear headings for various sections
Included WCAG 2.0 level AA contrast ratio of 4.95:1 for the text. This allows individuals with limited visual abilities to view the content of the WWAS website with less difficulty
Going
Forward
- Takeaways
- Next steps
Impact:
Users from the usability study reported increased engagement in the website due to clear navigational cues, intuitive design, eye-catching images, and a simple user flow. Improved user actions were noted for donations and doggie adoptions.
User actions for donations increased by 66.67% during usability studies.
Doggie adoptions increased by 50% during the usability studies.
87% of users reported eagerness to buy WWAS merchandise and completed corresponding actions during the usability study.
38% of users expressed interest in WWAS community programs thus increasing awareness through involvement.
Increased user engagement was noted due to clear navigational cues, intuitive design, eye-catching images, and a simple user flow.
What I learned :
I learned that simple design changes can significantly improve the user experience. I also learned that the design changes you make with the user at the center of your research will have the most dramatic positive impact on the outcome of your project.
Conduct further usability testing to see if the changes made during the design iterations have been successful
Conduct user interviews to see if the need of the users have been met
Test the impact of WWAS on the community through involment in community events and sale of WWAS merchandise
Identify any additional areas of need and ideate on new features
Let’s connect!
Thank you for reviewing my work on the WWAS – Woof Woof Animal Shelter responsive website! If you’d like to see more of my work or get in touch with me, give me a call or shoot me an email.
