Pet Genie
Duration
5 months
My Role
Research, Wireframe & Prototyping, User Interface Design
Tools
Figma
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:
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.
.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:
.png)
Surveys
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.
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.
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
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.
.png)
Competitive Research
This competitive research chart compares and contrasts the functionalities between our platform Pet Genie to our top two competitors Petfinder and Adopt-a-Pet.com.
Petfinder and Adopt-a-Pet.com 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 Adopt-a-Pet.com, 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.
.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.
.png)
Wireframes
.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.
.png)
.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.
.png)
.png)
Inbox
Message employees from animal shelters to get more information about their adoption, foster, or volunteer process.
Community
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.
.png)
.png)
Donate
Make a donation to the shelter of your choosing. Select amount and type of donation.
High Fidelity Mockups
