top of page

Pet adoption website

Ux design

Vectary texture.png

O

VERVIEW

Pet adoption website is a responsive website, specially designed for pet lovers and who likes to adopt pet and need a genuine website to stay away from fake websites.

This is a conceptual case created as part of my UI/UX certification

Problem

There is no genuine website for a pet adoption, and there are no adoption and donation on the same site which makes users so confused and frustrated

Solution

Creating a pet adoption website which makes users to feel trusty and include like adoption & donation options for the users who loves pets.

TOOLS

experience.png
figma.png

Adobe XD & Figma

DURATION

clock.png

4 weeks

ISCOVERY

D

User research

ROLE

pen-tool.png

UI/UX Designer

In my research I conducted qualitative and quantitative, for qualitative research I asked 5 basic questions like what kind of browsing they do about pets & their best experiences & bad experiences about pet adoption and I took 5 quantitative survey.

Persona

Yellow and Orange Foundational Customer Journey Mapping Online Whiteboard.png
Yellow and Orange Foundational Customer Journey Mapping Online Whiteboard.png

User journey map

User Journey Map -1.jpg
User Journey Map -2.jpg

I

DEATE

Sitemap

Screenshot 2022-08-10 at 2.39.27 PM.png

Paper wireframes

IMG_0371.jpg

Refined wireframes

IMG_0373.jpg

Digital-wireframes

Webpage wireframe

refined wirefrsmes-1.jpg

Mobile wireframe

refined wirefrsmes-2.jpg

ESIGN

D

Low-fidelity 

I started creating low fidelity prototype based on the wireframes I created

Home page.png
Category page.png
Dog selected.png
Dog filter 6.png
Dog filter 7.png
Dog filter 8.png
Dog filter 9.png
Dogs page.png
Adopt form pet.png
Pet details.png
Done page.png

Visual design

Colors

#B3CDBC

#6595A4

#787977

#893636

#9A8B55

#A1588D

#B66161

Font

Open sans

Helventica

Typography

H2  50pt  

H3  30pt  

Icons

Main.png
care.png
idea.png
adopt.png
dog.png
cat.png
bird.png
others.png

Buttons

typing.png
Magnifier.png
heart.png
Share.png
Rectangle 47.png

Book appointment

Rectangle 55.png

Send

Affinity diagram

affinity diagram-1.jpg

High fidelity design

Website

Home page.png
Category page.png
Dog filter 1.png
Dog filter 4.png
Dogs page.png
Adopt form pet.png
Home search.png
Dog selected.png
Dog filter 2.png
Dog filter 5.png
Pet details.png

The final high-fidelity presented cleaner user flow for building the pet adoption & it’s also reached user’s needs and made them satisfied.

Done page.png

Mobile

home page 2.png
pets category-1.png
pets category-4.png
pet details.png
done page.png
hamburger slide.png
pets category.png

The final high-fidelity presented cleaner user flow for building the pet adoption & it’s also reached user’s needs and made them satisfied.

pets category-2.png
pets category-5.png
adopt form.png
pets category-3.png
dogs page.png

High fidelity prototype

Screenshot 2022-08-02 at 8.13.08 PM.png

Mobile prototype 

Screenshot 2022-08-10 at 5.49.41 PM.png

T

EST

julien-tromeur-QW3OUweGvlA-unsplash.jpg

Bobby

"the website is really great the options are really great"

vadim-bogulov-rdHrrFA1KKg-unsplash.jpg

Roshni

"Now I feel like a genuine website".

33.jpg

Sameer

"In first I can't find the adopt and donate options in same website, now it is really great to access".

43.jpg

Kishore

"I liked the website flow and mobile version is too good."

52.jpg

Madhav

"Everything is good".

Recollect

This was my second case study after entering the UI/UX world, It was quite exciting to do. Since this was a conceptual case for my certification, I had to come up with everything from the scratch. It was challenging at first even it is my second project because this time I should create a responsive website. The project is a unique topic, but for me  it's already chosen. So, I tried to understand the pain points and discovered & designed a product.

​

​

                            I want to learning & design cool stuff!!!

THANK YOU for reading

3-2-thor-transparent.png
bottom of page