Our Fostering Tails- Kitten Foster Website
Role
UX/UI Designer
Tools
Figma, Adobe Photoshop
Duration
2 weeks
Summary
Our client, Our Fostering Tails, is a Kitten Foster Organization run by Lauren. She has provided care for over 100 kittens since fostering and has amassed almost 40,000 followers on Instagram. She wanted a website designed so that she can use it alongside her Instagram to provide updates and availabilities of kittens to potential adopters. As well as increasing engagement and donations to her organization.
Main Goals
-Provide a good website experience for users
-Include opportunities for donations in the website
-Provide information on kittens to potential adopters
RESEARCH
Questions to get me started:
How do people find and adopt a cat?
What are some challenges when it comes to adopting a cat?
When and how was the last time they donated to any organization? What prompted them
Competitive Analysis
I conducted a competitive analysis with different pet adoption agencies and animal focused non-profit organizations to see and compare the usability of their websites.
Methodology
I reached out to past adopters, Our Fostering Tail IG followers, or people who have emailed/messaged her inquiring about adopting
5 adults, ages 26-54 were interviewed
User interviews were conducted over the phone
Responses were recorded on sticky notes and used for affinity mapping
Key Findings
Potential adopters all use websites and the internet to help find a cat to adopt (5 out of 5 responses)
Many potential adopters apply to multiple cats in various shelters because it can be competitive (4 out of 5 responses)
Donations are infrequent (1 out of 5 responses)
DEFINE
Pain Points
Many of the listings online are not up to date, so interested adopters don’t really know which cats are available
Scheduling a meet and greet could require many back and forth emails and correspondence and is not efficient
Blurry and inefficient interfaces to show photos of kittens available for adoption
User Persona
I created 2 different user personas that would reflect the two different groups who would be interacting with the website, potential adopter and those who want to donate. I included possible needs and frustrations, which helped me understand how to design for their needs.
IDEATE
Information Architecture
Using information architecture, similarities amongst the competitors, and findings from the user research, I create a site map to get an idea of the content and information that will be house in the website.
Early Iterations
Mobile wireframes were sketched out and turned into a low fidelity prototype on Figma. Why mobile? Our Fostering Tails is largely an organization on Instagram, so many users would access the link through the application.
I designed a scheduling feature which then updates the kitten profile to show how many potential adopter it has. And I also created an easy to access donation button to address the pain points found during the user testing.
PROTOTYPING & TESTING
Usability Tests
Moderated usability tests: I observed 5 users in complete 2 tasks on the prototype. 1)Schedule a meet and greet with a kitten 2) Donate to Our Fostering Tails
KPIs: The metrics I used were time completion rate, number of mis-clicks, task success rate (ability to complete a task with no prompts or mis-clicks).
Further Iterations
Using the results from the usability tests, I continued to make sure changes and iterations to improve the user experience of my mobile website design.
Change 1: Most of the users were looking at the home page for initial navigation so I updated the content of the homepage to have both a place for donations and meeting kittens.
Change 2: Multiple mis-clicks lead me to redesign the scheduling page. Many users experienced mis-clicks as they were scrolling to fill out the forms. I created a confirmation page where users can input typing to address this.
“I wish the main things I need to do were available to me immediately so I don’t need to spend time looking for it”
I also added a drop down selection tool. Users shared that they wanted options on whether they could choose to meet in person or virtual.
FINAL PRODUCT
Branding
The client had already been using a teal color palette within her branding for Our Fostering Tails. I utilized secondary colors to bring attention to CTA buttons (like donations).
Accessibility
Through the project, I constantly checked with WCAG guidelines and requires to ensure the color and contrasts were accessible to users.
Hi-fidelity Prototypes
RESTROSPECTIVE
Next Steps
Responsive Design : To optimize all content so users are able to access the website on mobile, tablet, and desktop and equally have a good experience.
What I Learned
It’s crucial to be able to prioritize tasks and have good time management when meeting deadlines and responding to client needs.
Get feedback as much as possible- whether it’s from users or other designers!