Petscuers
A redesigned Petscuers with an improved app experience and refreshed visual design
Timeline
~2 months
Role
Product Designer
Tools
Photoshop
Figma
Context
According to the Roice-Hurst Humane Society, there are approximately 70 million homeless dogs and cats in the United States. Driven by my deep passion for animal welfare, I created a mobile app concept called 'Petscuers' back in 2017. This concept aims to create a vital link between compassionate individuals who find lost, abandoned, or injured animals and bring them nearest animal shelters or veterinary hospitals. Recognizing that a powerful mission requires an equally strong user experience, I've undertaken a complete redesign of the app after looking back eight years later, focusing on intuitive visual design and seamless user flows to ensure every rescue journey is as effective and empathetic as possible.
Old Petscuers UI
The Challenge
The redesign effort for Petscuers presents a distinct set of challenges, primarily focused on transforming a compassionate vision into a truly effective and intuitive mobile experience, overcoming prior limitations in visual design and user experience. Through usability testing (n = 5), I gained valuable insights into the primary frustrations that users encountered while navigating the app. The main user pain points included:
-
The logo, chosen color palette, typography, and overall visual design of the app looked "tacky" and juvenile
-
The card collection of the found animals is messy and lacks the ability to filter the type of animal and specifications that the user wants to see
-
Lack of short description of each animal listing before tapping for more details, causing confusion
-
Limited to only dogs and cats
-
Adding found animal function doesn't ask users enough questions to create a proper detailed listing since all the information is being typed out in the description box
-
Having to search nearby shelters/hospitals manually on Google Map instead of using location to automatically find nearby shelters
-
Inability to edit profile
-
Inability to save draft when creating a listing or edit/confirm details before saving
Personas
I created 2 personas based off common user goals and pain points.
Jane, Worried Cat Mom
-
Pain Point: Overwhelmed by the amount of animals in the view animal listings and feels frustrated not being able to filter or sort through the listings
-
Goal: To She wants to be able to find her missing cat as quickly as possible in case something bad happens so she needs to be able easily search for the cat she is trying to find through a more efficient way of filtering and sorting
Robert, The Compassionate Passerby
-
Pain Point: Robert found an injured parrot in a park and is unable to create a listing since it is restricted to only cats and dogs
-
Goal: Robert wants to be able to add an animal that isn't a cat or dog
User Flow
I created a user flow to inform my design decisions and prioritize elements essential for a positive user experience. This methodical approach allowed me to align the interface design with the user's needs and streamline their journey with Petscuers.
Ideation
When I began sketching, my primary objective was to generate ideas that would lead to an intuitively designed interface.
I redesigned the logo so that it looks more professional and modern. The shapes are minimalistic but still clearly shows the silhouettes of the animals. I chose Baloo as the font for Petscuers, because it has a playful, friendly, and more approachable feel while not looking juvenile like in the old logo.
Before
After
This color palette I have chosen for the app redesign aims to convey care, safety, and hope, while maintaining excellent usability. The muted blue-green evokes feelings of serenity, reliability, and compassion. The gold-yellow can feel positive and inviting without being overly aggressive. The reddish-pink can be used as playful accents that need to draw attention with a touch of warmth.
Wireframe
I developed low-fidelity wireframes, intentionally employing a minimal color palette to focus purely on core functionality and user flow. The goal is to establish a robust functional blueprint that addresses prior usability gaps and streamlines the rescue process.
Final Design
Utilizing Figma, I translated my wireframes into high-fidelity designs by refining UI elements with precise spacing, consistent iconography, and realistic imagery, ensuring the visual design not only aligns with the app's compassionate mission but also enhances usability, trust, and overall aesthetic appeal.
Reflection
Petscuers marked my first journey into the realm of conceptualizing an app entirely from scratch and being able to redesign of the app concept has been a profound learning experience. Moving beyond the initial iteration's "poor visual design and user experience," the core challenge was to transform a heartfelt vision into a truly effective, intuitive, and trustworthy tool for connecting lost animals with care.
One of the most significant learnings revolved around rectifying usability gaps and building truly intuitive flows, especially for users in potentially high-stress situations. The original app suffered from friction points that deterred users from completing the rescue process. In the redesign, I focused on deconstructing the entire user journey, from the moment an animal is spotted to its safe arrival at a facility. This meant prioritizing clear, step-by-step guidance, minimizing cognitive load, and ensuring calls to action were unambiguous. For instance, designing the "adding an animal" flow required careful consideration of how to capture critical information (location, photos, condition) quickly and accurately without overwhelming the user. This reinforced that empathy in design isn't just about feeling for the user, but about designing interactions that anticipate their state of mind and simplify complex tasks.
Secondly, elevating the visual design to inspire trust and action proved crucial. A "poor visual design" can inadvertently communicate unreliability, hindering user adoption for an app dealing with a sensitive issue like animal rescue. My focus shifted to crafting a visual language—incorporating the gentle, hopeful color palette and legible typography, using Baloo for headlines and Nunito Sans for body text—that not only aligned with the app's mission but also conveyed professionalism and ease of use. The goal was to make the app feel approachable and comforting, yet authoritative enough to instill confidence that the user's actions would lead to a positive outcome.
Finally, the challenge of simplifying complex logistics with empathetic design was paramount. Connecting a found animal to the right shelter or vet involves intricate real-time data (capacity, animal type acceptance, operating hours). The redesign required distilling this complexity into a streamlined interface that provided clear, actionable recommendations. This meant designing for intelligent facility matching and presenting options clearly. The learning here was that even the most intricate backend processes must be presented to the user with utmost simplicity and reassurance, ensuring they feel supported and empowered, not bogged down by logistical hurdles.
If I were to continue working on this project, I would conduct a second phase of usability testing to validate the updates made to the original design. The Petscuers redesign underscored that effective product design for a mission-driven app is about more than just features; it's about meticulously crafting every interaction to be empathetic, efficient, and ultimately, to amplify the compassionate impact the app aims to achieve. I really embraced the creative freedom to craft something entirely my own. This was a powerful exercise in translating a heartfelt purpose into a functional and delightful digital solution.
Petscuers Prototype