Edgar and Ivy Cat Santuary
Improving the IA and strategically redesign their current webpage to guide and inspire visitors to adopt and donate.
Role: UX Researcher, UX/UI Designer, Branding
OVERVIEW
Edgar and Ivy is a cat sanctuary that provides cat adoptions and rescues and houses disabled, elderly, at risk ferals that were abused by humans, and other cats that cannot be rehomed. Edgar and Ivy rely on monetary donations or item donations such as food and toys to keep their nonprofit afloat and save more cats that are at risk or just in need of a loving home and shelter.
Goal: The objective is to effectively redesign the website and enforce clear navigation for monetary donations and cat adoptions.
RESEARCH
User Interviews
Participants: 5
Who: people who have or want to adopt a cat, people who have donated to any organization, one Edgar & Ivy adopter
What: We want to explore people’s experience with adopting and donating. Because we are redesigning their website, we also want to know what people’s thoughts are on their overall site, especially the current adoption and donation paths.
Effectively utilize the current brand with a new user experience to decrease navigation confusion and uncertainty
Provide clear and intuitive direction to increase adoptions and solicit donations
Uncover what impacts a user’s experience with adopting or donating
Research Objectives
Findings: Why Adopt?
Users want robust information about the cat’s personality and it’s quirks before adopting
Findings: Why Donate?
Users value being able to contribute in any way as long as it’s convenient and honest
Findings: The Current Website
Current Home Page
Current Adopt Page
Current Donate Page
Initial Thoughts of Website
Website is messy and outdated and users wants to see company name more in the pages
Navigation & IA
Users had difficulty in: completing tasks, CTA wasn’t intuitive, there were too many action steps and no clear navigation.
Adoption
Users want to know more about the cats. Vital info that could help them adopt is missing.
Donation
UI is not intuitive, which increases confusion and uncertainty
Key information cat adopters want include: cost, health history, personal behavior and quirks about the cat, why the cat ended up at the shelter
The current website has too many steps to reach desired action completion from users such as the donation taking you out of the website and opening a new window
Redesigning the website includes: IA, color accessibility, improving the overall user experience and UI
Core Insights
Competitive Analysis
By examining both cat adoption organizations and general donation organizations, I was able to analyze the strengths and weaknesses of each competitor, which enabled me to identify areas where Edgar and Ivy can step in and fulfill the needs of their user base.
Define
So, who are we solving for?
Gracie - “The Thoughtful Giver”
Kai - “The Curious (soon-to-be) Cat Dad”
Both personas were developed to target each of the unique and personable goals of adopting and donating.
How might we assist overwhelmed individuals get started with their cat adoption journey and easily find a cat that matches their preference?
And, what do our personas need?
2. How might we improve the convenience of donating while also increasing the amount of money donated?
IDeate
The top priority is to boost cat adoptions and monetary donations. Our goal is to create a user-friendly experience that allows users to effortlessly explore cats based on their preferences and streamline the donation process for quick and easy monetary contributions.
User Flow: What will our personas accomplish?
User Flow 1: Adoption
User Flow 2: Donation
Sitemap: Improved Information Architecture
Many interview participants stated how the information hierarchy was not intuitive and seemed “messy” and “all over the place” due to the abundance of text and links that were not isolated in the proper pages. I conducted a card sort to uncover the insights of where users would expect to find certain categories.
A virtual view of the updated sitemap and navigation
Design
To kick off the design phase, I first did some extensive sketching by utilizing the Crazy 8 technique to dig into my brain with the limited time constraint to get out all the ideas onto paper. Upon completion, I looked through the finished sketches and then decided which screens are the most effective for users to complete the tasks.
Low Fidelity Wireframes
I always start my design process with the Crazy 8’s exercise, which involves delving into my mind and fostering divergent thinking within a limited time constraint! I sketched out screens for Home Page, Adoption, Viewing Selected Cat, and Donation.
Mid Fidelity Wireframes
Home Screen
Aligning with their original homepage, this screen is not content heavy. Users are greeted with the 2 main CTA: adopt and donate. Visually seeing the adoptable cats can encourage users to click on adopt.
Adopt a Cat
The options to filter a cat suited for one’s preference help users decrease option paralysis. Once users click into the selected cat, there is the key information that user participants seek out to help them make a decision.
Donate to Sanctuary
One of the biggest user feedback was the text heavy donate page. The second biggest issues user faced was annoyance of having the payment take you to a 2nd window. Working with developers to ensure the transition to payment on the site is necessary!
Branding
I developed and refined the current design system for Edgar and Ivy to standardize and enforce consistency throughout all the screens.
Usability Testing
The overall feedback was overwhelmingly positive with a few slight suggestions to further improve the user experience. Participants enjoyed the ease of navigating to their tasks with the updated architecture and design.
Participants felt that the donate form text was too big. So I decided my solution is to decrease the font size to ensure that users have a seamless experience reading and filling out their information.
Iteration 1: Text
Before
After
Participants pointed out the lack of consistency with the tertiary buttons: black underlined vs brand color underlined. Consistency is key so I referred back to the design system and ensured that I standardized all the tertiary buttons on all screens to be uniform.
Iteration 2: Button Consistency
Before
After
Participant Feedback
“Seamless! Everything works well. I like how you have function to adopt and donate in the banner and the menu where you can see it at any page.”
Final Product
Home Page
A Specific Cat
Adopt
Donate
Key Takeaways
The redesign process was so enjoyable and rewarding! My excitement stemmed from integrating thoughtful user feedback into my designs to strike a balance between functionality while staying true to the brand. Many of the changes made effectively address the user feedback which was additionally validated by usability testing and feedback. I think that continuing to further develop and revamp their other screens and services will absolutely create an even more amazing experience for Edgar and Ivy as a company and for interested cat lovers browsing on their website. 😸
So, what’s next for Edgar and Ivy Cat Sanctuary?
Redesigning the other pages: Volunteer and Resources
Just like the successful redesign of the Adopt and Donate pages, revamping the IA and design can ensure that users can effortlessly accomplish their goals visiting the website
streamline IA: make it easier for users to locate the information they need through restructuring content and navigation
intuitive UI: prioritize user friendly interface that will enables visitors to effortlessly navigate the site