Capture.JPG

Responsive Web

Catalyst

Responsive Website Design for Pittsburgh Animal Shelter


 

Duration:

4 weeks

Team:

Ticha Sethapakdi

Jeyoung Park

Zhuoying Lin

Methods:

Interview

Gurrila Research

Journey Mapping

Usability Testing

Tools:

Illustrator

InDesign

Adobe XD

After Effect

Invison

 

 
AdobeStock_125752491.jpg
 
 

The challenge:

The Pittsburgh Humane Animal Rescue Center has significant increase on the amount of animals, so they decided to improve the current website to send out those animals quicker, and leave space for in-coming animals.

The Outcome:

Instead of trying to creating a perfect user friendly animal adoption website, we created a social media for those animals in addition to the existing org website. The platform means to connect animals with customers as well as the shelter and increase the information accessibility for both customers and shelter staffs .

 
 
 
 
 
 
 
 
 

The Sandbox Feature

The idea of allowing users to interact with cats through the website was brought up in the speed dating phase. Thus to distinguish Catastic even more from normal pet profiles in social media websites, we decided to add a creative feature for the desktop site called the ‘Sandbox’, which allows users to remotely interact with the cats. We imagined that the sandbox would be a permanent installation in the shelter, comprising of a floor projection and an overhead camera. Each day, at some designated time, a volunteer would take one of the Catastic cats to the Sandbox room to play. When a cat enters the Sandbox, it will appear at the top of the Profiles panel on the homepage with a colorful ring around its picture. When the picture is selected, a window showing a live feed of the projection will appear. Customers that are logged in to the website can control a colored marker in the projection by clicking and dragging their mouse around the projection area in the video. For the final pitch, we created a demo using Processing which demonstrates how two different users can engage with the Sandbox.

 
 
 

 

The process

01

Identify opportunity by research and survey

  • Guerrilla Research & Secondary Research

    In order to better understand the intentions, expectations, and pain points from the customers, service providers, and business owners, we made a trip to the local Humane Animal Rescue Center where we interviewed several customers, volunteers, staff, and managers. With low effort, cost, and time, we were able to quickly understand the problems that the customers and service providers share in their own perspectives. Combining this with our secondary research we wanted to redo the entire the website for the shelter with improved UI, so the customers could better access information from the website, saving a lot of the repetitive questions and work for the staff. This new website would also allow the customer to easily browse through the animals.

  • Customer Journey Map

    In the journey maps we tried to highlight the points where the customers are struggling to narrow down the choices for the adoption. In the end, we narrowed down our scope to helping the customers narrow down their choices for the adoption. We have also decided to consider only the cats in this project amongst the different animals at the shelter.

 
 
 

 

02

User Persona Analysis

Basing off our story on the five college students living in a fraternity house who wanted to adopt a cat that could withstand their housing environment, we have created the personas. The Andersons family have two children who are relatively young, and with this, there are several factors to consider when adopting a cat. We strives to better understand the pain points of the customers and the staff in such situations, and how Cathy, the staff in the animal shelter, and the customers could interact using a website to ease these pain points. With happier customers and staff, we assumed that the business owner would be happier.

 
 
 

 

03

Storyboards

Even though we were pretty adamant with our solution, we have decided to draw various storyboards featuring all customers, service providers, and the business owners. While we expected the storyboards to require minimum effort and time based on our readings, we discovered that they were quite challenging as we had to portray ample information and subtle details using black and white drawings with minimal words.

 
 
 

 

04

Prototyping the structure

 
 
 
 
 
 

Customer View

  • We believed customers would be primarily interacting with the mobile version of the website. The home feed shows the image posts made by all cat users. As in standard social media websites, customers can ‘like’ posts. Customers can also quickly access the cat users they favorited in the header.

  • Customers may access the ‘catbook’ page which shows all the cat users on the website. Selecting a cat’s picture will redirect them to the profile page.

  • A cat’s profile page shows all the posts from that cat, in reverse-chronological order. Customers may choose to only view image posts or text posts, which are reserved for more ‘notable events’ such as surgeries or sicknesses. The icon next to the cat’s name gives customer’s access to detailed information about the cat.

Service Provider View

  • We believed service providers (volunteers) would be primarily interacting with the desktop version of the website. When a cat is at the shelter for 5 months or longer, the volunteer may choose to add it to Catastic. As the website is synced to the shelter’s databases, the volunteer simply needs to check boxes to populate the cat’s profile information. When the cat is added to Catastic, the volunteer who added it would become its ‘primary volunteer’.

  • Volunteers also have an inbox that gives them access to website statistics such as the most popular and least popular cat profiles of the month. They can also see the customers who ‘liked’ the posts of the cats they are the primary volunteer for.

  • Volunteers would almost exclusively use the mobile version of the website for uploading content.

Timeline Algorithm

  • While layout-wise, Catastic appears very similar to that of Instagram or Twitter, there are some key differences. One distinguishing feature of Catastic is that posts in the homepage’s timeline are arranged in reverse-chronological order by unpopularity. Unlike typical social media websites which give more priority to popular content, Catastic ensures that newer and less popular posts show up closer to the top. The popularity of a post is determined by the number of users who ‘favorite’ it.