Tender Loving Care

Responsive website for an animal shelter

TLC

BRIEF

T.L.C. has served the community as a private, non-profit, humane society, dedicated to the prevention of abuse, neglect, and cruelty to animals. Raising awareness, fostering discoverability of pets and raising money are the primary things T.L.C wants to address. They are in need of a new responsive website design to cover this purpose.

THE CHALLENGE

The underlying problem is that people still buy from shops, rather than adopt from shelters. This is problematic because there are more animals going into shelters than the system can support, and as a results almost 3 million animals get euthanized every year.

KEY DELIVERABLES

  • Design a new responsive website that covers core functionality: search for pets, pet profile, and information about the shelter.
  • T.L.C doesn’t have a defined brand, so they are also looking for new branding.
  • Revamp of the Information Architecture
  • Refine user flow
My Role

Research, persona, wireframes, prototyping, user testing, visual design

Duration

2 weeks

Tools

Sketch

Whimsical

Optimal Workshop

Invision

Research

COMPETITIVE ANALYSIS

Understand what elements are prioritized, get information about features, advantages, and disadvantages, look for ideas and inspiration.

competitive analysis

MARKET RESEARCH

I did research about what the usual pet adoption process looks like and what shelters and animal organizations recommend to take into account when choosing a pet. I also gathered some statistics about pet adoptions, issues and common misconceptions people have about adopting rescue animals. To list some of the opinions people hold when it comes to shelters:

“I don’t know what I’m getting”

“I can’t find what I want at a shelter”

“Pets are in shelters because they didn’t make good pets”

“Shelter pets have too much baggage”

“Animals for adoption are old and/or sick”

“Animal shelters are sad and gloomy places”

“Adopting is too difficult”

USER INTERVIEWS FINDINGS

Key Insights
  • Important to know why and how the pet got to the shelter
  • It is important to feel that people who work there are kind and caring and are passionate about what they do
  • Want to be sure that a pet has all the required vaccinations, is spayed and that it doesn’t have any illnesses dangerous for humans
  • Size, Temperament and Appearance are very important factors in choosing a pet
  • Important to see how it would interact with current pets and/or family members
  • Are concerned about learning how to take care of the pet: training, feeding
  • Would expect to get answers to basic questions about the adoption process
  • Most of the interviewees associate animal shelters with kindness, pity and sadness

Define

PERSONA

To represent a user type that might use the website, to identify with the user and understand her needs, behaviors and goals.

personas

PROBLEM STATEMENTS

Keeping research findings in mind I decided on the following goals:

  • How might we help people find the pet that fits them and their lifestyle perfectly?
  • How might we convince potential adopters to choose animal shelters over breeders or to strength this existing preference?
  • How might we simplify the adoption process?
  • How might we change the perception about shelters and rescue animals?

Ideate

SITEMAP

Show the relationship between the content of the site, based on the Card Sorting findings.

sitemap

USER FLOW

Identify the different paths that a user would take to purchase an Insurance Plan.

user flow

WIREFRAMES

The process began with brainstorming and sketching ideas on paper.

Next, taking into consideration user research, navigation and user flows I created responsive wireframses for a Homepage, pets list page, pet profile page, donation page, about page and schedule a visit overlay.

wireframes

BRANDING & UI DESIGN

Created a logo that sends a message about the brand. After determining key words for the brand (happy, playful, positive, friendly) I created a style guide.

UI kit

PROTOTYPE

After making branding decisions and conducting usability testing with low fidelity prototypes I developed the first version of high fidelity mockups. The functionality is limited to three major task flows:

  1. Finding a pet
  2. Scheduling a visit to the shelter to meet the pet
  3. Donating money to a specific pet

Next, I created an interactive prototype using Invision and used it to validate my design solutions.

Test & Iterate

USABILITY TESTING OBJECTIVES

  1. Gather feedback: what causes confusion or frustration
  2. Learn if people find the navigation clear and intuitive
  3. Determine what mood the website conveys
  4. Determine if any information or elements are missing

SYNTHESIZING USABILITY TEST RESULTS

I conducted the usability testing of the high fidelity prototypes with 6 people an created an affinity map Sort user testing feedback synthesizing sucesses and weaknesses and identify possible solutions.

affinity map

ITERATION AND FINAL DESIGNS

Based on the testing results I made changes to the prototypes.

design 1design 3design 3

NEXT STEPS

For next steps, I would test the updated version of the website and iteratively improve the design.