Brief
Create a dedicated app and reimagine the Welfare for stray dogs website by identifying its core purposes.
Problems
- Lack of Info
- IA was too complicated
- Purpose is not obvious
- Info is not trustworthy
Goals
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.
Role
UX researcher, UX Designer, UI Designer
Tools Used
Adobe XD
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!
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
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.
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:
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.
An empathy map helps to organise the participants journeys and comments in a way to better understand their pain points and thoughts.
“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.”
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
Age: 27 years
Education: Bachelor of Design
Hometown: India
Family: Her parents and sister
Occupation: Web Designer
“I am happy to adopt a dog in need but I struggle to find the right match for my family with the current resources.”
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.
Age: 38 years
Education: Bachelor of Science
Hometown: Canada
Family: Her Partner and two children
Occupation: Cyber Security expert
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.
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:
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.
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.
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.
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:
Below are some of the key features 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:
Below are the findings:
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.
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 plays a major role in my design process and since this a public app it is a very important consideration
Both the app and the website make the website very approachable and trustworthy. It saves time and keeps track of important activities.
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.
Take a look at the case study deck
Or If you want to know more about this project Let’s Connect
