Petty - Pet Care App
A mobile app design created to connect pet owners with trusted pet sitters through a secure, simple, and user-friendly service flow.
Petty - Pet Care App
Project Name: Petty
Project Type: Mobile App Design / UX Case Study
Category: Pet Care / Service Marketplace / Mobile Platform
Platform: Mobile Application
Target Users: Pet owners and pet sitters
Role: UX/UI Designer
Scope: User research, personas, user flow, wireframes, UI design, prototyping, usability testing
System Type: Two-sided marketplace / Service booking app,
Key Features: Pet sitter discovery, pet profile, booking flow, in-app communication, rating & review system, live tracking concept
Tools: Figma, Miro, User Research, Wireframing, Prototyping, Usability Testing
Year: 2022
A mobile app design created to connect pet owners with trusted pet sitters through a secure, simple, and user-friendly service flow.
The Process
1) Define the User
User Research Interview
User Personas
2) Ideate
Ideation Concepting
Afiniti Map
HMW Questions
Chose Best Idea
Flow
3) Prototype
Wireframes
UI
Prototype
4) Test
Usability Test
Optimization
1. Define the User
To understand the target audience, I reviewed existing pet sitter applications and conducted user interviews. The research helped me identify key user needs and create two main personas: pet owners and pet sitters.
1.1 User Interview
I prepared open-ended interview questions to better understand users’ experiences, expectations, and pain points. The goal was to hear their stories and identify where trust, communication, and usability problems occur during the pet sitting process.
User Needs
Users need a safe and trustworthy platform where they can review pet sitters, access detailed sitter information, and communicate easily. Pet owners want to reduce anxiety by tracking their pet’s status, while pet sitters need a simple way to find and manage the pets entrusted to them.
1.2.User Persona
During the design phase, I created the personas to make a design suitable for the target audience. I have benefited from the research and interviews I have done while defining this persona.
I decided to create two different personas for this app design. The first of these personas will be the person who will entrust the animal. This persona will generally be a person who lives alone, has just started working, and earns good money.
The second persona will be the person who takes care of the animal. This persona will generally consist of students, people who need money, and people who like to spend time with animals.
You can find more information about these personas in the section below.
2. Ideate
2.1.Ideation Concepting
I collected all the problems faced by the users at the idea stage. I identified these problems together with the people I trained with on User Spots. We have made a list of these problems. We have selected the most necessary problems to find solutions to the most necessary problems. In the HMW section, we offered solutions to these problems.
2.2. Afiniti Map
I found many problems during the problem-finding phase. By classifying these problems under specific headings, I created an affinity map. By following this method, I determined which area people have more problems in. Considering this classification at the stage of designing the application, I will look for solutions to these areas.
2.3. HMW Question and Choose Best Ideas
Insıght: In the first main action that the user will take after the registration process, we get all the necessary information from the pet owner (while posting).
HMW Question: How can we get detailed information about the pet from the user and how and where can we give it to the other user?
Profile page for a pet.
The pet owner fills out a detailed form about their pet just before posting a sitter post. They cannot agree with any caregiver without filling out the form.
Some main criteria are determined for animal characteristics. The pet sitter profile reaches pets and all their attributes by filtering them according to these main characteristics.
After the user reaches an interaction level to be determined, a pop-up directing the user to the form can be redirected to the form with a dialog like “edit your pet’s profile and post an ad”.
Insight: Communication should be provided via the app for the privacy of both personas. Photos should be taken by reaching the instant camera, not from the gallery.
HMW Question: How can we ensure users secure their share of personal contact information, or communicate between personas?
There should be a chat system in the application and voice video call options, giving information when the two parties approve, not being obligatory.
Communication should be provided via the app for the privacy of both personas. Photos should be taken by accessing the instant camera, not from the gallery.
The application’s phone number to the user, identification of the hotline.
Insight: Detailed information system about the trainer for the convenience and safety of the pet owner.
HMW Question: Where and how can we get scoring and comments from users to build trust?
After the job is completed, the trainer and the pet owner’s comments and ratings of each other (one right only) can be scored when the service is completed.
Ratings should be categorized and a reward system should be applied to encourage scoring and comment.
Insight: I would like to get information about the trainer.
HMW Question: How and where can we get detailed information about the instructor and share it with the user?
After the pet sitter is registered, a warning can be issued to the pet sitter in the application. Like “You will not be shown in the pet sitter list unless you fill out the form”.
After filling out the form, the pet sitter is displayed in the list of pet sitters and users can select the carer with different filters.
Insight: If the safe area is determined and the user leaves the area, the other user will receive an alarm.
HMW Question: How can we constantly monitor where and how her pet is?
Continuous monitoring of the sitter’s location via phone GPS. (live tracking system)
GPS tracking can be done via the app only during the time intervals when the caregiver and the animal owner talk.
2.4. Flow
I worked on the flow of the application. To complete the flow, I first worked on paper. I transferred the latest stream to the computer environment.
You can see the flow I made in Miro below.
3. Prototype
At this stage, I will design the interface of the app design that I have done during the research phase.
3.1. Wireframes
Sketches
I started the design phase with hand sketches. I created the frames according to the flow that I determined during the flow phase. I made a draft of the UI design along with the sketches. After this stage, I transferred the frames to the computer with the help of Miro. I use hand sketches to quickly transfer the ideas in my mind to the physical medium.
You can check out the sketches I made in the section below.
Mid-fidelity Wireframes
After the hand sketches, I transferred the frames to the computer. At this stage, I determined all the layouts in the frames and put placeholders there. At this stage, I created all the frames and brought the design to the final stage. After this stage, I will finish the interface design.
You can see examples of mid-fidelity wireframes below.
3.2.Ui Design
I referenced the user interviews and research I did for user interface design.
As a result of my research on typography, I decided on the font Maiandra GD. I examined the applications related to animals in the market. Apart from that, I researched how animals make people feel. As a result of these researches, I realized that animals make people feel happy and loving, and I chose the appropriate font.
In user interviews, I’ve seen people stay away from more complex applications. That’s why I made a simple UI design as design.
You can see the palette I chose as the color palette below. My purpose in choosing this palette is to say the emotions that animals make people feel. I used a vibrant color as the main color because animals make people feel happy and caring.
3.3. Prototype
When I got to the prototype stage, I transferred the wireframes I created to Figma. I created all the frames one by one in Figma. At this stage, I connected the frames I created with Figma’s prototype creation tool. With this method, I have created the first prototype of the application.
You can see some of the interfaces designed below.
After designing the interfaces, I provided the connection between each other. I linked these links together using Figma.
You can see the general map of these connections in the section below.
If you want to use the designed application, you can reach the prototype stage of the application by pressing the button below.
4. Test
4.1. Usability Test
1. Find Test Purpose 2. Find Target User 3.Prepare Questions 4.Prepare Scenarios 5.Observe 6.Collect Data 7. Revised
Test Purpose
I went to the testing phase of the product for which I had designed the mvp. My aim at this stage is to give a specific scenario to animal owners and animal sitters and to identify where they have difficulty in this scenario.
Find Target User
I used the personas that I had identified while designing the application for my personas. From these personas, I gave different scenarios to the pet sitters and animal owners.
Prepare Scenario
I have tasked pet owners to purchase a service to walk their pet daily.
I tasked the pet sitters to post an ad for a walk around the animal.
Observe and Collect Data
Here are the notes I took while making the script I gave the pet owners to do:
Owners of animals found the registration process to be a bit long while finding pet sitters.
I realized that pet owners want to access the pet tracking tab from the main screen.
They said more personalized spaces could be found for their animals.
Here are the notes I took while making the script I gave the pet sitters to do:
The pet sitters were a bit confused and wasted time during the registration process.
4.2. Optimization
I added a button to the image on the right for them to replace the image on the screen with their own animal photos. In this way, they will use the application as a more personalized application.
By placing the animal follow button on the right image at the bottom, I enabled the animal owners to follow their animals easily.
