PETMENT
A mobile website for pet owners looking to rent
01 Problem
Many people in today’s housing market find it difficult to find housing that allows pets at fair and affordable prices. According to the 2021-2022 National Pet Owners Survey conducted by the American Pet Products Association (APPA), around 70% of all U.S. households own a pet. This is a major chronic problem in today’s society and brings feelings of anxiety, fear, and uncertainty to many pet owners.
Our goal with this project was to design a website that makes the process of finding a home for pet owners easier by narrowing down potential options to just those that are pet friendly. Because many of the available options for finding a home don’t require listings to use filter options to ensure they’re reaching the correct potential renters or buyers, many users find difficulty with finding the perfect home for them and their pets.
Team Members
Jason Blecman
Thea Knasiak
Jesus Picos
Tools
Figma, Adobe Illustrator, Miro, Google Sheets, Google Docs
02 Research
For PetMent, we wanted to know several characteristics to fully understand exactly what bases we needed to cover for our app. For example, we asked about users’ age and income, how many pets they have and what kinds they have, as well as their desired moving location. We wanted to know whether or not they preferred to have roommates, and why or why not.
Additionally with user characteristics, it was crucial to our research to understand what web applications users were already using. Along with this, we wanted to know what frustrations users experienced using these apps and how we might improve on that experience.
03 Insights
From our research, we learned that users on average earned under $50,000 a year, had at least one roommate, and were mostly dog or cat owners. Because our users mostly fell under a low income bracket, we focused our product on only people looking to rent.
Due to the scope of our project and the difficulty of finding qualified users to interview, we opted not to include a user person for landlords and property managers. While this would have given us more user data and a more holistic view of potential users, we couldn’t find a large enough sample size in time to complete the project.
User Persona
Empathy Map
Based on the results of our research, we created an empathy map that helped us understand the thoughts, feelings, and actions of our user persona. We concluded that the average user often feels stressed and frustrated by the most commonly used apps and websites for finding a home because they often don’t display listings that are actually accurate to their search filters.
User Journey
Using our user profile and empathy map, we developed a user journey diagram that gave us an overview of our average user’s experience with our website. This gave us an idea of how we could market to new users, and how each user could accomplish the goal they have when using our website.
04 Design
Site Map and Sketches
We broke down the basic tasks users take to accomplish a goal on the site to give us a better understanding of its overall layout and usability. This helped us further empathize with our user, and gave us a more focused vision of what we were trying to accomplish, and from this we were able to develop a very basic site map, which we then used to work on basic wireframe sketches of our product.
For our sketches, we utilized the crazy eights method to produce a large quantity of concepts for each page and function of our website. We then voted on our favorites for each section, which gave us a general overview of the layout and visual design of our product.
StoryBoard
Using the sketches and site map, we then created a storyboard that gives a general overview of the product from the perspective of our user.
User Flow
Using the sketches, site map, and storyboard, we created a complex user flow diagram that maps out the various systems present in our website. Each cycle in the flow diagram maps a different core function of the website, from the sign in process, to searching, to navigating the user profile, every user interaction in the website is mapped out to give us a detailed understanding of how we needed to approach designing our first prototype.
Design System
Our design system was made for our hi-fi prototype to help us maintain a style guide for our product. Our color palette was designed to be eye-catching, unique, and soothing, with the use of a cool primary color, an off-white secondary color, and a high contrast pink color as an accent. We chose the “Roboto” font because of its modern aesthetic and for its accessibility usage as a dyslexia-friendly font. Our iconography is meant to be simple, clean, and communicative without being overwhelming.
06 Solution
Low Fi Prototype
Creating an application that serves the target needs of our users with as little user friction as possible was crucial to our design goals. We wanted users to be able to be immediately familiar with our application, and to meet their needs from the get-go. We modeled our design based on other major apartment applications, but wanted to communicate to the user that their pet needs are our top priority. Some of our major features that set us apart from other applications included in-depth filters for pets and profile attributes for pets.
During testing, we found that users had a little difficulty navigating back and forth between the home page, and didn’t find the sidebar as intuitive as other web applications they had used. A major issue that we found was that users expected that the listings would be curated directly from landlords, and not from external sources.
High Fi Prototype
For our high fidelity prototype, we took these pieces of feedback and tried to make an experience that was a bit more intuitive to user expectations from previous experiences. We simplified the profile page to use pop-ups and windows to edit key information instead of editing in-page. One of the biggest issues we encountered in the lo-fi prototype was not having enough layers for doing certain tasks. Performing tasks was too complicated, congested or confusing, so we divided up tasks into smaller steps, i.e. instead of editing the username of the user directly on the page, a popup edit window would appear.
07 Usability
To test our high fidelity prototype, we asked for help from 6 pet owners. Our goal was to determine the overall usability of our website, and our tasks ranged from navigating to the login screen, to navigating to their user profile, to searching for a listing, etc. From our testing, we found that our users didn’t have much difficulty navigating the site, and only had some minor feedback about the user interface and some filtering options.
Based on the results of our usability testing, we changed the way the search filters were displayed, the interface of the user profile, and we added the option to apply for an apartment directly from the listing page, rather than having it navigate to an external site.
Final Thoughts
Based on the goals of the course, as well as personal goals for designing our prototype we believe we accomplished what we set out to do. We’re all happy with the results of our product, and while we know it’s lacking elements necessary for a landlord user persona, we overall feel we delivered a well-designed, user-centered prototype.
In the future, we would like to incorporate usability for landlords and property managers, as well as update the prototype to be more accessible based on future testing and feedback.