top of page

Pet Genie


5 months

My Role

Research, Wireframe & Prototyping, User Interface Design



Adobe Illustrator


Project Brief

Pet Genie was created for our senior year Digital Design Thesis Studio. It is a collaborative effort between myself and three other digital design students at New Jersey Institute of Technology. With this project we aim to follow the UX/UI design process to create a cross platform application.

Pet Genie

The Pet Genie diagram breaks down the primary three aspects of our platform and indicates the primary differences between adoption, foster, and volunteer process.

Our Mission Is To Create A Platform That Connects:

Frame 213.png

Design Approach

The design approach included research, analyze, ideation, design, and testing. First, I conducted research regarding the current market for adoption and shelter websites. Then I conducted user interview with local shelters and distributed surveys. I then moved to analyze, where I created user personas, data visualizations, and assisted with the app site map, based on the research and data collected. Then in the ideation phase I began to wireframe and helped plan out our advance onboarding. I then moved to design, where we worked on the user interface design and prototyping. Lastly, I conducted usability testing to analyze the design.

Frame 37 (1).png

User Interviews

User interview were conducted with employees of six different animal shelters in New Jersey to learn more about the adoption, foster, and volunteer process. Questions were split into the following categories: 

  • General Shelter Questions

  • Adoption Questions

  • Donation and Sponsorship Questions

  • Foster Questions

  • Website Questions

  • Facility/Animal Questions

  • Demographic Questions

Commonalties were found with the following questions, indicating insights about pain points, point of connection with users, and improvements that could be addressed when designing our platform:

Frame 211 (1).png


A survey regarding the adoption, fostering, and volunteering process was sent to individuals who were familiar with the processes. Total of 17 survey respondents were gathered. 

When asked to rank following information based on how important it would be to see/know about the adoptable animal, respondents indicated that color was the least important information, as analyzed by a mean value score of 2.06, while photos was the most important information, as indicated by a mean value score of 4.59. The following visualization ranks the information on a scale of 0 to 5, 0 indicating not important and 5 indicating important information.

Frame 44.png

When asked if they were to look online to rank the importance of information they would like to see on a website or mobile app, respondents ranked animal adoption information, fostering information, and online calendar system to book appointments as important information. Sponsoring and shelter news was not important to see, while donation, online shop, volunteer, and shelter events were ranked as neither important or unimportant. The following visual indicates the importance of ranked information based on bubble size and color. Large blue bubble indicates items of importance, while red smaller bubbles indicate items of no importance and yellow medium bubbles are neutral items.

Frame 42.png

Shelter Visit

Our shelter visit to the Associated Humane Society (AHS) in Newark, NJ helped us target the areas we needed to incorporate into our application.​ We were given a tour of the facility and spoke with shelter employees. From the visit we gathered the following:


  • Many of the foster parents ended up foster failing (adopting the pet after fostering). 

  • The shelter preferred that online applications come directly through a third party application like PetFinder. 

  • They would like to have more volunteers to help around the shelter.

  • Potential adopters come in to visit the pet before adopting it right on the spot. 

  • Donations and items were typically dropped off at the center. 

User Personas

Frame 50.png
Frame 52.png

Application Site Map

The application site map lays out the information architecture of our platform, as users are guided through pet interest, analysis, program process, and back to home. The user can select between the adopt, foster, and volunteer services. Based on their selection they are guided through a tutorial, which helps elaborate on the adoption, foster, and volunteer services. Next, the user takes a user lifestlye compatibility assessment to pair them with the best animal. 

The home page is where the user can see their matches and explore local events and news. Additional features of the Pet Genie platform include a shop page, favorites page, inbox/community page, and pet profile page. If the user finds a pet they are interested in they can apply through our platform to get more information. 

Frame 209 (1).png

Competitive Research

This competitive research chart compares and contrasts the functionalities between our platform Pet Genie to our top two competitors Petfinder and


Petfinder and are existing online platforms that provide users with online database of animals in shelters, rescues, and private owner's home who are eligible for adoption or fostering. 

In comparison to Petfinder and, our platform Pet Genie offers clear indication and distinction between adoption, foster, and volunteer services, search based on characteristics of pets, search based on three user types, advanced tip guide for the three services, and pet stories/journeys.

Frame 215 (1).png

Compatibility Assessment

During our advanced onboarding, users can opt to answer a series of questions, which will aide in pairing the adopter with possible animals, based on their lifestyle, personality, and preferences.


While a majority of the questions will be objective, there will also be a subjective question which asks 'Which best describe your pet?' (Pick 3).' This novel subjective question will help determine qualities that the adopter would want in a pet to match them with the best companion. 

Frame 217 (3).png


Mockup2 (1).png

Site Homepage

Website home page, which includes brief introduction to Pet Genie, logo, image, and donate button.

Compatibility Assessment Matches

After taking the compatibility assessment to determine the best pet matches, the users are shown possible matches, shelter events and news, and can be taken to the Edit & Match page to alter their choices and results.

Mockup2 (2).png
Mockup2 (4).png

Edit & Match

Users can edit their responses from their compatibility assessment. The left hand side criteria and filters can be changed based on user preference providing new pet results.

Pet Profile

After selecting an adoptable animal, the pet profile displays information regarding the pet such as, breed, age, gender, size, a brief description and image of the pet, and badges for pet traits and compatibility.

Mockup2 (3).png
Mockup2 (5).png


Message employees from animal shelters to get more information about their adoption, foster, or volunteer process.


Join community groups centered around adoption, foster, and volunteer. Engage with fellow community members about adopted pets, animal care, or post pictures of your new companion.

Mockup2 (6).png
Mockup2 (7).png


Make a donation to the shelter of your choosing. Select amount and type of donation.

High Fidelity Mockups


Figma Prototype

bottom of page