top of page
鲸鱼素材 (19) 1.png

Pet Companion Life

Web Design | UI/UX | Community

“Living with Pets – Find a Community for You and Your Furkids” is an integrated online platform designed for pet owners and lovers to connect, share knowledge, and engage in discussions about their pets. The community offers a wealth of information on pet care, training tips, and health advice, while also providing a dedicated pet adoption service to help connect pets in need with loving homes. The website features six pages, including sign-up and log-in functionality, a community forum for users to share experiences, and personalized user profiles to track activity and connect with others. Additionally, it provides a space for local events and meet-ups, enabling users to extend their virtual connections into real-world interactions. This platform aims to create a supportive, educational, and interactive environment where pet lovers can find resources, share advice, and build lasting connections with others who share their passion for animals.

You can check more information and source code of the website in GitHub: 

https://github.com/Evvvvvvva0504/Yijia_Sun_Final_Project_main

1-index.png
2-homepage.jpg
3-PE-page.jpg
4-PA-page.png
5-PLC-page.jpg
6-PLC-article-page.png
7-signup.png
7-signup.png
8-login.png

Motivation

One day, I saw a dead squirrel lying under a tree in my campus. It used to be the most lively being here, while it now rested permanently upon the cold, soft earth, for whatever reason. The little guy made me think of numerous stray dogs, cats, and any other animals that I have watched or touched. When being exposed to wind and sun, their destiny would be like that of the squirrel.


Therefore, I decided to build an online adoption platform to find stray animals a home. Further, I expended it into a more integrated, community with multi-functionality.

Objectives

The website aims to:

  • Enrich people’s knowledge about animals and pet care.

  • Help prevent pet abandonment due to lack of knowledge or inadequate care to pets from the owners.

  • Help reduce the amount of stray animals and promote responsible pet ownership.

  • Build an online community for pet lovers/owners to contact and support each other.

Technology

HTML   |   CSS   |   PHP   |   JavaScript

Sketchs

2.jpg
3.png
7.png
4.png
5.png
6.png
9.png
8.png
鲸鱼素材 (21) 1.png

Review

IMG_0347.JPG

After user testing, I conducted a thorough review of my website project based on my own reflection and user feedback. The advantages are that the website has a unified style and a clear, well layed out interfaces. However, it also has several limitations, such as:

  • being too boring with its Pet Encyclopedia page. There are robust online encyclopedias for various animals already, so a similar function seems unnecessary here. Plus, encyclopedia content lacks attraction for people to read.

  • being too cumbersome as a computer-based website. When people are walking on the street, they are not likely to hold a computer to browse the web.

  • lacking interactivity. Posting and commenting may be enough for a website on computer but far from sufficient for a mobile application.

Iteration Plan

I planned to iterate my current deliverable by three points:

  1. Move the platform from the computer-based to the mobile-based. That means, instead of making webpages on computer, I would like to create UI for a mobile application for the same theme and objectives and similar functionality.

  2. Eliminate the Pet Encyclopedia.

  3. Instead, add a scan-and-upload function as one of the core functions for the mobile application. With the scan-and-upload function, people can scan homeless animals wherever and whenever they meet and upload the animal's information to the platform which will be viewed adn taken actions by professional staff in animal rescue and sheltering later.

Task Flow

Pet Campanion Life Task Flow.png

Wireframe

Home Page

###01-home.png

Scan Page

###02-scan.png

Report Page

###04-report.png

Pet Adoption Page

###06-PA-main.png

Detail Page

###08-PA-detail-back.png

Info Page

###09-PA-authen.png

Pet Lovers Community Page

###10-PLC-main.png

Article Page

###12-PLC-detail.png

UI Design

Home Page & Scan-and-Report

What if you see an animal straying on the street...

01-home (update).png
02-scan (update).png
03-scan-shoot-after (update).png
04-report (update).png
05-report-edit (update).png

Pet Adoption

What if you want to adopt a pet...

Pet Adoption

06-PA-main (update).png
07-PA-detail-front.png
08-PA-detail-back (update).png
09-PA-authen (update).png

Pet Lovers Community

What if you want to adopt a pet...

10-PLC-main (update).png
11-PLC-main-plus (update).png
12-PLC-detail(update).png

My Upload & Saved

What if you want to look back...

13-my-upload (update).png
14-my-saved (update).png
2-恢复的 1.png
222 1.png
bottom of page