Much Love

Animal Adoption Website Redesign

MY ROLE

User Research, Definition & Ideation, Wireframing, Prototyping, Figma Prototyping, Usability Testing, Partial Coded Prototype

TEAM

Steve D., Danielle B., Ricky L.: User Research, Definition & Ideation, Wireframing, Figma Prototyping, Usability Testing

TOOLS

HTML, CSS, JS, jQuery, VS Code, Github, Figma, Miro, After Effects, Photoshop

DURATION

2021 (1 month)

PROJECT TYPE

UX Design

Problem

The non-profit organization, Much Love Animal Rescue website provides an overwhelming amount of information and yet users struggle to find information about how to care for a rescue pet and don’t understand the adoption process.

Solution

Re-create the website so calls to action are more accessible and relevant information/processes are clearly displayed. 

Project Preview

Mobile version

We chose Much Love, a non-profit animal adoption website for redesign because the website provides an overwhelming amount of information so the users struggle to find adoption process. As for visual design, we started from comprehending the elements on the website then develop a more elegant and visual appealing style across the whole content.

The user is able to see the pop-up information about how they can be qualified to adopt a pet and the fee they need to pay beforehand. The new design leads users step by step instead of letting the users look for information all over the place.

We also design a system that is quick and easy to choose the amount of donation.

Desktop version

Empathy

Research Strategy

See interview plan here.

Conducted online survey and received 10 response of which:
‍
70% were pet owners 
30 % had adopted a rescue animal
20% had fostered an animal
50% had donated to an animal shelter
60% had volunteered at an animal shelter
‍
Conducted 5 one-on-one interviews to help determine what motivates individuals to adopt or foster pets, volunteer at animal shelters or donate to animal shelters.  
Utilized the SWOT method to complete 3 competitor analysis of other animal rescue organizations. 

Survey Data

Not adopting due to:

  • Lack of information about the process
  • Worried about how to care for a rescue pet
  • Don’t know enough about rescue animals

Interview data

Pain Points

  • No process for adoption
  • Too text heavy
  • Too many donation options

Features Wanted

  • Animal medical history
  • Clean/concise text
  • Make donating option clear

Feature Prioritization

Competitor Analysis

Heuristic Evaluation

Persona

"Love animals but I don't know if I am ready to have my one of my own."

Definition

Problem

The non-profit organization, Much Love Animal Rescue website provides an overwhelming amount of information and yet users struggle to find information about how to care for a rescue pet and don’t understand the adoption process.
How might we more clearly define the steps involved in the animal adoption, fostering, donation and volunteer process on the website so that users who are considering these options feel confident in their knowledge of the services offered by the animal shelter?

Solution

Re-create the website so calls to action are more accessible and relevant information/processes are clearly displayed.

Ideation

Storyboard

Adoption process task flow

Wireframe

Donation process task flow

Wireframe

Style Guide

Testing & Iteration

A/B Testing

Iteration

Other Projects

UX Design
Safe & Sound
UI Design
EdisonFuture
Product Design
Greenhive