Flora's Design

My Furry Friend

My Furry Friend 

A responsive web design for adoptable pet matching platform.

Squarespace.png

Tool Used

Project Briefing

  • Goal: Design a responsive pet adoption website.

  • Role: UX research, UI design, web design, visual design

  • Time: 2 weeks

Tools.png

Research

Every year, approximately 6.5 million stray animals enter US animal shelters nationwide. Of those, only 3.3 million are successfully adopted. —ASPCA, 2015

Shelter Visit

To start with, I visited a local adoption facility to see what are the pain points of pet adoption process, both to the social workers and the potential pet adopters.

I talked with the lady in Colony Cat, a zero-kill pet adoption shelter in the Columbus Ohio area. The shelter is a cage-free institution that allows visitors to engage in closer interaction with adoptable cats. When I visited, the shelter hosts 60+ cats in house, with 200+ in foster homes and other adoption centers.

Colony Cat has a daily visitor of about 100; however, the conversion rate is lower than desired. Also, the shelter wishes to raise more donations for them to provide bigger space, better health support and logistics for the hosted animals.

I also talked with the visitors to learn about their expectations about the pet-adopting experience. According to their feedback, I put together the user persona.

 

Persona

The user persona portrays the pain points and expectations of the adoption experience they had. Potential pet adopters are willing to adopt because of lower adoption fee compared to buying from breeders. However, they are concerned about potential health problems of adopted pets, and are discouraged by far-too-many shelter visits in search of their ideal pet.

Designing the Flow

In response to the pain points, the design goal of the website are as follows:

  1. Create a pet matching website to reduce unnecessary shelter visits.

  2. Streamline the time scheduling process and adoption request, to minimize the hassle.

  3. Encourage share, donation and other rescue assistance options.

Wireframe

Based on the user flow chart, I created a rough wireframe on the key pages to define the layout and call to actions. At the same time, I have designed the responsive web approach on tablets and cellphone.

Having draw out the wireframe, I have tested with a few users and applied suggested iterations in later designs. One large modification was replacing adoption stories with the information of the website. The purpose is to make people understand and identify with the website goal, and engage them to take actions.

Visual Design

I was inspired by Wes Anderson’s movie “The Isle of Dogs”. I hope to incorporate the fun and brightness to the whole website design. The logo design added “Heart” and “Fur” for fluffy friendship. Also I’ve created the style tile along the way.

Logo-sketchArtboard-1.png
Artboard 1.png
style_tile.png

Project overview

MoCkup video

Mockup link