<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta name="theme-color" content="#fafafa">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Source+Sans+Pro&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<title>Pet Nest</title>
</head>
<body>
<div class="canvas">
<section class="navbar">
<nav>
<a href="index.html"><img src="img/yucheng-logo-v1.png" alt="personal logo" height= "72px"></a>
<div class="nav" style="font-size: 1.2em;">
<a href="ui-ux.html" class="hvr-underline-from-left" style="font-weight: 600">Work</a>
<a href="about.html" class="hvr-underline-from-left" style="font-weight: 600">About</a>
<a href="img/Resume_Yucheng.pdf" class="hvr-underline-from-left" style="font-weight: 600">Resume</a>
</div>
</nav>
</section>
<div class="content">
<br><br><br>
<section class="ar-pokemon-banner">
<img class="banner" src="img/pet-nest-cover.jpg" alt="banner">
</section>
<br><br><br><br>
<section>
<h1 style="font-weight:700">PET NEST</h1>
<br>
<div class="spine-intro">
<div class="spine-intro-item1">
<h2>Overview</h2>
<p>Pest Nest is a service design in order to improve the living conditions of stray animals. For the purpose of designing for all touch points throughout experiences and user interactions, I breaked the stray animal rescue service into separate processes and user journey sections. Therefore, I decided to solve the problem in three aspects: provide a convenient adoption channel, report the injury promptly and prevent pet loss.</p>
<p>Pet Nest contains three parts: an app that supports online adoption and animal injury report, a smart collar that prevents pets from getting lost and an offline volunteer team takes charge of sending injured animals to hospital and home visits.</p>
</div>
<div class="spine-intro-item2">
<h2>Role</h2>
<p>User Research, UI/UX design, Product Design, Visual Identity Design</p>
<br>
<h2>Team</h2>
<p>Individual Work</p>
<br>
<h2>Tool</h2>
<p>Photoshop, Illustrator, Sketch</p>
</div>
</div>
</section>
<div class="process-book">
<a href="img/PetNest_process_book.pdf" target=_blank>Process Book</a>
</div>
<br><br>
</section>
<br><br><br><br><hr><br><br>
<div><a href="#" style="display: block; float:right"><img src="img/up-arrow.svg" height=40px></a></div>
<section>
<br><br>
<div><p style="text-align: center; font-weight: 600; font-size: 1.5em; position: relative; bottom: -12px; ">All Works</p></div>
<div class="line1"><hr class="green-line-1"></div>
<br>
<div class="bottom-nav">
<p><a href="ui-ux.html">UI/UX</a></p>
<p><a href="web-design.html">Web Design</a></p>
<p><a href="motion.html"></a>Motion</p>
<p><a href="visual.html">Visual</a></p>
<P><a href="creative coding.html"></a>Creative Coding</P>
</div>
<br><br><br><br>
<div class="contact">
<div class="footer-item">
<a><img class="footer-item-image" src="img/linkedin.svg" alt="linkedin logo" height= 45px></a>
<a><img class="footer-item-image" src="img/github.svg" alt="github logo" height= 45px></a>
<a><img class="footer-item-image" src="img/email.svg" alt="email logo" height= 45px></a>
</div>
</div>
<p style=" text-align:center">© Designed by Yucheng Hang</p>
</section>
</div>
</div>
</body>
</html>