Loading

Pic Me Pets UX Case Study by Kimberly Terese

About

Pic Me Pets is a website dedicated to helping shelter pets find homes faster. It does this by providing compelling photography through local volunteer photography participation. By focusing on the photos, this content-first driven website allows shelter pets to get the marketing they deserve.

PART 1

Summary

I collaborated with local shelters and volunteer photographers to schedule events for content.

`

  • Timeframe: 02/14/2016 – Present
  • Platform: Responsive Website
  • Key Performance Metrics: Web Metrics
  • Responsibilities: Founder, UX Lead, Content Strategist
  • Team Members: Tech. Lead: Curtis Carter, Volunteer Photographers: Tim Doyle, Ron Buck, and Michael Pachis
  • UX Methods: Lean UX, Rapid Prototyping, User Empathy Maps, and MVP
  • Design Tools: Photoshop, Illustrator, XD, and POP APP

Problem

The process of adoption has changed with the prevalence of the Internet in the last decade. When choosing a pet a few years ago, potential adopters would visit a shelter. They first looked at the appearance of the animal. They would then explore the personality of the pets. Today, pets are currently judged by their appearance alone. They must make an impression within seconds on a screen. If a pet is poorly photographed and marketed, this greatly reduces the chance for them to be adopted.

I organized a local group to help photograph animals at the Humane Society of Memphis and Memphis Animal Services. We photograph at both places regularly. Our group is not a nonprofit and it simply cost $15 to be put together. We have accomplished so much in just a year. Our photos have recently been included in both of their online directories. This means that our photos are the first photos seen when someone is looking for a pet in Memphis. Because of one person who shared their story, many lives were saved. We hope by sharing our story; countless more lives will be spared in the future.

User Empathy Maps

I used a contextual inquiry on a competitor to determine user pain points. I sat with two user volunteers from campus in their apartments as they used a competitor’s website to search for a dog. From these contextual inquiries, I made my user empathy maps.

User Empathy Map 1
User Empathy Map 1

Research

Through qualitative research and extensive secondary research, I educated myself on which specific factors affected pet adoption. I summarized my key findings below:

Increase Adoption Rates:

  • Dogs photographed outside
  • Dogs photographed standing up
  • Dog or cat makes direct eye contact with camera

Decrease Adoption Rates:

  • Blurry photos
  • Photos not appropriately sized
  • Animals in cage
  • Too many photos

MVP

After deciding to make a content first website due to my research, I made an MVP using a Facebook page to determine the need for our content. Working with the volunteer photographers and local shelters, we were able to develop new pictorial content on a weekly basis.

Early Mockup

After I put an early mock-up together of what I envisioned, I started to code it my HTML & CSS course. I was interested in how cards worked loading a quantity of photos.

Mockup - Photoshop
Mockup - Coded

Wireframes

I created clickable wireframes using Sketch and POP to iterate through design options quickly. Working with the technical lead and volunteer photographers, I used these wireframes to discuss content strategy. After sharing these, I quickly realized this was harder to code and maintain I thought. Working with volunteers and limited resources, I re-evaluated “needs” vs. “wants.”

Wireframe Example 1a
Wireframe Example 1b

Surveys

After distributing user surveys, I made more wireframes to better fit my user feedback. This time, I broke down the navigation by what the users voted most important.

Survey Results
Wireframe Example 2a
Wireframe Example 2b

Lean Prototype

After the volunteer photographers and I developed enough content; I made a lean prototype. I utilized a WordPress CMS pre-made template to deliver content faster and in a more contextual manner. This lean prototype would be a starter website to test content. Viewers are not able “read more” or enlarge images. It also has horizontal scrolling for desktop.

I tried to automate posting on our site via our Facebook page. This way, volunteers could post photos without logging into our CMS. With limited resources and time, I could not re-post each photo along with detail on the site. After the automation completed, the pictures did not properly resize to our site. To remain updated with shelter information, more detailed code would be needed that could speak with the various websites.

Lean Prototype

Conclusion

Over the past year, our volunteers have always posted on our Facebook page. To keep up the site, we would need to transition to a more sustainable workflow. This would have to occur in phases and is a long-term goal. To have the website update seamlessly with other shelter websites, we would need more code. For now, social media is our best option. Our photos are being shared and since our model is “content-first,” this is priority. The next sprint will focus of mobile first design along with our content first design strategy we have thus far.

Recap

What did you learn?

For this specific website, there are two design strategies. This sprint is content first design. The next. sprint will be mobile first design.

Were there any insights from user research that surprised you?

There is an inverse relationship between the number of photographs and sympathy. More photographs took away sympathy for the pet.

What was the most challenging thing about this project and how did you overcome it?

Starting out was a challenge. Each place seemed to have their own “red tape.” Most places did not allow individuals to photograph. This was caused by either hectic daily operations or liability reasons. Some would permit groups to photograph but under strict rules. One rule required the pets to remain behind bars. We countered this by establishing a relationship with each one. We also sought to help them in whatever way we could. Over time, we formed lasting relationships with each place. This has certainly paid off. We now contribute to both of their online pet directories, and our photos are shared by them on social media. We even were asked to teach pet photography every month at the Memphis Animal Services Volunteer Orientation.

What quantitative data can you show to measure the success of the product?

MVP Web Metrics: 2,300 likes on Facebook Page Average weekly reach of 13,000

What part of the design process did you particularly enjoy?

Content Creation – I got to work with great people and great animals.

Testimonials

"Kim recently graduated from the University of Memphis with an extensive skill set in User Experience (UX) Design for web sites and application interfaces. Her volunteer efforts to publish a new web site to showcase professional quality photographs of shelter animals demonstrate her ability to make a difference. I'm impressed with her technical capabilities and her enthusiasm for each new task. She'd make a great addition to any UX team."

-Ron Buck

Featured on MakeMemphis.org

Created By
Kimberly Terese
Appreciate

Credits:

Tim Doyle

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.