Emerald City Pet Rescue

A website redesign project that helps local pet rescue organization to boost adoption rate

THE CHALLENGE

Design for ECPR to boost their adoption rate, donation, and website visiting traffic

THE CLIENT

ECPR, a local non-profit organization that rescues abused, neglected animals, predominantly from high-kill shelters

MY ROLE

Main contributed in wireframing, UI, and information architecture. I also participated in research and ideation.

DESIGN TOOLS

Paper & pen, Sketch, Figma, InVision, Photoshop

Background

Where the story begins: a comprehensive overhaul of the ECPR website

Emerald City Pet Rescue is a Seattle local non-profit organization that rescues abused, neglected animals, predominantly from high-kill shelters. ECPR focuses on housing, training, and rehabilitation for hard to adopt animals and is ran by dedicated staffs and volunteers who care for their animals.

There is a lot of user experience and usability problems in the current ECPR website: lack of clear call-to-action, overwhelming homepage, and unclear information architecture. In this case, ECPR is committed to a comprehensive redesign of their entire site. Our team is partnering with them to deliver an intuitive and engaging website that helps attract potential donors, adopters, and community supporters.

Overview

A quick look on ECPR's previous website

Like what you can see in the current page, those text heavy pages could easily discourage the website visitors to feel engaged with ECPR. Moreover, this might lead to negative effects in trust, engagement, and usability issues.

A quick overview on some examples of ECPR's current website.

Business goals

What goals does our client want to achieve with the redesign?

To understand their business goals, we visited the ECPR center and interviewed their Social Coordinator and Senior Director. Also, speaking to their volunteers, customers, and other staff members helped us align with our client and other stakeholders. There are four primary goals ECPR hopes to achieve through this redesign.

1. Boost the traffic of the website, and increase subscribers

3. Expand donor pool, and the amount of donations

4. Engage the local community

2. Increase the adoption rate and the amount of adoption

Design Principles

ECPR's website should be clear, easy-to-use, and engaging

With all the insights we received from our stakeholders, we decided to focus on the following design guidelines so that our final design could be align with both stakeholders' and users' needs.

Be transparent

We need to provide clear content and succinct information to the target audience.

Be accessible

We need to increase the ease of use and overall satisfaction of the previous ECPR website.

Be engaging

We need to make the website clear, and prioritize the content visually to increase the engagement.

Be transparent

Providing clear and succinct information

Based on the goals of the website, we noticed that there are five types of users who use ECPR website regularly. However, there is a lot of overlapping among different types of users, so we used User Task Matrix to determine 3 collapsed personas. This helped us to prioritize pages to redesign and discard pages that don't meet user's needs and goals.

1. User Task Matrix

2. Identify Primary Personas

Be accessible

Increasing the ease of use and satisfaction

This phase of the redesign project involved heuristic evaluation, usability testing on ECPR's current website and the interactive wireframe we created based on user insights.

1. Information Architecture

We started with a card sorting session to help us figure out the issues with ECPR's current information architecture. Having too many categories on the navigation bar, the old IA provides too many options to users at the same time; users might not know what to do with those options.

Information architecture improvements we made through user research

2. Usability Problems

We conducted heuristic evaluation and usability testing on the existing ECPR website. Based on user feedback, we identified the following four primary usability problems.

Disorganized & overwhelming information

"There are too many things going on: long texts, images, and videos. I don't know what to read first."

Hard to search & find pets through the website

"I have to scroll all the way to see what my options are, and still can't find it."

Inconsistent experience when making a donation

"Jumping straight to PayPal makes me feel unsafe, I don't know if I am still under ECPR's site."

Too many Call-to-Action buttons on the homepage

"I don't know which buttons to click, there are too many of them. I am confused."

3. Wireframe & Testing

After a couple of paper iterations and getting insights from the user research, we had a general idea ready, so we switched into Figma and iterated on the wireframes. Below is the interactive wireframes we came up with after a couple of iterations, and we used Figma to conduct further usability testings.

An interactive wireframe that we can test with our target users.

Be engaging

Increasing the overall engagement

The idea for this final part is to increase the overall engagement of the ECPR's website. We want to let the users know that ECPR is trustworthy, friendly, and active. For our final deliverables, we created 3 visual concepts and decided to go with the iteration that has the most exposure of the animals in ECPR.

01. Homepage

The concept of this homepage redesign is to emphasize on ECPR's activities, animals, and what users can do to help the animals. We also hope to increase the adoption rate by increasing pets exposure.

02. Our Animals

We added quick links in each sub-pages so that users would know what to do next, in this example, once users are interested in a pet, they will be able to click "adopt a pet" to make follow-through actions. Also, we added a filter feature so users can easily locate their ideal pets, and, in the meantime, increase the exposure of other animals as well.

03. Donation

The old IA takes users directly to Paypal payment page after they click donate. We made the donation progress more intuitive and users more related to the animals by including the donation page under ECPR's domain.

04. About Us

The About Us page now only highlights ECPR's mission in key sentences so that our users could understand ECPR in a short period of time.

05. Adopt a Pet

ECPR has a specific adoption process that they developed. The potential adopters has to take a survey or phone interview in the beginning of the adoption process so that ECPR staff could know if they are a good match. With the new IA, we increased the readability of the page and our target users would have a better idea of what to do next.

More Pages

Next step

What we could do more?

For next steps, we would design the blog page that is easy for ECPR to update regularly. Also, we would create responsive layouts for different screen sizes, and further test the usability of the website.

Please don't be hesitated to check out our interactive prototype if you are interested!