PetCare
Overview
Background
PetCare is a pet service app for pet owners to find sitters to take care of their pets.
Problem
Pet owners sometimes need help caring for their pets. The challenge was to create a service to connect pet owners with pet sitters. It was also important to consider how to help pet owners trust that their pets are in safe hands.
Role
I was the sole designer who executed an end-to-end design process:
User interviews + Market Research
Persona + User Flow
Wireframes
Visual Design
Design System
Prototype + Usability Testing
Solution
An all-in-one pet care service mobile app with a simple 4 step onboarding process.
Here are few usability testing metrics from 3 total participants:
8.5/10 average for overall user experience
9.3/10 average for visual and branding
9.0/10 average for trustworthiness and safety
Research
Interviews
I remotely interviewed 3 pet owners with four of the same questions:
Do you ever ask friends or use service for pet sitting? Why? How often?
What do you like/dislike about the service?
Are there any services or features missing?
What are the most important things you look for in a pet sitter?
Their answers varied due to experience, but few key insights were:
2 interviewees wanted to see their pets on camera during real time
3 interviewees look for reviews
2 interviewees said price is important, but would pay more if service is great
Competitor Analysis
I analyzed and compared direct and indirect competitors. Key insights include:
4 of the 5 apps offer multiple services to choose from
3 of the 5 apps don't have an option to sort profiles
2 of the 5 apps use GPS to track walks
Define
Persona
User Flow
Ideation
Wireframes
Below is Version 1:
User can login or sign up
4 steps to onboard
Empty state occurs since there are no appointments yet
Below is Version 2:
User must upload multiple photos to verify self and their pet(s)
I changed the stepper UI to reflect Material Design more accurately
Design
Moodboard
To explore branding, I created a quick moodboard:
There were 2 opposite directions to consider
Casual | Simple | Friendly | Affordable
Formal | Ornate | Serious | Luxurious
The former was more suitable
Color Palette
I used Material Palette plugin in Figma to help create my color palette:
Blue is the primary color
Pink is the secondary color
Different tints and shades help with variation and accessibility
Visual Design
UI Theme: Material Design 2
Font: Fira Sans and Fira Sans Extra Condense
Colors: Blue(primary), Pink(secondary), and neutrals
Icons: Material Design and Iconify
Illustrations: Icons8
Images: Unsplash
Usability Testing
Goals
I remotely tested with 3 participants to gauge the following:
Task completion
Pain points or obstacles
User experience
UI/Branding attraction
Trust/safety impression
Metrics
Once again, here are few usability testing metrics as a result:
8.5/10 average for overall user experience
9.3/10 average for visual and branding
9.0/10 average for trustworthiness and safety
Findings
Here are a few key insights:
Participant A expected to see a welcome/confirmation page after onboarding
Participant B was uneasy with adding payment before finding a sitter
Participant C thought editing sitter preferences in onboarding isn't necessary
Takeaways
Based on my findings, here are my design iterations for V2:
I added a welcome/confirmation page after onboarding was completed
I made adding payment optional during onboarding
I enabled sitter preferences page to be continued without being edited
Prototype V1
Prototype V2
Conclusion
Challenges
Simplifying the user flow in reduced steps for onboarding
Showcasing trust and playfulness as a brand together
Prototyping the UI to to make it smooth and realistic
Lessons
Allowing users to skip or have choices eases their experience and trust
Payment info shouldn't be required until a service or product is selected
Displaying feedback after a task has been done can be delightful and helpful
Successes
Applied Material Design in the UI
100% task completion rate during usability testing
Created my own components and variants
Next Steps
Add more fields for profile and sitter preferences pages
Design a view for live feed of pets on the home page
Show screen(s) of scheduling a service w/ a sitter