Welfare of stray dogs
Responsive website and dedicated App
for a Mumbai based NGO

Create a dedicated app and reimagine the Welfare for stray dogs website by identifying its core purposes.

- Lack of Info
- IA was too complicated
- Purpose is not obvious
- Info is not trustworthy

Design an app and website keeping in mind that the website must be run by a non-profit while making it easier for users to perform core functions of volunteering and adopting from the site.

UX researcher, UX Designer, UI Designer

Tools Used
Adobe XD

Project Overview

What are we talking about?

My Dog Vivi taking a nap

So if it is not clear by now, I am actually obsessed with these fur buddies. Hence when my first dog passed away I decided that instead of being sad and locked up I decided that I was going to volunteer. I volunteered at Welfare for stray dogs (WSD) - walking dogs, playing with them and helping raise money by managing garage sales. It became my favorite way to spend Saturdays. So when I had to choose a topic for a project on social good I decided to rework the WSD website.

One of the most important aspects of reworking a site is to understand its core purpose. Why does this site exist? And is it serving that purpose well? A dog welfare NGO needs to make its mission clear - Adopt, Volunteer and donate. So keeping these in mind let's get started!

How did I go about this?

Understanding the user

Note: I tried reaching out to WSD multiple times in order to get their feedback on their website but they weren’t available to work with me. I wanted to donate my designs to them or try working with a developer to bring this to life so I’ll keep trying and update this info accordingly

The current WSD website

Revisiting the existing site

WSD does not have an existing app but it does have a website and social media pages such as instagram and twitter. This works as a treasure trove of information on aesthetic as well as purpose.

Competitor Analysis

I started, as always, by running a competitive audit. Three out of the four competitors I chose operated within India while the last one operated in the USA. Below are the competitors:

Screenshot of the competitor audit
  • KAW - Kannan Animal Welfare: This NGO provides disabled dogs for adoption and rehoming locally and internationally. Even though this seems like a trustworthy site it has too much information to sort through and needs to work on its branding.
  • Dharamsala Animal Rescue: Another NGO that provides dogs for adoption and rehoming locally and internationally. They also run many programs for spay/neuter, rabies vaccination, rescue and adoption, street animal feeding, and community education for rabies safety and compassion. One of the issues with the website is it requires too much scrolling and it does not have a clear hierarchy in information.
  • The Shelter Pet Project by AdoptaPet.com: This site only provides adoption for pets including dogs and cats. It is a clean and trustworthy UI but has a very limited purpose. For any function the site redirects you to a different site.
  • Dog Spot: Another site for pet adoption but in this locals can put up pets on their own. Though this site has a very interesting purpose, it doesn't seem very trustworthy as individuals could be engaged in unethical practices.

User Research

Once I understood the strengths and improvement opportunities of the competitors I started interviewing potential users. Research was conducted with participants from varied age groups, aged 26-56 years. Participants were those who either owned dogs via adoption or have at some point availed adoption or volunteering opportunities. I invited these participants to use the current WSD website and share their thoughts as they navigate through it.

Key quotes directly from the participants
Empathy Map

An empathy map helps to organise the participants journeys and comments in a way to better understand their pain points and thoughts.

What bothered the User?

  • Lack of Info: All participants found the there wasn’t enough information, like breed, vaccination etc. on the dogs they are considering for
  • IA was too complicated: All participants found that they couldn’t find the adoption tab easily
  • Purpose is not obvious: All participants felt that the website did not seem like a adoption website
  • Info is not trustworthy: Most participants wanted to see the info being better organized and see pictures, testimonials and videos.


Shanti Gupta

“I tend to go when I have time though I wish I had a chance to be more consistent. I am constantly looking for opportunities to foster dogs.”

  • Be able to find dogs to foster.
  • Find volunteering opportunities at shelters near me.
Their Story

Shanti works full time as a designer and also studies online to improve her opportunities at work. During the weekends she works at local shelters where she walks dogs. Shanti is constantly looking for opportunities to foster dogs but finds the current procedures very taxing. Most of these opportunities are found by her on instagram

  • Process to foster is complicated and long.
  • I want more information on how to volunteer and time it would take.

Age: 27 years
Bachelor of Design
Her parents and sister
Web Designer

Lena Smith

“I am happy to adopt a dog in need but I struggle to find the right match for my family with the current resources.”

  • Filter through NGOs to see if there is a fit for her family.
  • Be able to interact with the dog before
Their Story

Lena lives with her husband and two children and always wanted to adopt a dog. She finally feels emotionally and financially independent to take care of a pet. She wants a pet that is good around children and guests and that has been socialised. She’s open to adoption from a local or international NGO as long as her needs are met.

  • Cannot filter through dogs easily
  • Not enough information about medical history and breed.
  • Sites can be untrustworthy

Age: 38 years
Education: Bachelor of Science
Hometown: Canada
Family: Her Partner and two children
Occupation: Cyber Security expert

Problem Statements

  • Shanti’s problem statement: Shanti Gupta is a full time designer, pursuing an online degree who needs an app that will help her find fostering and volunteering opportunities at animal shelters because she would like to schedule those opportunities on the go.
  • Lena’s problem statement: Lena Smith is an office worker, living with her 2 kids and partner and needs to look up available pets from local NGOs because she wants to find the right dog to adopt for her family.

Journey map

Once I had the personas in place for my ideal users, I began to trace their journey from them downloading the app or opening the site to requesting an appointment. Even though the personas and their journeys are fictional, they are based on real users. The journeys were envisioned across 4 categories - action, task list, feeling adjective and improvement opportunities.

