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
Project overview

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
My Design Process

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

User Interviews
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.
Affinity Mapping
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.
User Pain Points
Created by potrace 1.15, written by Peter Selinger 2001-2017

Navigation

Animal shelter websites are often confusing to navigate and do not have a clear user flow for adoption, fostering, volunteering and making donations.

Created by potrace 1.15, written by Peter Selinger 2001-2017

Information

The information provided is laid out in a cluttered manner making it difficult to scan and understand services provided.

Created by potrace 1.15, written by Peter Selinger 2001-2017

Experience

The animal shelter websites do not provide an engaging experience to encourage user action.

Created by potrace 1.15, written by Peter Selinger 2001-2017

Lack of knowledge

Users are unaware of the breed of dog they should own based on their needs.

Potential User Pool
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.
User Persona - Sam Adams
User Persona - Barbara Smith
Problem Statement
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.
Understanding the needs of WWAS
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.
Competitive Analysis
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.
User journey map
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
Creating a sitemap
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.
Paper wireframes
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.
Paper wireframes screen size variations
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.
Digital wireframes
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 screen size variations
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.
Low-fidelity prototype
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.
Usability study: Parameters

Study Type

Unmoderated usability study

Location

United States, remote

Participants

8 participants

Length

20-30 minutes

Usability study: Findings
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
Changes to my Mockups

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.
Mockups: Original screen size (Desktop)
Mockups: Screen size variations
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.
High-fidelity prototype
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 developer handoff
  • 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. 
Accessibility considerations
Created by potrace 1.15, written by Peter Selinger 2001-2017

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

Created by potrace 1.15, written by Peter Selinger 2001-2017

Users with assistive technologies were taken into consideration and text landmarks were used to assist with the navigational path of the user flow

Created by potrace 1.15, written by Peter Selinger 2001-2017

Visual hierarchy was created throughout the WWAS website for the desktop, tablet and mobile version with the use of clear headings for various sections

Created by potrace 1.15, written by Peter Selinger 2001-2017

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
Takeaways

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.

 
Next steps
Created by potrace 1.15, written by Peter Selinger 2001-2017

Conduct further usability testing to see if the changes made during the design iterations have been successful

Created by potrace 1.15, written by Peter Selinger 2001-2017

Conduct user interviews to see if the need of the users have been met

Created by potrace 1.15, written by Peter Selinger 2001-2017

Test the impact of WWAS on the community through involment in community events and sale of WWAS merchandise

Created by potrace 1.15, written by Peter Selinger 2001-2017

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.