Pawseekr
Mobil App UI
Timeline - 5 Days
Team - Individual Project
My Role - UX/UI Designer
Tools - Adobe XD, Illustrator
Prototype Link
" PawSeekr allows people to easily find and adopt their ideal pets from local shelters. "
Overview
About
As my first academic UI project, I was given mid-fidelity wireframes of PawSeekr to skin. PawSeekr is a mobile app to help people find adoptable pets from local shelters. While it sounded easy, the mid-fi wireframes were very old-fashioned and did not really touch the pain point. I've decided to redo the UX part as well. Because of the time crunch (5 days), we were required to deliver 4 screens (not the entire app) at the end.
Challenge
Each year, there are more than a million adoptable dogs and cats waiting in shelters in Canada. Through adoption, people can save their lives, get a great companion, and spend less (compared with buying a pet). Each dog has a personality and heart of its own. The current options for finding and adopting a dog or a cat are often tedious, limited and impersonal. How might we streamline the search and adoption process and educate people on ownership must-knows?
Approach
PawSeekr enables users to locate their ideal dog, educate themselves on their ownerships must-knows, pet personalities, and all of the steps a user needs to take to own a dog that perfectly matches them. Via PawSeekr, users can easily find and adopt their ideal pets from local shelters.
User
Research
Understanding the Motivation
I created and distributed online surveys via Facebook groups and Slack, and conducted in-person interviews to understand pet owners, why they want pet adoption from shelters, how they find and adopt the ideal adoptable pets and their opinions on pet adoption. Due to time constraints, the survey was collected for 1 day with 15 responses and 5 interviews were completed.
Understanding the Market
To determine the market fit of PawSeekr, I did a competitive & comparative analysis. I looked at some similar pet adoption apps and focused on key features such as pet search, shelter information, and adoption process. A quick look at several similar pet adoption apps gave me some ideas.
-
A map view of available adoptable pets presents a clear picture of pets around users.
-
A very detailed filter helps users narrow down their pet search.
-
Shelter information is either limited or not available in these apps, which can set PawSeekr apart from the others.
Planning
Meeting PawSeekr Users
With the information I acquired during research, one user persona, James Cook, was formed to represent the potential users of PawSeekr and to guide me through my design phase.
Feature Prioritization
Based on the above user research, I nailed down to some key features.
-
Read shelter information and reviews on the app because James believes that good reviews indicate an efficient and effective process.
-
Locate adoptable pets as well as available shelters around users to search, which tackles one of James' frustration about scattered information of shelters.
-
Read pets' health conditions and historical information on the app because these are James' top concerns when making a decision.
-
Set up a pet visit with shelters instead of directly jumping into adoption since James wants to meet pets and get to know them first.
Design
Low-fidelity Wireframes
Low-fidelity wireframes were the first step to help me outline the app incorporating all the features above. Because of the time constraint, 8 screens were completed.
Mid-fidelity Wireframes
After finalizing the low-fidelity sketches, I digitized the sketches in Adobe XD. This visual guide represents the skeletal framework of PawSeekr. It helped me arrange the interface elements while I focused on the functionality rather than what it looks like. Moreover, the simplicity of wireframes allows me to quickly test ideas without diving into the details.
UI Design
Why
It’s important to come up with a Why to understand why exactly I am creating my design; this should be kept at the forefront of my work and used to guide my decision making. Why Pawseekr? Because it helps people find their ideal adoptable pets from local shelters easily. The visual language of the Why can be explored through the following 5 categories:
Mood: Much like the feeling of having a pet is trying to evoke, the mood of the design should be friendly, adorable, homey, and trusting. As we are trying to pique the interest of our target users, it also needs to be energetic and nurturing.
Colour: The colour reflects what a pet owner would see. It contains a very natural sky blue and a bright orange. Blue is also trustworthy. Orange is not only warm and playful, but it is also close to many cats and dogs' fur colours like tan, brown and beige.
Shape: Organic and softy shapes reflect the adorable animals.
Space: Drawing inspiration from nature, I want open space.
Movement: The movement of the website is fluid and smooth — this is how I envision pets, especially cats move around.
Mood Board & Style Tile
The art direction I explored is a reflection on the visuals everyone has seen some time in their lives, the very happy moment.
The next step was to translate the mood board into a style tile. Using the mood board, I mocked up some UI elements to give me an idea of how this art direction might look like on a mobile app.
I also worked on a Style Guide. I added all the colours and the gradients, the typography, and a complete set of icons, and included my logo design (see next section), navigation and header backgrounds.
Logo Design
As mentioned above, I did some logo exploration. With the logo for PawSeekr. I jumped into taking to pen and paper to quickly iterate through different concepts. I wanted to deliver something very straightforward and fun so users could identify what this app was about from the logo and expect an intuitive and playful experience.
Paw was definitely a key component here. The initial idea was to incorporate paw with a house because PawSeekr could give pets a lovely home, which reminded me of a shelter logo, instead of a pet search app logo. Next, I tried with paw and heart, which was a bit confused with the animal clinic.
After exploring a few different concepts, I returned to the starting point, the name. PawSeekr, by its name, is about pet and search.
My logo shall contain these two components: a paw representing the pet, and a magnifying glass representing the search.
Animation Design
To make the whole user experience more delightful and engaging, I came up with some animation ideas for the loading screen. Users are able to tell when the app is loading with more paws fading in. I also applied a smoothy bouncing movement (like a cat) in the transition between the Home screen and the Hamburger menu.
Design
High-fidelity Wireframes
Given the 5-day time limit, I was not able to do usability testing and had to move to high-fidelity wireframes. To view the complete prototype, please click on Prototype Link.
The End
Final Thoughts
I’m pretty happy with how everything turned out. There is a lot I want to fix and expand on, such as additional screens for shelter information, saved pets and cat section, and the usability test for sure. I also enjoyed a lot in logo design and animation design in Adobe XD.
Future Consideration
I would like to create a portal for shelter staff to enter. Shelter staff play an important role in the pet adoption process. Having shelter staffs involved in PawSeekr would make the search, the communication, and the adoption more efficient and productive.