Team: 3 UX / UI Designers
Role: PM, UX / UI Designer
Timeline: 3 weeks
Nonprofits are especially scrutinized by potential patrons and animal shelters are no exception to this. My team and I were responsible for giving Chicago shelter, Felines and Canines (F&C), a site refresh to make donors trust the website and follow through on adoptions and donations. They’re a small staff known for their personable service and we wanted users to feel that throughout the site to build user connection and confidence to take action.
Problem: Having a website that evokes warmth and trust is the key to attracting and encouraging follow-through for both adopters and donors.
Solution: Present information about Felines and Canines in a way that ensures that the user -
I worked with my team to sketch out a research plan for interviews as well as write a survey for pet owners and those interested in pets. Most of our respondents adopted from a shelter and cared about an organization's mission and how they used their funds. They also wanted to feel connected to the mission.
Understandably, frustrations from non-profit shelters were largely around wondering where their money went and wanting more information about animal care.
Key learning: Trust and connection were central to the user.
We also did a deep dive into the site's information architecture to evaluate its content and where users might run into problems. Due to limited staffing, the shelter outsourced its pet information and donation processes, so users were sent to another tab on a third-party site to complete their tasks. In addition to the (joyful!) experimentation with typefaces, there was a lot of information about a rescue center in Alabama. At first, it was unclear what the relationship was between the rescue center in Alabama and the one in Chicago. With a little more research, I learned the shelter was the first of its kind - rescuing animals from overcrowded shelters in Alabama and taking them to the Midwest where there is greater demand for adoption. It was especially important for us to highlight their incredible mission so users can also be impressed and inspired to support them.
.png)
.png)
Screenshots of the Felines & Canines homepage, donation, and adoption pages.
Key learning: Users needed to stay on the site and learn more about the shelter’s great work. We would also need to balance the limited resources of the stakeholder.
It became obvious through empathy mapping that our persona loves animals and cares a lot about if a nonprofit she adopts from or donates to uses its funds for its mission. Our user needed to feel connected with the organization's mission, trust them with their donations, and want to adopt from them. I facilitated a brainstorming session on ideas to meet these goals, from easy fixes to pie-in-the-sky ideas. We then prioritized these features based on what was most important to the user and what was feasible for F&C.
Our persona, Anne, does her research!
Key learning: Site design of the donation and adoption process needed to connect the user to F&C’s mission and build user confidence.
To get an understanding of what the user needed to feel that trust and connection, I led the team through iterations of storyboarding. We combined our best ideas that solved the user's natural skepticism.
For the adoption process, we focused on -
I focused especially on the donation process, where I brainstormed -
The new styling would have (only) one playful Sans Serif typeface, a joyful color combination, rounded corners, and lots of adorable photos pulled from the shelter facebook to make user’s feel the shelter’s warmth.
I then collaborated with team members on implicitly building trust through a new style guide inspired by the shelter's brand of warm, friendly service and the playfulness and joy that comes from the animals they save. We selected a color scheme that would evoke that feel, as well as a typeface and radius for cards that were rounded and playful to further connect the brand, and therefore give the user something to implicitly feel when looking at the site. We also did a deep dive into the site's IA to evaluate its content and where our users might run into problems.
Key learning: Clearly laid out information, as well as warm, clean branding can build user trust explicitly and implicitly.
We decided to split up prototyping to generate more ideas faster. I focused on implementing our ideas from the donation flow by breaking up donation options onto cards, utilizing dropdowns, and a pop-up modal for completing donations on-site. I also wireframed the homepage and the 'About us' page, focusing on letting copy and images display the mission clearly and proudly.
We combined our ideas into one prototype. I looked for feedback from my team frequently on ideas and offered it as well to ensure we were being open and making the best product for our user and stakeholder.
I worked with my team to develop 3 tasks to test users on typical user pathways and tested 6 users. I focused specifically on testing our mobile prototype.
Donation flow iterations for the mobile viewport.
Key learning: We got some things right, and some things wrong.
For the adoption process -
I focused especially on the donation process -
Adoption flows iterated on desktop viewport.
We tested and moved into mid-fi, incorporating results from our testing and the style guide. We then tested another 6 users on the 3 tasks again and achieved perfect results! To move our prototype into hifi, we cleaned up some additional features to ensure the styling was as seamless as possible for the user.
Key learning: Breaking information down and updating the branding made users trust the site more.
For the adoption process, users loved -
For the donation process, users loved -
On a personal note, I really valued this project! Not only did I get to support a cause I am passionate about (as an owner of 3 adopted animals), I was able to work with 3 people who were dedicated to our task. They showed up to meetings with great ideas and feedback, and really pushed the bounds of what was possible within a short timeline. I'm so grateful to have worked with wonderful people on a great topic. Our final wireframes were received quite positively and I personally had several takeaways from this experience.
Key learning: Your stakeholder is a user you can’t forget about.
Key learning: There are multiple ways to build trust!
There are still opportunities for this site to improve. I would love to get this in front of the stakeholder to get additional feedback. In addition, I'd love to add additional interactions to delight the user. Finally, I was challenged by the idea of making multiple, complex donation options simple. I would love to further iterate on what I created to make the process as simple and transparent as possible for the user.
