A website redesign project that helps local pet rescue organization to boost adoption rate
Design for ECPR to boost their adoption rate, donation, and website visiting traffic
ECPR, a local non-profit organization that rescues abused, neglected animals, predominantly from high-kill shelters
Main contributed in wireframing, UI, and information architecture. I also participated in research and ideation.
Paper & pen, Sketch, Figma, InVision, Photoshop
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.
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.
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.
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.
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.
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.
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
We conducted heuristic evaluation and usability testing on the existing ECPR website. Based on user feedback, we identified the following four primary usability problems.
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.
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.
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.
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.
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.
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.
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.
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!