While Shanti, who worked as a designer and part time student, wanted to access the app, so that she can look for foster and volunteering opportunities at local dog shelters on the got, Lena as a mother with a full-time job, wanted to find the perfect pet for her house, so that they can have the right addition to their family.

Shankar’s user journey shows that unlike publishers, gamers would like to submit multiple games for nomination and do so efficiently.

Screenshot of Shanti’s journey map
Screenshot of Lena's journey map

How Might We (HMW)

Once I had identified the needs of the user I decided to further brainstorm by using ‘How might we? (HMW)’. In this method we ask questions based on the functionality and purpose of the site to get our creative juices flowing.

Below are the questions I came up with:

  • HMW schedule volunteering?
  • HMW find the right pet to foster/ adopt?
  • HMW know the NGO is trustworthy?
  • HMW make processes clear and seamless?
  • HMW involve earlier users?
  • HMW keep track of users’ actions?
  • HMW give the right info and make it digestible?
  • HMW make it easy to contact the NGO regarding selection?
  • HMV help users share posts/ info on other social media platforms?
  • HMW highlight our social media platforms?
  • HMW make donations easy?

Starting the Design

Editing the sitemap based on research

After brainstorming and understanding the user I started designing by analyzing the current website. Participants had made comments on there being too much information and not being able to find the ‘adopt’ tab easily. There were also features in the website that were nice but needed to be developed.

I restructured the site map to streamline it. I edited out certain tabs and for many others I categorized them better. I also established a hierarchy for the information. The intention was to clean the clutter and not overwhelm the user.

IA for proposed app

Paper Wireframes

Next I started designing by sketching wireframes using ‘crazy eights’. This method involves sketching eight ideas in eight minutes. This approach helped me iterate and create the best version before solidifying any design. I decided to begin with the app instead of the responsive site. This helped me solidify core functions and their layout before moving to a bigger screen.

Crazy eights for homescreen

Clutter and lack of purpose were important factors that discouraged people from using the site. Hence I decided to create a clean and intuitive layout that would also be easy to maintain. I had to remember that this was an NGO that might not be able to afford complicated layouts and the expertise to maintain such a site. I also noticed how users simply wanted to get the information they needed. Fancy animations would have been distracting and expensive. So I stuck to the three colors - white, orange and black and kept the lines clean and easy to understand.

Finalised Paper Wireframes

Digital Wireframes

I used Adobe XD to translate my paper wireframes to digital and then to low fidelity prototype. Below are some key features:

The research questions included:

  • Are users easily able to submit nominations?
  • Are users able to learn about games from a database?
  • Are all questions regarding ‘how to submit nominations’ being answered?
  • Are any additional features required?
  • Are the graphics looking too complicated?

Below are some of the key features of the low-fi prototype:

Screenshot of the low-fi prototype

Now it was time to conduct another round of interviews to test whether these designs were user friendly and addressing users pain points that came up during the interviews.
I conducted a usability study on the low fidelity prototype with 3 individuals (1 male and 2 female). All studies were unmoderated and remotely held.
Below are some of the research questions that i needed answers for:

  • Determine whether an NGO app is necessary and if not what can make it a valuable resource?
  • Which features get the most traffic so that their place in the navbar can be rearranged?
  • Is it easy to navigate the app for the core tasks?
  • Do we need any additional features?
  • Do some features need to be removed?
Affinity Diagram from the usability studies

Below are the findings:

  • Participants could not find the contact me page intuitively
  • Most Participants could not understand the additional menu icon on the top right
  • Most Participants could not find information about upcoming events
  • Some Participants suggested what kind of filters/ info they would like to see on the adoption and volunteer pages.

Refining the Design

Mock - Ups and High fidelity Design

Taking into consideration the feedback on the low fidelity prototype, I created the mock ups for the app. Once I was satisfied with the branding and features on the app I started making mockups for the responsive site.
While it was important for there to be continuity between the site and the app, the platforms slightly differ when it came to functionality. The app allowed users to schedule and track their appointments, create a profile, like certain posts and allowed for a more consistent use because we have to remember the user wont download an app if all the features are already available on the site.

Key Mock-ups for Dedicated mobile App

Key Mock-ups for Mobile Site

Key Mock-ups for Desktop Site

Screenshot of Hi-fi prototype

The final mock ups show an easy to navigate user flow and address all issues that users had with the previous iterations.

Check out the high-fidelity prototypes:

Accessibility Considerations

Accessibility plays a major role in my design process and since this a public app it is a very important consideration

  • Large images, audio and videos have been incorporated in layout
  • Visuals and fonts have been resized depending on screen size
  • Contrast has been maintained for better visual perception
  • User is allowed to enter flow from different points to maintain them on a happy path
  • Annotations have been provided for a screen reader
  • Icons are accompanied by text

Going Forward



Both the app and the website make the website very approachable and trustworthy. It saves time and keeps track of important activities.

What I learned:

I have learnt that an NGOs requirements are very different from any other website. There is so much information that needs to be communicated without confusing or wearing down the user. Also the platform involves both commercial products as well as opportunities and donations making it quite extensive. Hence a low maintenance, clean approach was necessary.

Next Steps

  • Try to incorporate users' feedback directly on the site. For instance, a user should be able to upload a testimony and photos on their own quickly. Because of limited time I could not incorporate the feature in this version.
  • Conduct another round of usability test to validate whether the pain points mentioned in the previous test have been addressed effectively
  • Take note of which features are being most used by real users
  • Test with the NGO if possible

Take a look at the case study deck
Or If you want to know more about this project Let’s Connect

Website designed and built by Sanmati