ADOPT A PET
Company: PetHome / Project Name: NPO Pet Adoption / Date: 07/2021 - 09/2021
The Product
PetHome is a web and app project designed to bring together different non-profit associations dedicated to animal care and find a home for those animals in need.
The Problem
Animal shelters struggle to get people to adopt. Their common mode of publication is usually on individual websites or facebook pages.
The Goal
This project aims to bring together in one place all the kennels or animal shelters that are near your area, providing as much information as possible to the user and he can have a first contact.
STARTING THE DESIGN
Sitemap
The site map illustrates the main sections and pages of the "PetHome" project. The home screen is the main page, with featured pets, nearby shelters, and dog walks. Users can log in or register to create a profile, where they can manage their favorite pets. The Featured Pets page provides complete information about a particular pet, with images, descriptions, health status, compatibility and contact details for the shelter or rescue organization. Users can easily adopt or save a pet they are interested in.
Wireframes
In this project I will focus on the visual design part as it was what I worked on the most. I created the wireframes first on the app and then on the web, allowing a more thoughtful and efficient adaptation of the interface to larger screens, ensuring a consistent and optimized experience on all devices.
Color Palette
The predominant color is orange because in color psychology it symbolizes enthusiasm, creativity and friendliness. It can bring a playful and vibrant touch. This is exactly the message to convey and what an animal can bring to your life.
Visual Elements
I created these visual elements to enhance the user experience and reinforce the brand identity, giving it a fun touch and keeping the consistency between them.
REFINING THE DESIGN
Mockup
The application opens with a welcome screen next to the sign-in/sign-up screen because if the user is not registered, he cannot proceed with the adoption, but he can check out the rest.
The home screen displays a hero banner with rotating images of pets available for adoption.
Tapping on a pet's image or name opens a detailed page showcasing the pet's information.
The page includes the pet's name, breed, age, gender, and a heartwarming description about the pet's personality and history.
Users can see multiple photos of the pet, and there are buttons to contact the shelter or share the pet's profile with others.
An "Adopt" button allows users to initiate the adoption process for the pet they are interested in.
Interactive prototype
The interactive prototype was edited with InVision, allowing us to easily evaluate the design and modify the interaction.
Visual Design for AppStore
I created the visual design for the app store of the pet adoption app in order to capture the hearts of potential users with its warm and welcoming aesthetic. Through carefully selected colors, heartwarming imagery, and a user-friendly layout, we aim to evoke a sense of compassion and connection, encouraging more people to explore pet adoption and find their perfect furry companion.
Technologies used
Adobe XD
Photoshop
Illustrator
Excel
InVision
Methodologies used
Visual Design
Responsive Design
Mobile-first
User-Centered Design
UI Design