Frame 50_2.png

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 Before

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 After

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

Avatar 1

"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

Avatar 2

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:

  1. Increase number of monthly donations by 20%

  2. Increase conversion from visitors to donors and volunteer signups by 10%

Current Delta View Cats website

Cat Shape 1

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

Delta 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

Cat Shape 2

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

Cat Shape 3
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.

Delta Sketches

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

Delta User Testing

Tweaked the titles and adjusted the hierarchy of the Ways to Support Us page.

Before

After

Delta User Testing 2

Removed "Sponsor Me" button and prioritized donations for MVP.

Before

After

Delta User Testing 3

Monthly subscription became a button at the top, improved the copy on transaction fees.

Before

After

Delta User Testing 4

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:

Delta Desktop Testing

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
Delta Mobile Wireframes
Delta Features
Hi-fi desktop prototype
Delta Dekstop Wireframes
Delta Features
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

Delta Test Quotes

"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 Desktop Fianal Look

Delta View Cats final look. Click here to see the prototype

Delta Summary
View Other Projects