FurryFriends – Mobile App Case Study
The Product:
FurryFriends is a conceptual mobile app designed to showcase my ability to create user-centered digital experiences. This project, developed during my Google UX Design Professional Certificate program, reimagines the pet adoption process. It bridges the gap between local shelters and compassionate individuals seeking to adopt. Growing up surrounded by animals shaped my understanding of their role in bringing joy and companionship to families, inspiring this project.
The real-world pet adoption process often involves shelter visits, application reviews, and waiting for approvals, which can be time-consuming. While these timelines couldn’t be fully reflected in my Figma prototype, I focused on capturing the entire journey in a seamless user experience. The app flow includes finding a shelter, browsing available pets, adding favorites, scheduling and approving appointments, completing the application process, and celebrating the adoption with a success story. This comprehensive design ensures viewers can understand and appreciate each stage of adoption.
My Role:
As the UX Designer, I led the project from concept to completion, transforming an idea into an engaging and refined product. My responsibilities included:
- Designing a user-friendly interface.
- Structuring content to enhance engagement.
- Integrating interactive features like a pet-matching system.
Every design decision was made with care to ensure the app resonates with a wide audience. The design balances simplicity, accessibility, and emotional connection to create a meaningful experience.
The Goal:
The primary goal of FurryFriends is to streamline the pet adoption process while making it rewarding and enjoyable. By connecting prospective pet owners with local shelters, the app fosters meaningful relationships, reduces shelter overcrowding, and promotes responsible pet ownership. This project demonstrates my ability to combine innovative design with practical functionality, addressing real-world challenges through thoughtful UX design.
Tools:
Figma, Photoshop, Illustrator.
Disclaimer:
All names, images, and content presented here are fictional, created solely for the purpose of showcasing my design capabilities in Figma, with the assistance of AI. Sugar Bliss Bakery, along with any referenced personas, locations, or services, is entirely imaginary and intended for demonstration purposes only.
The problem
FurryFriends addresses a significant gap in the pet adoption landscape by providing a digital platform that simplifies the process of finding and adopting pets. Many existing platforms are either too complex to navigate, lack comprehensive information about adoptable animals, or fail to connect users with local shelters effectively. This leaves potential pet adopters, especially those who may not be tech-savvy or familiar with adoption procedures, feeling overwhelmed and discouraged. Additionally, shelters often struggle to showcase their animals to a wider audience, resulting in lower adoption rates and overcrowded facilities. This disconnect between potential adopters and shelters highlights the need for a user-friendly, efficient, and engaging solution.
The goal
The primary goal of FurryFriends is to create a seamless and intuitive mobile app that connects individuals and families with adoptable pets in their local area. The app will feature detailed pet profiles, an advanced matching algorithm, and easy scheduling for shelter visits, making the adoption process both enjoyable and straightforward. By incorporating vibrant visuals, interactive elements, and educational resources on pet care, FurryFriends aims to engage users of all ages while promoting responsible pet ownership. Ultimately, the app strives to increase adoption rates, reduce shelter overcrowding, and foster meaningful connections between people and their new furry family members.
Design process
User Research and Insights Gathering
To initiate the FurryFriends project, I conducted in-depth research to understand the challenges and opportunities within the pet adoption process. While several platforms exist, many lack a user-centric approach, with overly complex navigation or insufficient details about adoptable animals. This research revealed the need for a platform that prioritizes ease of use, emotional connection, and streamlined adoption. FurryFriends responds to this gap by combining engaging design with practical features, ensuring potential adopters can connect with pets effortlessly.
Defining User Personas and Journey Mapping
Based on the research findings, I developed detailed user personas to reflect the diverse audience for pet adoption. For example, one persona included a senior user looking for a calm companion, while another represented a young family adopting their first pet. These personas informed the design of essential features, such as clear pet categories, easy-to-use filters, and detailed pet profiles. Journey mapping allowed me to visualize the user’s experience, identifying key steps such as discovering a pet, scheduling a shelter visit, and finalizing the adoption process. This process ensured every interaction was intentional and aligned with the needs of potential adopters.
Sketching and Wireframing
The design process began with sketches to outline the app’s structure and primary screens, focusing on intuitive layouts and ease of navigation. I translated these sketches into wireframes using Figma, refining the app’s flow to ensure a logical and seamless experience. Horizontal menus for pet categories and strategically placed filter buttons were incorporated to offer users a clear and enjoyable browsing experience.
Prototyping
The prototyping phase marked the transformation of initial concepts into an interactive design that could truly represent the vision behind FurryFriends. Drawing solely from my research on existing platforms and my own perspective as a potential user, I focused on creating a design that speaks directly to adopters’ needs. I asked myself: If I were adopting a pet, would this app feel approachable? Are the features clear? Do the visuals inspire trust and excitement?
These questions guided the development of a prototype that prioritized availability, simplicity, and emotional resonance. Every feature, from navigating pet categories to filtering results by location or breed, was designed to be instantly accessible and effortless. I ensured that each screen flowed logically into the next, making the experience feel intuitive and smooth.
In crafting this prototype, I imagined myself using the app—evaluating whether the layouts, features, and navigation provided clarity and purpose. The result was a design that feels welcoming and empathetic, helping users feel at ease while exploring adoptable pets and scheduling visits. This thoughtful approach ensured the app would cater to its intended audience with practicality and heart, setting the stage for the next phase of development.
Final Design and Developer Handoff
The final design phase focused on refining every detail, from the layout to individual components. A comprehensive style guide was created to include the color palette, typography, and reusable design elements, ensuring consistency throughout development. Detailed annotations and assets were provided to developers to facilitate accurate implementation of features like advanced filtering, favorites lists, and detailed pet profiles.
Persona Summary: Margaret Thompson
Understanding the User
Margaret Thompson, a 72-year-old retired teacher, embodies a user profile with unique needs and preferences. Living in a quiet suburban neighborhood, she seeks a calm and affectionate older cat to bring companionship to her serene daily life. Margaret values simplicity and clarity in digital experiences, as she is not highly tech-savvy but appreciates tools that are intuitive and straightforward.
Her mornings spent reading in her garden reflect her love for peace and routine, which extends to her desire for a pet that matches her tranquil lifestyle. She is cautious yet curious about navigating the digital adoption process, relying on an app like FurryFriends to provide clear guidance and an accessible experience.
By offering easy navigation, detailed pet profiles, and an empathetic design, FurryFriends addresses Margaret’s needs, making her feel confident in her journey to adopt a companion. Understanding users like Margaret ensures the app not only facilitates adoption but also resonates emotionally, creating an experience that feels tailored and meaningful.
Persona Summary: The Bennett Family
Understanding the User
The Bennett family represents an energetic and adventurous user group with specific needs for their first pet adoption experience. Comprising a father, mother, teenage daughter, and grown-up son, they thrive on outdoor activities like hiking, picnics, and backyard games. Their active lifestyle calls for a playful and adaptable pet to join in their adventures and bring even more joy to their dynamic household.
As first-time pet adopters, the Bennetts seek a platform that is engaging, easy to navigate, and informative. They need features like detailed pet profiles, activity-level filters, and resources on pet care to guide their decision-making process. The family values interactive elements that simplify adoption, such as favorites lists and easy scheduling for shelter visits.
FurryFriends caters to their needs by combining functionality with an inviting design, helping the Bennetts feel confident and excited throughout the adoption journey. By understanding users like the Bennett family, the app creates a seamless and enjoyable experience, helping them find the perfect pet to complete their vibrant home.
User Journey Map
The journey map for the FurryFriends app illustrates how it simplifies the pet adoption process while catering to diverse user needs. From selecting nearby shelters and browsing detailed pet profiles to offering a seamless application process, the app makes adoption both accessible and enjoyable. Users can explore pets through intuitive filters, save favorites, and engage with heartwarming success stories that inspire action. By providing a user-friendly and empathetic flow, FurryFriends not only fosters connections between pets and potential adopters but also promotes a compassionate and streamlined adoption experience, ensuring both families and their new furry companions find joy and fulfillment.
Key Features
Personalized Pet Matching
The FurryFriends app transforms the pet adoption experience with a smart matching system that considers the user’s age, address, lifestyle, and past experience with pets. This ensures that the pets recommended are not only suitable for the user’s living environment but also align with their personal preferences and daily routines. For instance, someone seeking a low-energy companion will see older, calm pets prioritized in their search results. This tailored approach eliminates guesswork, making it easier for adopters to connect with their ideal furry companion quickly and confidently.
Local Shelter Finder
Leveraging an interactive map feature, FurryFriends helps users discover local shelters at a glance. Each shelter is displayed with clear icons and distances, such as “Paws and Claws Refuge – 3.5 km away.” This visual simplicity, paired with filtering options, makes it effortless for users to locate shelters within their preferred radius. The map also offers instant navigation, bridging the gap between users and shelters. This feature is especially valuable for individuals who may face mobility challenges or simply wish to adopt from nearby locations.
Detailed Pet Profiles: The app provides a comprehensive profile for every pet, offering more than just photos. Users can explore key details such as the pet’s age, breed, weight, height, temperament, and specific health information, including vaccination status and spaying or neutering. These profiles help adopters deeply understand the pet’s personality and needs, enabling them to make well-informed decisions.
For example, a profile might showcase Muffin, an affectionate and low-energy 8-year-old domestic longhair, as the perfect match for a quiet household. The app’s clean layout allows users to easily compare pets and focus on their favorites.
Adoption Process Tracking
Adopting a pet can feel overwhelming, but FurryFriends simplifies the process by breaking it into clear and manageable steps. The app visually tracks each stage, from completing the adoption application to scheduling a meeting with the pet. Progress bars and checklists help users navigate the journey.
Notifications and reminders actively inform adopters at every step, ensuring they don’t miss anything. This streamlined workflow reduces anxiety and fosters transparency. With fewer worries about procedural details, adopters can focus on what matters most—finding their new family member.
Interactive Scheduling
The app includes an intuitive scheduling tool that allows users to book appointments with shelters directly. Adopters can select a date and time that suits them from the available slots, making it easy to meet their chosen pet without back-and-forth communication. For example, Margaret could schedule a visit to meet Muffin at 12:00 PM on June 6, 2024, with just a few taps. This feature enhances user convenience while also respecting the shelter’s scheduling constraints, making the process efficient for both parties.
Success Stories and Community Engagement
Post-adoption, FurryFriends celebrates the bond between pets and their new families through Success Stories. These heartwarming tales, like Margaret and Muffin’s journey, inspire potential adopters to take action. Beyond storytelling, the app offers additional resources such as pet care guides, access to pet insurance options, and a community space to share experiences. These features not only strengthen the connection between adopters and their pets but also create a sense of belonging within a larger community of pet lovers, fostering ongoing engagement with the app.
What Sets FurryFriends Apart
FurryFriends stands out from other adoption apps through its personalized pet matching system, which integrates lifestyle and experience to recommend ideal companions. The interactive map feature simplifies finding local shelters, while the end-to-end adoption tracking ensures a seamless process with clear progress updates. Its built-in scheduling system eliminates the hassle of coordinating meetings, and success stories add a personal, emotional connection to inspire adopters. Designed for all age groups, the app’s intuitive interface and empathy-driven features make pet adoption accessible, meaningful, and stress-free.
Refining the Design Process
To design the FurryFriends app, I began by researching existing pet adoption platforms. This involved analyzing their strengths and identifying opportunities to better support users. The research revealed a need for a more intuitive and emotionally engaging app that simplifies the adoption process while fostering meaningful connections between users and pets. These insights inspired the creation of FurryFriends, an app designed to make pet adoption seamless, accessible, and user-friendly.
Research and Ideation
The design process started with crafting Storyboards to visualize key user scenarios, such as Margaret, a user searching for an older, calm pet to match her lifestyle. These scenarios shaped the app’s core features, emphasizing clear navigation, personalized recommendations, and an emotionally supportive adoption process. Based on these insights, I developed a comprehensive User Flow to guide users through essential steps, including finding nearby shelters, browsing matching pets, and scheduling meetings.
Wireframing and Prototyping
To establish the layout, I began with Paper Wireframes that prioritized essential elements:
- Filters for pet preferences like age, size, breed, and location.
- Detailed pet profiles featuring photos, descriptions, and health details.
- Tools to track the adoption process, ensuring transparency and engagement.
These initial sketches laid the groundwork for a user-centric interface. Using Figma, I transformed these sketches into Digital Wireframes, refining the navigation flow and overall structure. Accessibility was a top priority, with features like large, readable fonts and intuitive progress indicators to accommodate all users, including older audiences.
Testing and Refinement
A Low-Fidelity Prototype allowed for early testing of layout and functionality. This phase focused on ensuring users could navigate the app with ease and feel supported throughout their adoption journey. Feedback from this stage informed refinements to the app’s design and functionality.
The final High-Fidelity Prototype brought FurryFriends to life with:
- Vibrant visuals and a warm, approachable design.
- Engaging interactions, including real-time application tracking.
- Heartwarming success stories and detailed pet profiles to build emotional connections.
Polished Experience Simplifying Pet Adoption with FurryFriends
The high-fidelity prototype of the FurryFriends app offers a heartfelt and seamless experience for users embarking on the pet adoption journey. Thoughtfully designed with accessibility and emotional connection in mind, the app simplifies every step—from discovering local shelters to completing the adoption process—making the journey as enjoyable as it is meaningful.
Intuitive navigation takes center stage, allowing users to easily filter pets by age, size, breed, and location. Each pet profile features captivating visuals and detailed descriptions, empowering users to make confident and informed choices. The app’s color-coded progress indicators and interactive scheduling tools ensure a smooth and stress-free adoption process, helping users stay on track at every step.
To deepen the emotional bond, FurryFriends showcases uplifting success stories, inspiring hope and fostering connection. Customizable preferences let users find their perfect match in real time, while post-adoption resources, including care tips and insurance options, provide continued support. The vibrant and user-friendly design ensures accessibility for all, featuring clear layouts, readable fonts, and a welcoming aesthetic that resonates with both tech-savvy users and those new to digital tools.
By blending functionality with genuine compassion, FurryFriends creates a polished and user-centered experience, guiding adopters to find their lifelong companions while advocating for responsible and joyful pet ownership in a safe, supportive space.
Visual Design: A Thoughtfully Crafted Experience for FurryFriends
The visual design of the FurryFriends app leverages a harmonious and carefully curated color palette to create an inviting, user-friendly interface that supports both engagement and clarity. Each color was thoughtfully selected to align with the app’s mission of simplifying pet adoption while fostering meaningful connections between users and adoptable pets.
Pale Ivory (#f8f2e9)
Serving as the app’s primary background color, this soft neutral tone establishes a calm and clean canvas. It enhances readability and reduces visual strain, ensuring users can comfortably engage with the app for extended periods.
Deep Wine (#723c3d)
This rich, warm tone is used with transparency for headers, footers, and other critical interface elements. It conveys reliability and warmth, grounding the design with a sense of sophistication that resonates with the emotional nature of pet adoption.
Soft Coral (#f1a4a1)
Friendly and inviting, this color is applied to interactive elements like buttons, subtly guiding users toward key actions such as browsing pets or confirming appointments. It adds a welcoming vibrancy to the interface.
Vibrant Peony (#f4658c)
With its bold and energetic presence, this shade of pink highlights calls to action, ensuring important features like adoption submissions stand out. Its modern appeal reflects the app’s forward-thinking approach.
Cerulean Frost (#62a2b1)
This cool, refreshing tone is applied to icons and informational links, offering a soothing contrast to the warmer hues. It enhances usability and aids in seamless navigation.
Midnight Blue (#212d3f)
Providing excellent readability, this deep hue is used for text, establishing a strong visual hierarchy while maintaining a clean and professional aesthetic.
The combination of warm and cool tones ensures the interface is both aesthetically pleasing and practical. Warm tones foster an emotional connection, while cool tones enhance functionality, creating a balanced user environment that appeals to all ages.
Logo and Iconography:
The FurryFriends logo blends artistry with purpose, featuring a cat and dog to symbolize the app’s focus on connecting users with their ideal pets. The bold typography paired with friendly imagery reinforces the app’s approachable and compassionate ethos.
Step-by-Step User Journey: Seamless Adoption with FurryFriends
1: Welcome Screen
The app opens with the tagline, “Find Life, Save Life. Adopt, Don’t Shop,” alongside the FurryFriends logo. Clear buttons like “Get Started” and “Login” ensure users can easily begin their journey, setting a warm and inviting tone that highlights the app’s mission of connecting pets with loving homes.
Key elements focus on simplicity, approachability, and encouraging users to start exploring the adoption process.
2: User Registration
Users are welcomed with the message, “Your journey to finding the perfect pet starts here,” setting a positive tone. Below, clear input fields for Name, Phone Number, Email, and Password make registration simple and intuitive, ensuring a hassle-free start to their adoption journey.
Key elements include a clean layout, straightforward inputs, and an uplifting introduction that emphasizes ease and companionship.
3: Help Us Match You
Users are guided to share key details like Age, Lifestyle, Pet Experience, and preferences for Pet Type and Pet Age. The intuitive layout ensures clarity and ease, helping users provide information effortlessly.
Key elements include a structured form that refines the pet-matching process while keeping users engaged and confident. This step sets the stage for showcasing local shelters tailored to their preferences.
4: Local Shelters Near You
Users see a curated list of nearby shelters based on their address, with details like shelter name, distance, and a brief overview. Options like Paws and Claws Refuge and Harmony Haven Animal Rescue make it easy to choose a convenient location.
Key elements include a clean layout and clickable interface, allowing users to explore pets seamlessly. This step simplifies the adoption process, providing tailored, reliable options to begin their journey.
5: Meet Your Match
Margaret explores a personalized list of cats like Muffin, Gizmo, and Socks, tailored to her preference for an older, calm companion. Each profile includes photos, names, ages, and personality highlights, making it easy for her to mark favorites with a heart icon and curate a list to simplify her decision.
Key elements feature detailed profiles with temperament, health, and readiness for adoption, providing Margaret with everything she needs to make an informed choice. This step fosters emotional connections and builds excitement for the adoption journey.
6: Detailed Cat Profile
Margaret views Muffin’s profile, showcasing a large, inviting photo that highlights her gentle and fluffy appearance. Details like weight, height, age, temperament, and a dedicated health section reassure Margaret that Muffin fits her tranquil lifestyle. The clear layout provides essential information, building Margaret’s confidence in proceeding with the adoption.
Key features include an “Adopt Me” button for a seamless transition to the next step. The page balances practical details with emotional appeal, fostering a deeper connection between Margaret and Muffin.
7: Apply to Adopt
The adoption application screen features Muffin’s profile at the top, showcasing her photo, age, gender, and breed to create a personal connection for Margaret. Below, thoughtful prompts like “Why Did You Choose This Pet?” and “How Have You Prepared Your Home for the Pet?” encourage meaningful, reflective responses.
A checkbox confirms agreement with the Terms of Service and Privacy Policy, while the “Agree and Submit” button remains disabled until all fields are completed. This ensures a guided and thorough process.
Key features include a personalized profile display, engaging prompts, and compliance elements to create a structured and responsible application experience.
8: Schedule Appointment
The appointment scheduling screen reinforces Margaret’s connection with Muffin by displaying her profile at the top, maintaining continuity in the adoption journey. The header, “Schedule Appointment,” clearly outlines the next step, while a progress bar shows Margaret is in the “Meeting” phase.
The interface includes a monthly calendar view for easy date selection, with available time slots displayed below in a clean, readable format. The “Confirm Appointment” button remains disabled until both a date and time are chosen, ensuring all steps are completed.
Key features like seamless date and time selection, a personal touch with Muffin’s profile, and a progress bar ensure clarity and ease of use, guiding Margaret toward the next step in the adoption process.
9: Meeting Approved
Margaret receives a confirmation for her meeting with Muffin, marking significant progress in her adoption journey. A progress bar at the top reinforces her advancement, while a personalized message, “We Appreciate Your Interest in Adopting Muffin,” adds warmth and emotional connection. The page clearly outlines appointment details, including the date and time, ensuring all information is accessible.
Below, Margaret’s favorited cats, Gizmo and Socks, are displayed as backup options or future additions, keeping her engaged and providing flexibility in the adoption process.
Key features include a clear appointment summary, a visual progress bar, and convenient access to favorite pets, ensuring a thoughtful and seamless user experience.
10: My Account
The “My Account” page greets Margaret warmly with “Hello, Margaret!” and her profile picture, creating a personal connection. It provides easy access to features like editing her profile, checking applications, and exploring resources such as pet insurance, adoption guides, and success stories. A red notification badge on the “Messages” icon subtly directs her attention to a new message, enhancing engagement.
Key features include intuitive navigation, real-time notifications, and tools like “My Applications” and “Adoption Guide” to streamline her journey. Success Stories foster community and inspiration, while the notification system ensures Margaret stays informed and connected.
This page acts as a central hub for managing her adoption journey, guiding her seamlessly through updates and next steps.
11: Approval Notification Popup
When Margaret clicks on the notification, a popup displays the message, “Your Application Has Been Approved!” A banner at the top reinforces the news with “Muffin is waiting for you” and a heartwarming photo of Muffin, creating excitement and strengthening their connection.
The message clearly informs Margaret of her approval status and encourages her to proceed. A prominent call-to-action, “Click Here to Learn More About Next Steps and Finalize Muffin’s Adoption,” ensures a seamless transition to completing the process.
Key features include an emotionally engaging design with Muffin’s image, concise messaging, and an easy-to-follow call-to-action that guides Margaret effortlessly. This popup confirms her progress while fostering excitement and ensuring a smooth path to finalizing the adoption.
12: Complete Your Adoption
Margaret reaches the final stage of her adoption journey with a warm message, “You’re Almost There, Margaret! Just One Last Step to Bring Muffin Home.” This page reassures her progress while motivating her to finalize the process.
Clear responsibilities are outlined, including providing Muffin a safe home, complying with legal requirements, and ensuring no unauthorized rehoming. These points emphasize responsible pet ownership and foster accountability.
Key features include a checkbox for agreeing to terms of service and privacy policies. The “Confirm Adoption” button remains inactive until all steps are completed, ensuring clarity and compliance.
This step reinforces Margaret’s sense of achievement and commitment, creating a seamless and fulfilling conclusion to her adoption journey.
13: Profile Overview
This profile overview screen serves as Margaret’s central hub, showcasing key menu options such as “Success Stories,” “Adoption Guide,” and “My Applications.” When Margaret clicks on “Success Stories,” she is taken directly to her personalized adoption story, offering a fulfilling and meaningful experience.
Key features include a clear, intuitive layout with Margaret’s profile at the forefront and easy access to essential options. This design highlights the app’s functionality while keeping her journey central.
The screen bridges navigation with engaging content, reinforcing the app’s mission of connecting users to heartwarming adoption stories and inspiring moments of companionship.
14: Success Stories
This final screen celebrates Margaret’s successful adoption of Muffin, showcasing their story in the “Success Stories” feature. The header, “Meet Margaret and Muffin: A Perfect Match,” sets a warm tone, paired with a touching photo of them together, capturing their bond.
Margaret’s story is highlighted, detailing how Muffin brought joy, serenity, and companionship into her life. Below, the “Our Happy Tails” section features other inspiring adoption stories, each with a preview image, brief description, and “Read More” link, encouraging further engagement.
Key features include a personalized success story to inspire others, along with a collection of community stories that foster a sense of connection.
This screen provides a fulfilling conclusion to Margaret’s journey, celebrating the broader impact of adoption while encouraging users to explore more heartwarming tales.
FurryFriends UX/UI Prototype
For the best experience, please view this prototype on a desktop. Some elements may not display optimally on smaller screens.
Takeaways from This Project
This project highlighted my ability to balance creativity and structure, refine technical expertise, and emphasize empathy in design. Crafting a cohesive user journey from start to finish strengthened my holistic thinking and showcased the versatility of my skills.
This project reminded me why I love design—it’s about solving problems, creating joy, and making a difference. It was both a reflection of my growth and a glimpse into what I can achieve as I continue to refine my skills and embrace new challenges.