Delta View Cats Website Design
From user research to initial concept, from
hi-fi prototype to design system, I overhauled the desktop and mobile website experience.
PROJECT OVERVIEW
Rethinking donations
Delta View Cats is a non-profit organization located in Pittsburg, California. Their main focus is to humanely manage abandoned community cat overpopulation.
When I first started working with Delta View Cats, they had a web 1.0 style single-page website with a lot of text that wasn’t very legible and drew almost no traffic. The website's donation system was broken too.
Our team went in to help redesign their mobile and desktop websites in a two-week sprint.
Click on the phone screen to see the interactive prototype. Click here to see the full view
PROBLEMS AND SOLUTIONS
Delta View Cats before and after our redesign
Delta View Cats website before our redesign
A single-page website with an animated background that makes text illegible.
There's an overwhelming amount of text.
There are many unclear logos and a broken donation box.
Delta View Cats website after our redesign
I added new simple navigation, redesigned the logo, and added the CTA button right on the top.
I designed statistics with Delta View Cats' impact on the community to strengthen user confidence in the organization.
I designed real rescue stories, cat images, and organization information to engage the hearts (and wallets) of users.
MY IMPACT
New design well-received and under active development
"New design shows the daily struggle of our cats, it's clean and straightforward."
Delta View Cats Volunteer
"The redesign has surpassed my expectations. We finally have a fully functioning website!"
Delta View Cats Founder
My goal
My goal is to redesign Delta View Cats website from scratch to attract more donations and volunteer help, which goes into improving the well-being of the cats.
Redesign success indicators:
-
Increase number of monthly donations by 20%
-
Increase conversion from visitors to donors and volunteer signups by 10%
Current Delta View Cats website
My role
I worked with a team of four designers working directly with the founder.
My responsibilities included:
-
Design of the Meet the Cats, Get Involved and About Us page for desktop and mobile
-
User and market research
-
Prototyping, wireframing, and testing
My design process
Design process. Click the image to enlarge
MARKET RESEARCH
Understanding Delta View Cats' role in the community
60,000 cats born each year
Cats reproduce so quickly that shelters end up euthanizing 70% of them.
10,000 are abandoned
2% are spayed/ neutered
Just in Pittsburg, CA, it's estimated there are 10,000 abandoned cats.
Yet community cats are responsible for 80% of new kittens being born.
USER INTERVIEWS
Users want to contribute but websites lack information
I conducted five user interviews and surveyed 42 respondents, here are the discoveries:
Feeling helpful but where does my $$ go?
37.5% of respondents said they haven't donated because they didn't know what their money will be spent on.
Another 37.5% couldn't find donation information on a cat rescue website.
Googled it!
50% of respondents said they chose a shelter or cat rescue through a web search.
Only 18.2% chose it because it was close to home.
Ugh... This website...
54.6% of respondents complained that websites were difficult to use and lacked important information.
People who are interested in helping cat rescue centers don’t know how they can contribute, what impact they can make, and how their donation is spent.
FEATURE PRIORITIZATION
Focusing on MVP
Due to time and client resource limitations, I had to prioritize the features in the first iteration, which are the following features:
Learn
about cats
Explore
ways to support
Know
your impact
Contribute
time or money
INITIAL SKETCHES AND IDEAS
To the drawing board!
After each team member sketched out their ideas, we picked the best parts from each design and combined them together into lo-fi wireframes.
Some of my Delta View Cats website sketches. Click the image to enlarge
MOBILE LO-FI WIREFRAMES AND TESTING
Have fewer donate buttons and more clear titles
After the first round of sketches, I created low-fidelity wireframes and turned them into a prototype for testing. User testing revealed a list of usability issues as shown below.
Before
After
Tweaked the titles and adjusted the hierarchy of the Ways to Support Us page.
Before
After
Removed "Sponsor Me" button and prioritized donations for MVP.
Before
After
Monthly subscription became a button at the top, improved the copy on transaction fees.
Before
After
Removed "Donate" buttons from the About Us and Contact Us pages.
DESKTOP LO-FI WIREFRAMES AND TESTING
Big buttons, empty footer
On the desktop, user testing revealed some issues related to the content and visual design:
Not enough information if donations are spent only on cats.
Buttons are too big.
Footer is too big and it's almost empty.
Added statistics in more places and emphasized how the organization is led and donations are spent.
Resized buttons on all pages.
Redesigned the footer to resemble a cat's head and improved the sizing.
Hi-fi mobile prototype
Hi-fi desktop prototype
USABILITY TEST RESULTS
Users need more information
After two rounds of lo-fi and mid-fi prototype testing for both mobile and desktop, I created a hi-fi prototype and conducted five usability tests.
Key takeaways:
-
It wasn’t clear that Delta View Cats wasn’t a shelter, and there wasn't enough information on how it’s different
-
Participants expected to see more information about the organization and its work
-
On mobile, buttons were as big as the headers and were drawing too much attention
"I like it, it's simple and clean."
"I really like the cat footer and cat icons."
"I'd like more information about the organization."
PROJECT SUMMARY AND NEXT STEPS
Successfully instilled confidence in users to contribute
I believe that the new design has achieved its goal: helping users trust their contribution will be well-managed and have a great impact on the cat community.
In the future, I would like to:
-
Continue iterating on the desktop and mobile designs based on the latest feedback
-
Provide even more transparency on how the organization is led, and donations are spent
-
Add more features like infographics on Delta’s day-to-day work, interactive statistics, and
a FAQ page
Delta View Cats final look. Click here to see the prototype
View Other Projects
