PupPals - The Doggos Need Help

Project Overview

Summary:

PupPals.org was an easy choice for my second student project. A non-profit created by friends of mine, their mission is to create videos of shelter dogs who might otherwise have a hard time getting adopted. While I was wholeheartedly in favor of that mission, their current website was severely lacking in its structure and information delivery - duplicate information, missing elements, etc. I made it MY mission to achieve meaningful progress down the road of correcting that situation.

Responsibilities:

I was responsible for creating a clickable website prototype for my client to view and critique.

Audience:

This project had two audiences - dog lovers who might be inclined to financially support a non-profit dedicated to helping shelter dogs find their humans, along with rescue staffers looking for a tool to help their charges get adopted.

Solution:

After conducting user research and surveys, I created a new website to improve overall design hierarchy using a more streamlined layout, as well as new details about the organization and their methodology. I also simplified delivery of information regarding financial support options.

Clicking the image on the right will take you to my clickable prototype.

Discovery and Research

This project was born out of my love for my friends at PupPals.org, and their commitment to finding homes for adoptable, yet oft overlooked shelter dogs. While, originally, I intended to help them develop an app to help shelters create videos for their charges, my Thinkful.com mentor suggested they would more immediately benefit from an update to their website. My user research showed that many dog lovers had not only volunteered at shelters, but they had also either considered, or had actually made, financial contributions to other animal-related non-profits.

Competitive Analysis:

I compared their current site to the ASPCA, The Sandy Project, and PawsNY. The ASPCA site was the most modern design, and I was particularly impressed with their donation workflow. The other sites served as more of a jumping-off-point for this project.

Typical User Persona:

Gender - Female / Age - 31 / Occupation - Call Center worker / Residence - Queens, NY

Her Story - While she works hard at her day job, she's a huge animal lover. Therefore, she volunteers at her local shelter in the Adoptions department. She loves being able to spend quality time with the shelter pups, it's most upsetting to her when perfectly loving dogs get passed over because they're a little too old or because "people have heard negative things about that breed."

Goals - She wants to find a tool that will help her charges find their "fur-ever" homes.

Issues - Tools for volunteers at shelters are very limited, therefore free, "legit" non-profit partners with clear messaging and goals are a necessity.

Samantha, Justin, and an adorable pupper.

Information Architecture

User Stories:

As a dog lover, I want to financially support organizations that are aligned with my goal of a home for every pup.
As a volunteer at a shelter, I am always looking for tools that can help me house the dogs I have, so that I can take in more animals in need.
As an animal foster parent, I want to know that the organizations I'm working with are legitimate non-profits who are focused on the welfare of shelter dogs.

These were the user stories gathered from my research, which led to the MVP.

Brand Development

Brand Characteristics:

This project presented some unique challenges, from a branding perspective.

Since this is an established organization, I knew I would have to be flexible in my design choices. I had originally wanted the color palette to include light "dog shades." However, upon meeting with my clients, they made it very clear that there was a significant emotional attachment to not only the particular shade of blue they had used, but also the cartoon pup they had adopted as a logo.

For the logo, I found a placeholder stencil that gave the impression I was after. I also conferred with my clients on a possible future version of their existing logo - perhaps a stencil or outline of the current logo that leaned less toward "cartoon". As for the color palette, I was able to find a selection that met both of our goals, and also include their original shade of blue.

For typefaces, I went with Caveat Brush for the logo, as this script font implies playfulness and humanity. For the site copy, I chose Commissioner for its readability and approachable nature.

Below, you will find my mood board, which includes the dog images used for color inspiration as well as logos, fonts, and final color palette.

Usability Testing and Next Steps

Usability Testing:

Given that this was a fairly straightforward website design, the most important apsects to test were clarity of information and messaging. All testers felt that the site answered the most important questions to their satisfaction - Did you find enough information on the site to decide if you would like to support PupPals financially? Did you find enough information on the site to decide if their services would benefit the organization(s) that you work for?

Overall Experience:

I learned two important lessons from this experience. One, you can tinker with formatting and spacing until the end of time, so make a decision and move on. Two, not being married to any one particular design decision helps keep the process focused on the end goals.

Future iterations of this site will strive to reduce excess text and modernize the donation process with available integrations.

Prototype

Always Evolving

It seemed something about this project changed every time I put pencil to paper or mouse to canvas. The biggest change was probably a shift in color layout that became necessary when working on the Donations page. Initially, the client's favorite blue was in the header and footer, but I new I wanted it in the "big money" Pick a Pup section, which meant changing the color of the footer. This was a meaningful overall improvement.

Click the button below to view my clickable prototype.

Try It Out

Final Thoughts

I very much enjoyed the unique challenges presented by this project. At first, it seemed very straightforward to reduce the site clutter and improve overall flow and visual hierarchy. However, meeting the project goals and including elements of import to my clients required a new kind of flexibility that I hadn't yet encountered as a UX designer.

Done is the engine of more. - The Cult of Done

For more information on this or other projects, don't hesitate to get in touch.

Email Us

AR/Tech