Pet Adoption App & Website Concept
Pet Adoption Website & App.png

PetPlease is an app and website for users to easily search and view adoptable pets or re-home an animal in their local area. All animals from area shelters, rescues, fosters, and caregivers are listed here, in one place, instead of having to search multiple websites/shelters for available animals. 

PROJECT DURATION

  • 2 weeks: July 2021

 

RESEARCH

  • Interviews

  • Competitive Analysis

  • Secondary Research 

ROLE 

  • Product Design

  • UX Research

  • UX Design

  • UI Design 

TOOLS USED

  • AdobeXD

  • Figma

  • Pen & Paper

GOALS 

Design a 'social good ' app and website from scratch that allows users

  • To easily search all local adoptable pets online, instead of having to search or drive to multiple locations/websites to view options.

  • The ability to re-home their pet locally

OBJECTIVES 

  • Design should be easy to use and allow users to browse through different types of animals, with filters to help narrow down search if need be.

  • Allow users who are pet owners to create a full profile for their pets in order to list them to be re-homed

USER RESEARCH

INTERVIEWS 

6 with varying ages and genders age 23-64

REVEALING

  • A platform/website/app does not exist that has current information.

  • Not one place to view all local adoptable pets - have to visit multiple places to find.

  • Users get excited when find an adoptable pet and then it's not available because websites are not current/up-to-date.

  • Websites are clunky and hard to use.

 

COMPETITIVE ANALYSIS: 

Analyzed 2 national pet adoption search websites, 2 local adoption search websites.

REVEALING:

  • Lack of up-to-date (live) websites that allows users to search for adoptable animals, all are days or weeks behind.

  • No apps exist, especially locally. 

  • No websites/platforms that allow a current pet owner to create a profile for their animal to be re-homed.

SECONDARY RESEARCH 

Community Forums 

REVEALING

  • There isn’t 1 specific place or easy way to re-home an animal. Users don’t know where to turn to if there is a need to re-home an animal.

  • Same pet listed on multiple sites, creating confusion and too much information to sort through.

  • Not enough information is given on the adoptable pet.

IDEATION

Throughout this project, pen and paper proved invaluable. Being able to quickly iterate with pen and paper, I could create and alter ideas easily and efficiently. I drew over 20 sketches of screens before deciding which screens to create, nailing down a cohesive layout, and then moving to digital wireframes.  

 

I decided for the Navigation Bar to live on the left side (at all times), for innovative placement but also ease of navigation throughout all pages. I also designed the Adopt screen to house not only pictures of available adoptables, but also additional useful features to help an adopter select a pet.

INFORMATION ARCHITECTURE

After creating wireframes and deciding on the main features and pages, I further organized them into mid-fidelity sitemap. This helped me understand which submenus I needed for the website.

Web 1920 – 1_edited.jpg

LO-FI PROTOTYPE

PRIMARY FLOW

Being able to click through all navigation bar items on the left.

 

FLOW 1

Being able to search and click on specific, adoptable pets.

 

FLOW 2

Ability to easily re-home current pet. 

FLOW 3

Adding and editing "My Pets" picture. 

FLOW 4

Login capability (though not required to browse).

Adopt Pg - Link to Prototype
Pets Pg Link to Prototype
Lost&Found Pg Link to Prototype

Click on any screen to go to live prototype

USABILITY FINDINGS & UPDATES

TOO MANY OPTIONS ON LEFT NAVIGATION BAR

ADOPT PAGE DOESN'T FLOW EASILY AND UNORGANIZED

PREFER TO CHOOSE MORE THAN JUST CAT & DOG ADOPTABLE PET OPTIONS ON 1ST SCREEN/CLICK

Adopt Pg - Link to Prototype

KEY SCREENS

Key Screens PetPlease (2).png
Key Screens DESKTOP PetPlease.png

ACCESSIBILITY

  • All colors easily readable for color blind and macular degeneration

  • All colors WCAG and AAA checked & approved

  • All fonts kept above size 14

  • All pictures enlarge by clicking

  • Navigation bar always present & never moves, for ease of use

TAKEAWAYS

IMPACT

This app and website allows live adoptables to be listed, from their location/shelter, and even shared with others, increasing the accessibility to the adoptable animals and ease of use for the user. Also, it allows the user to store and share their pet information easily if re-homing services are needed, utilizing already stored information to create a re-homing profile, which is then loaded into the "adoptable" database alongside shelter animals, increasing the the user's chance of getting re-homed. And expanding on that, the capability of being able to set up a savings account for their re-homed pet is a giant piece of mind for the user, knowing their pet will be financially stable once they’ve been re-homed. Additionally, the app provides a place for people to create a profile and save pertinent and convenient information, driving them to website/app more often and not just for adopting.

If I were to continue working on this, I'd first link up with a bank to create the savings account system. Also, I'd like to work directly with shelters to figure out how to tie our systems in so that information would be made available as soon as its entered. 

 

 

WHAT I LEARNED

  • Gained more experience in developing for multiple platforms

  • Iconography: leveled up and got better, faster, and more creative at creating buttons and icons. 

  • Bottom Up Designing: progressive enhancement in designing mobile first, then tablet, then webpage. 

  • User Opinion: Users like change and innovation, but typically not a full scale newness as far as where things are located in apps/websites. 

  • Backend development: there will be constant evolving and changing of this app/website (and others built like it), depending on what other apps and information flow in because it’s dependent on these other systems/websites info, as well as info I build in. 

Pet Adoption Website & App (1).png
If you're interested in this project or would like to hear more, get a hold of me!
neon arrow (1)_edited.png
neon arrow (1)_edited.png
neon arrow (1)_edited.png