The project
Seattle Dogs Homeless Program is a WA State nonprofit that helps dog owners suffering from homelessness in Seattle. They offer food, supplies, vet care and boarding program. The impact caused by this program not only affects the lives of the unhoused owners, but also the lives of these animals too. It's a double win!
Problem
The current website is underdeveloped and does not allow the users to navigate easily, making it difficult for them to have information about the organization.
The challenge was to discover what influences the users to navigate throught the website, what kind of information they’re looking for, and what motivates them to donate online.
Goals
Improve navigation and function by redesigning all existing pages, increasing the quality of the website and attracting new and old users.
Create pages with the right information so the user can feel trust and confidence towards the non-profit.
Understanding the user
The Research
I conducted interviews and surveys to understand user’s motivations and behaviors.
A total of 23 adult participants who had made a donation before or have interest in donating in the future answered questions such as:
What motivates the users to donate and how do they make decisions to do so?
What information do they need to trust the organization?”
Those questions were made as an important step to determine which user problems are the most important to solve and why, making it possible to create solutions that address those problems.
Through research, I collected the following data:
100% of donors participants often feels frustrated if they don’t know where their money is going towards
25% of participants feel encouraged to donate if there’s a possibility of talking with the founder.
20% of participants had a frustrating donation experience because the website wasn't clear on where they should click to start the donation process.
100% of the participants think that reading about experiences from volunteers, donors & supporters is important.
The participants who’ve never donated before have never found an organization they truly trust.
“Clear communication is essential. I tried to help in the past but they were not very good explaining things or did not have time/people to do this function. It’s hard to send money out of state to an organization we find online if we are not able to communicate clearly with the people responsible.”
Competitor Analysis
I analyzed Pets of the Homeless website, a direct competitor that is also trying to solve the same problem as us. Through research, I noticed that multiple pages about the organization is easily accessible through the navigation menu bar. Heavy use of pictures is also present, giving to the user multiple visual information at once: informing past-activities, where the donation is going towards and if it’s real or not. After analyzing the website, I divided post-its in 3 sections: Navigation Flow, Positive/Trust Building and Not Positive.
By conducting competitor analysis, I was able to identify key information about preliminary UI designs, how to avoid functionality that is not useful and consider design patterns and trends.
Insights
Either the organization and the user wants the same thing: to build trust. Trust and transparency are important values to encourage donations. The research data showed that users feel more confident donating when they feel closer to or moved by the cause they’re helping, by having a good and direct communication with the organization. That can be achieved through pictures and videos, pages with helpful informations and a form of contact available. Basically, it's a loop: The organization gives information, build trust with the user who donates, helping the organization, and the loops go on.
Site Map
From the data I collected, I was able to decide what actions and features were crucial and beneficial for the website navigation and designed a fluid sitemap experience for users.
Navigation Improvement
The current website is underdeveloped, not allowing the users to navigate easily. One of the main reasons is the current site map, which is one of the biggest changes I made:
Photo and Video page
Instead of having individual page for Photos and Videos like in the old site, I included those in the “About Us” and “How we Help” page, so the user have both text and picture information about the organization in the same page, decreasing the user research time in the website.
Forms
Similar change was made with the Forms page from the old website version. Instead of having an exclusive page for it, the forms were distributed in their proper pages. For example, the Volunteer form now is found in the Volunteer page, Foster form in the Foster page and so on. That way, the user have all information needed in one page instead of going to a different page to find the form they’re looking for.
Wireframes
The next step in my process was creating the wireframes. It enables me to examine my ideas before adding details and more elaborated visuals, allowing me to make quick changes and explore my ideas.
High-Fidelity Wireframes & Prototype
Once I had the mid-fidelity wireframe ready, I was able to apply established styles and examine the overall aesthetic feelings and visual balance of the application. The organization already have a logo, so I followed the current the brand colors, adapting when necessary to follow WCAG 2.0 guidelines to guarantee good accessibly.
Cards and Accordion were used for better use of space and navigation flow. Interactive buttons and pictures allows direct communication with the user and send the necessary commands to achieve the “click” goal.
Final Thoughts
Seattle Dogs final design is a result of research, insights and design thinking. With the final product, I believe I have met the goals that were outlined in the beginning of the design process.
User experience was a priority for the redesign, focused on delivering a smooth navigation to make sure the user have all the tools needed to build the trust wanted with the organization.
Looking ahead
There is still a lot more to explore with Seattle Dogs. One of the things I’m looking forward to work on now is the donation page, which is the next step process for a complete non-profit website. Donation is important and having a functional donation payment form is beyond necessary for the website. You can find the case study for the payment form here.